React 钩子中的 useEffect 第二个参数变体？答案

【问题标题】：useEffect second argument variations in React hook?React 钩子中的 useEffect 第二个参数变体？
【发布时间】：2019-08-09 22:51:30
【问题描述】：

在react hooks中，这3个sn-ps有什么区别。

//1.

function App() {
  const [isOn, setIsOn] = useState(false);

  useEffect(() => {
    const interval = setInterval(() => console.log('tick'), 1000);

    return () => clearInterval(interval);
  });
}

//2.

function App() {
  const [isOn, setIsOn] = useState(false);

  useEffect(() => {
    const interval = setInterval(() => console.log('tick'), 1000);

    return () => clearInterval(interval);
  }, []);
}

//3. 

function App() {
  const [isOn, setIsOn] = useState(false);

  useEffect(() => {
    const interval = setInterval(() => console.log('tick'), 1000);

    return () => clearInterval(interval);
  }, [isOn]);
}

传递空数组、带元素的数组和根本不传递之间的区别？

【问题讨论】：

那不是第二个参数吗？
reactjs.org/docs/…
只需查看文档reactjs.org/docs/… 之间的区别就像“总是”、“一次”和“每次更改为isOn”之后都一样

标签： reactjs react-hooks

【解决方案1】：

第一个将在挂载和状态更改时运行效果。清理将在状态更改和卸载时调用。

第二个只会在挂载时运行一次效果，清理只会在卸载时调用。

最后一个会在挂载和isOn 状态改变时运行效果。当isOn 更改和卸载时将调用清理。

在您的示例中，第一个和最后一个示例的行为相同，因为唯一会改变的状态是 isOn。如果第一个示例有更多状态，那么如果另一个状态发生变化，该效果也会重新触发。

我想我还应该补充的是，事情的顺序是：mount: -> run effect、state change: run clean up -> run effect、unmount -> run clean up。

【讨论】：

非常感谢，尤其是最后两行！！！救了我的命；）

【解决方案2】：

使用useEffect有两点需要注意

不传递第二个参数

在上述情况下，如果指定了返回函数，useEffect 将清理之前的效果，并在组件的每个渲染上运行新的效果

将第二个参数作为空数组传递

在上述情况下，效果将在初始渲染时运行，在卸载时，效果将被清除并指定返回函数

将第二个参数作为值数组传递

在上述情况下，效果将在初始渲染和更改数组中指定的任何参数时运行。从 effect 返回的 clean 方法在创建新效果之前运行

【讨论】：