react 生命周期写法
时间: 2024-08-16 09:05:07 浏览: 36
React组件生命周期可以分为三个阶段:挂载(Mounting)、更新(Updating)和卸载(Unmounting)。以下是每个阶段的主要方法:
1. 挂载阶段(Mounting Lifecycle):
- **componentWillMount()**: 组件被添加到DOM之前会被调用,用于初始化数据。
- **render()**: 必须实现的方法,创建并返回React元素,描述UI结构。
- **componentDidMount()**: 组件已经被渲染并在DOM中存在后调用,可用于进行异步数据请求。
2. 更新阶段(Updating Lifecycle):
- **shouldComponentUpdate(nextProps, nextState)**: 可选方法,如果返回false,组件将不会重新渲染,仅当props或state改变才会触发。
- **getDerivedStateFromProps(props, state)]: 提供新状态的基础,在接收到新的props之后调用。
- **render()**: 再次渲染组件。
- **getSnapshotBeforeUpdate(prevProps, prevState)**: 在渲染完成但在DOM更新前调用,通常用于获取DOM快照。
- **componentDidUpdate(prevProps, prevState, snapshot)**: 更新完成后执行,常用于清理副作用或更新依赖。
3. 卸载阶段(Unmounting Lifecycle):
- **componentWillUnmount()**: 组件从DOM中移除前调用,清理资源,如清除定时器、事件监听等。
需要注意的是,自React Hooks的引入,许多旧的生命周期方法已经被新的hooks替代,比如`useEffect`和`useState`。现在更推荐使用Hooks而不是传统的生命周期方法组织组件。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)