在 useEffect 中，不提供依赖数组和提供空依赖数组有什么区别？

Question

我收集到 useEffect 钩子在每次渲染后运行，如果提供了一个空的依赖数组：

useEffect(() => {
  performSideEffect();
}, []);

但这和下面的有什么区别？

useEffect(() => {
  performSideEffect();
});

注意最后缺少 []。 linter 插件不会发出警告。

Answer 1

不太一样。

给它一个空数组就像componentDidMount一样，它只运行一次。
不给它第二个参数作为 componentDidMount 和 componentDidUpdate，因为它首先在挂载上运行，然后在每次重新渲染时运行。
给它一个数组作为第二个参数，里面有任何值，例如 , [variable1] 只会在挂载时以及任何时候执行你的 useEffect 挂钩中的代码特定变量 (variable1) 发生变化。

上阅读有关第二个参数的更多信息以及更多关于 hooks 在官方文档上的实际工作方式的信息

Answer 2

只是对 @bamtheboozle's 答案的补充。

如果您 return 来自 useEffect

的清理功能

useEffect(() => {
  performSideEffect();
  return cleanUpFunction;
}, []);

它会在每个useEffect代码运行之前运行，为之前的useEffect运行做清理。（除了第一个 useEffect 运行）

In useEffect, what's the difference between providing no dependency array and an empty one?