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

Question

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

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

Answer 1

第一个将运行对挂载和状态更改产生影响。清理将在状态更改和卸载时调用。

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

最后一个将运行对挂载的影响以及每当 isOn 状态改变时。当 isOn 更改和卸载时将调用清理。

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

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

Answer 2

使用useEffect需要注意两点

Not passing the second argument

在上述情况下，如果指定了 return 函数，useEffect 将清除之前的效果，并且运行在组件的每个渲染器上产生一个新效果

Passing the second argument as empty array

在上述情况下，效果将在初始渲染时为运行，在卸载时效果将通过指定的 return 函数清除

Passing the second argument as array of values

在上述情况下，初始渲染和更改数组中指定的任何参数时效果将运行。 return从效果中删除的清理方法是运行在创建新效果之前

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

useEffect second argument variations in React hook?

reactjs

react-hooks