reactjs - useEffect React Hook 中的第二个参数变体？

在react挂钩中，这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]);
}

传递空数组，带有元素的数组与根本不传递之间的区别？

最佳答案

第一个将在安装以及状态改变时运行效果。在状态更改和卸载时将调用清除。

第二个将只在挂载上运行一次效果，并且仅在卸载时调用清理。

当isOn状态更改时，最后一个将在安装时运行效果。当isOn更改并且卸载时，将调用清理。

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

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