我已经阅读了关于Hooks的React Docs，我很困惑。 什么时候调用useEffect Hook清理函数？

Question

关于何时调用useEffect清理函数的react docs解释令人困惑且泛泛地说。 他们甚至通过将类思维模型与钩子进行比较来使您更加困惑。 基于类的组件的工作方式不同于带有钩子的基于函数的组件。 React会记住您提供给useEffect的effect函数，并在将更改刷新到可以理解的DOM后运行它。 现在如何以及何时调用返回的函数（“清理函数”）？

下面的代码示例：

import React, { useState, useEffect } from 'react';

function FriendStatus(props) {
  const [isOnline, setIsOnline] = useState(null);

  useEffect(() => {
    function handleStatusChange(status) {
      setIsOnline(status.isOnline);
    }

    ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
    // Specify how to clean up after this effect:
    return function cleanup() {
      ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
    };
  });

  if (isOnline === null) {
    return 'Loading...';
  }
  return isOnline ? 'Online' : 'Offline';
}

Answer 1

当作为第二参数给出的数组中的任何元素发生更改时，或者在每次渲染时（如果未提供第二参数），或者卸载组件时，将调用从作为useEffect第一个参数给出的函数返回的函数。

例

 const { useEffect, useState } = React; function MyComponent({ prop }) { useEffect(() => { console.log('Effect!'); return () => console.log('Cleanup!') }, [prop]) return ( <div>{prop}</div> ); } function App() { const [value, setValue] = useState(0); useEffect(() => { setInterval(() => { setValue(value => value + 1); }, 1000) }, []) return value < 3 ? <MyComponent prop={value} /> : null; } ReactDOM.render(<App />, document.getElementById("root")); 

 <script src="https://unpkg.com/react@16/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> <div id="root"></div> 

Answer 2

如果不使用第二个参数，它将在每个渲染器上调用。

这通常是多余的，因此即使第二个参数为空[]也是一个好主意。

例如。

useEffect(() => {....}, []);

当组件与DOM物理分离时，执行上述操作只会调用清除。

您也可以传递props而不是[] ，如果说更改props ，这很方便，例如您所在的聊天室，它将清理当前的聊天室，并初始化新的聊天室等。

因此，在您的示例中，传递[props.friend.id]是有意义的，因为如果id发生更改，则有必要调用清除操作，然后为新的id重新运行效果。