useEffect
用于处理副作用操作,以及模拟类组件的生命周期方法。
副作用操作
- 处理数据获取
- 订阅
- DOM 操作
模拟类组件的生命周期方法
- componentDidMount(组件被挂载完成后)
- componentDidUpdate(组件重新渲染完成后)
- componentWillUnmount(组件即将被卸载前)
在组件渲染完成后,即组件的 DOM 元素都已经渲染到页面上后,才调用 useEffect。
index.tsx
import React, { useEffect } from 'react';
function MyApp() {
useEffect(() => {
//此处编写 组件挂载之后和组件重新渲染之后执行的代码
...
return () => {
//此处编写 组件即将被卸载前执行的代码
...
}
},[deps])
return (
<></>
);
}
export default MyApp;
deps 传值说明
- 若省略依赖数组,在每次组件挂载、重新渲染以及组件即将被卸载前,useEffect 都会触发
- 若传递非空依赖数组,当数组内的变量发生变化时,useEffect 才会触发
- 这可以用于优化性能,只在特定的变量变化时执行副作用
- 若传递空依赖数组
[]
,这表示 useEffect 不依赖于任何变量,只会在组件挂载完成后以及组件即将被卸载前触发一次- 这在只需要在挂载和卸载时执行一次的场景下很有用,例如添加和清除订阅