React 钩子中的 useEffect 第二个参数变化？

IT技术 reactjs react-hooks
2021-05-21 01:59:24

在 react hooks 中，这 3 个片段之间有什么区别。

//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]);
}

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

2个回答

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

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

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

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

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

使用useEffect时需要注意两点

不通过第二个参数

在上面的例子中，如果指定了返回函数，useEffect 将清除之前的效果，并在组件的每次渲染上运行一个新的效果

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

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

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

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

其它你可能感兴趣的问题
上一篇如何在 React 中执行下一个函数之前完成所有获取？ 下一篇在react中使用标记