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

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

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

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

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

请注意最后缺少 []，linter 插件没有抛出警告。

59917 次浏览
小开
最佳答案

这不太一样。

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

  • 如果没有第二个参数，那么 componentDidMount和 componentDidUpdate就同时起作用，因为它首先在 mount 上运行，然后在每次重新呈现时运行。

  • 给它一个数组作为第二个参数，其中包含任何值，例如 , [variable1]将只在 mount 上执行 useEffect钩子 ONCE 中的代码，以及任何特定变量(variable1)的更改。

您可以阅读关于第二个参数的更多信息，以及关于 Hook 如何在 https://reactjs.org/docs/hooks-effect.html的官方文档上实际工作的更多信息

小开

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

如果从 useEffect返回清理函数

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

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

小开

不同之处在于，如果不提供空数组依赖项，那么 useEffect ()钩子将在 mount 和 update 上执行。


提交答案