我在ReactJS文档中看到useEffect(fn, [])中的依赖数组是可选的，不提供它应该与提供空数组相同。
但是，如果我有关于的代码：https://codesandbox.io/s/trusting-sunset-h6ip9?file=/src/Count.js
useEffect(() => {
console.log("SETTING INTERVAL");
setInterval(() => {
console.log("NOW", Date.now() / 1000);
setDuration(Date.now() - startTime);
}, 1000);
}, []);
有了上面的[]，一切都按预期运行但是，如果我删除它并再次运行，如上所示：https://codesandbox.io/s/dreamy-platform-l93bv?file=/src/Count.js
我们可以在Developer的控制台或Codesandbox.io的控制台中看到，"SETTING INTERVAL"行正在持续打印。
据推测，我认为有空数组和没有in应该没有什么区别，但在这种情况下，我们需要把它放进去吗？原因是什么？
简单地说，您提供的数组告诉useEffect，当数组中的值发生变化时，它应该运行。由于该值是静态的，它将只运行一次。如果移除阵列，它将在每次渲染时运行。您也可以在数组中放入一个变量，以告诉useEffect在变量发生变化时进行更新。
空数组和"无deps"之间有一个非常明显的区别。
当您使用空数组时，实际上是在类组件中使用componentDidMount。但是，如果你不留下相同的空数组，你会发现你的计数器工作不好。
如果不想使用空数组，则必须清理useEffect。
参见关于"；没有清理的效果">
该函数不能正常工作的原因是，每次更新组件时，计数器也会运行得很快。但只要一个简单的清理命令，这个问题就可以解决。
参见关于"；"清理效果">
你可以在下面看到一个钩子的例子：
useEffect(() => {
console.log("SETTING INTERVAL");
setInterval(() => {
console.log("NOW", Date.now() / 1000);
setDuration(Date.now() - startTime);
return function cleanup() {
return 0;
// Also you can use 'clearInterval' here or anything else to stop rendering more
};
}, 1000);
});
您需要这样使用：
useEffect(() => {
const interval = setInterval(() => {
console.log("NOW", Date.now() / 1000);
setDuration(Date.now() - startTime);
}, 1000);
return ()=> clearInterval(interval)
}, []);