我了解到如果 useEffect
Hook 提供一个空的依赖数组,它会在每次渲染后运行:
useEffect(() => {
performSideEffect();
}, []);
但是那种方式和下面的方式有什么区别呢?
useEffect(() => {
performSideEffect();
});
注意末尾没有[]
。这个语法检查插件并没有抛出警告。
我了解到如果 useEffect
Hook 提供一个空的依赖数组,它会在每次渲染后运行:
useEffect(() => {
performSideEffect();
}, []);
但是那种方式和下面的方式有什么区别呢?
useEffect(() => {
performSideEffect();
});
注意末尾没有[]
。这个语法检查插件并没有抛出警告。
这并不完全相同。
如果给它一个空数组,就像componentDidMount
一样,只会运行一次。
如果不给第二个参数,它既像componentDidMount
又像componentDidUpdate
,即在挂载时首次运行,之后每次重新渲染都会运行。
如果给第二个参数传入一个数组,并包含任何值,例如[variable1]
,则你的useEffect
钩子中的代码将仅在挂载时执行一次,以及当该特定变量(variable1)发生更改时。
您可以在官方文档阅读有关第二个参数以及有关Hooks实际工作原理的更多信息:https://reactjs.org/docs/hooks-effect.html
对 @bamtheboozle
的回答进行补充。
如果你从你的 useEffect
返回一个清理函数
useEffect(() => {
performSideEffect();
return cleanUpFunction;
}, []);
在每个useEffect
代码运行之前,它都会运行,以清除上一个useEffect
运行的内容。(除了第一次useEffect
运行)
虽然有些晚了,但我想在这里提供一个示例,这是我在阅读以上评论后为了自己的理解而做的:
代码如下:
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;
OUTPUT
On page load
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
区别在于,如果您不提供空数组依赖项,useEffect()钩子将在挂载和更新时执行。
https://react.dev/reference/react/useEffect#examples-dependencies
传递一个数组useEffect(() => {}, [a, b]);
useEffect(() => {}, []);
不传递数组
如果您根本不传递依赖数组,那么您的 Effect 将在每次组件渲染(和重新渲染)之后运行。
useEffect(() => {});
null
?难道它不仅仅是在 useEffect 钩子中不放置代码的同义词吗? - PatrickuseEffect
将在渲染后运行,而仅将代码放在那里将在渲染前运行。 - Rakha Kanz Kautsaraxios.post
插入的列表项时,我看到它在我的网络选项卡中不断发送请求。这会影响我的应用程序性能吗? - KYin