react.useEffect

在React中，useEffect是一个用于执行副作用的Hook函数。它可以在函数组件中模拟类组件中的生命周期方法。useEffect函数接受两个参数，第一个参数是副作用函数，第二个参数是一个依赖数组。

如果不传递第二个参数，每次组件渲染时都会执行副作用函数。这意味着每次状态更新后，组件都会重新渲染并再次触发副作用函数。这可能会导致性能问题。例如：

useEffect(() => {
  console.log(props.number);
  setNumber(props.number);
});

上述代码中，每次组件渲染时都会执行console.log和setNumber函数。

如果传递一个空的依赖数组作为第二个参数，副作用函数只会在组件挂载和卸载时执行，相当于类组件中的componentDidMount和componentWillUnmount。例如：

useEffect(() => {
  console.log('页面渲染完成');
}, []);

上述代码中，console.log只会在组件挂载时执行一次。

如果传递一个非空的依赖数组作为第二个参数，副作用函数只会在依赖项发生变化时执行。例如：

const [count, setCount = useState(1);
useEffect(() => {
  console.log('执行了');
}, [count]);

上述代码中，console.log只会在count发生变化时执行。

综上所述，useEffect是用于执行副作用的Hook函数，可以用来模拟类组件中的生命周期方法。通过传递依赖数组，可以控制副作用函数的执行时机。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [react useEffect详解](https://blog.csdn.net/weixin_45760365/article/details/124386573)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"]
- *2* *3* [react中的useEffect](https://blog.csdn.net/zsm4623/article/details/127733367)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]