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时需要注意两件事

不传递第二个参数

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

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

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

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

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

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

2 个答案: