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

Posted 2023-02-22

【中文标题】在 useEffect 中，不提供依赖数组和空数组有啥区别？

【英文标题】：In useEffect, what's the difference between providing no dependency array and an empty one?在 useEffect 中，不提供依赖数组和空数组有什么区别？

【发布时间】：2020-02-23 00:58:00

【问题描述】：

我推测useEffect Hook 在每次渲染后运行，如果提供了一个空的依赖数组：

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

但是那和下面的有什么区别呢？

useEffect(() => 
  performSideEffect();
);

请注意末尾缺少[]。 linter 插件不会引发警告。

【参考方案1】：

不完全一样。

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

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

给它一个数组作为第二个参数，其中包含任何值，例如, [variable1]，只会在挂载时执行你的useEffect钩子内的代码一次，以及每当特定变量（变量1）发生变化时。

您可以在https://reactjs.org/docs/hooks-effect.htmlhttps://reactjs.org/docs/hooks-effect.html 上阅读有关第二个参数的更多信息以及有关钩子实际工作方式的更多信息

【讨论】：

有没有一个用例可以放置null？不就是不把代码放到useEffect hook里一样吗？

@Patrick useEffect 将在 渲染之后运行，而将代码放在那里将在 渲染之前运行

根据reactjs.org/docs/… 中的注释，传递空数组将导致除了componentDidMount 之外还在componentWillUnmount 上运行它

当我给依赖数组一个变量（例如：[myList]）以在我用axios.post 插入列表项后显示我的列表项，我看到它在我的网络选项卡中每秒不断发送请求.这会影响我的应用的性能吗？

嗯，是的。你基本上是在运行一个无限循环

【参考方案2】：

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

如果您从 useEffect 返回清理函数

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

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

【讨论】：

你忘了说清理功能也总是在卸载时运行。因此，例如，如果依赖数组为空（[]），那么清理函数将只运行一次：卸载时。请参阅“注释”部分here（向下滚动）。