IT技术 - 在 useEffect 中，不提供依赖数组和提供空数组有什么区别？ - 吾爱随笔录

IT技术 reactjs react-hooks use-effect

2021-04-09 07:46:13

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

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

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

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

注意[]结尾的缺失。linter 插件不会发出警告。

2个回答

不完全一样。

给它一个空数组就像componentDidMount在，它只运行一次。
不给它第二个参数同时充当componentDidMountand componentDidUpdate，因为它首先在 mount 上运行，然后在每次重新渲染时运行。
给它一个数组作为第二个参数，其中包含任何值，例如, [variable1]只会useEffect在挂载时执行一次钩子内的代码，以及每当该特定变量 (variable1) 更改时。

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

@PatrickuseEffect将在渲染之后运行，而只是将代码放在渲染之前运行

2021-05-22 07:46:13

根据：reactjs.org/docs/... 中的注释，传递空数组将导致运行它componentWillUnmount除了componentDidMount

2021-05-30 07:46:13

简短、准确、恰到好处！超级答案，谢谢@bamtheboozle！:)

2021-06-04 07:46:13

是否有永远放置的用例null？是不是和不把代码放在 useEffect 钩子里一样？

2021-06-05 07:46:13

只是补充@bamtheboozle's回答。

如果您从您的 useEffect

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

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

您忘记提及清除功能也将始终在卸载时运行。因此，例如，如果依赖项数组为空 ( [])，则清理函数将只运行一次：卸载时。请参阅此处的“注释”部分（向下滚动）。

2021-06-11 07:46:13

其它你可能感兴趣的问题