在useEffect中，不提供依赖项数组或提供一个空数组有什么区别？

Question

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

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

但是与以下内容有什么区别？

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

请注意，最后没有[]。 linter插件不会发出警告。

Answer 1

不太一样。

• 给它一个空数组就像componentDidMount一样，它只能运行一次。

• 给予它第二个参数不会同时充当componentDidMount和componentDidUpdate，因为它首先在mount上运行，然后在每次重新渲染时运行。

• 为它提供一个数组作为第二个参数，其中包含任何值，例如, [variable1]只会在挂载时useEffect钩子内执行代码，并且只要该特定变量（variable1 ）更改。

您可以在https://reactjs.org/docs/hooks-effect.html

处了解有关第二个参数的更多信息，以及有关钩子如何在正式文档上实际工作的更多信息。

Answer 2

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

如果您从 useEffect

返回清理函数

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

它将在每次 useEffect 代码运行之前运行，以清理之前的 useEffect 运行。 （除了第一次 useEffect 运行）