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

Question

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

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

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

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

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

Answer 1

这不太一样。

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

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

• 给它一个数组作为第二个参数，里面有任何值，例如, [variable1]将只在装载时执行useEffect挂钩ONCE内的代码，以及每当特定变量(variable1(发生变化时执行。

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

Answer 2

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

如果您从useEffect返回清理功能

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

它将在每次useEffect代码运行之前运行，以清理之前的useEffect运行。(除了第一次使用效果运行(

Answer 3

聚会迟到了，但我想把这个例子放在这里，在阅读了上面的评论后，我这样做是为了自己的理解：

import './App.css';
import { useEffect, useState } from 'react';
function App() {
const [name, setName] = useState('John');
useEffect(()=>{
console.log("1- No dependency array at all");
});
useEffect(()=>{
console.log("2- Empty dependency array");
}, []);
useEffect(()=>{
console.log("3- Dependency array with state");
}, [name]);
const clickHandler = () => {
setName('Jane');
}
return (
<div className="App">
<button onClick={clickHandler}>Click to update state</button>
<p>{`Name: ${name}`}</p>
</div>
);
}
export default App;

输出

页面加载

1- No dependency array at all
2- Empty dependency array
3- Dependency array with state
1- No dependency array at all
2- Empty dependency array
3- Dependency array with state

点击按钮-状态更新

1- No dependency array at all
3- Dependency array with state

Answer 4

不同之处在于，如果不提供空数组依赖项，则在装载和更新时都会执行useEffect((钩子。