react生命周期有哪些
时间: 2023-11-10 09:35:12 浏览: 25
React 组件的生命周期分为三个阶段:
1. 挂载阶段(Mounting):组件被插入到 DOM 树中。
- constructor:构造函数,初始化 state 和绑定事件处理函数。
- static getDerivedStateFromProps:根据 props 计算 state 的值。
- render:渲染函数,返回组件要渲染的内容。
- componentDidMount:组件挂载后触发,可以进行 DOM 操作和数据请求等操作。
2. 更新阶段(Updating):组件的状态或属性发生变化导致重新渲染。
- static getDerivedStateFromProps:根据 props 计算 state 的值。
- shouldComponentUpdate:是否需要更新组件,返回一个布尔值。
- render:渲染函数,返回组件要渲染的内容。
- getSnapshotBeforeUpdate:在更新 DOM 前获取更新前的信息。
- componentDidUpdate:组件更新后触发,可以进行 DOM 操作和数据请求等操作。
3. 卸载阶段(Unmounting):组件从 DOM 树中移除。
- componentWillUnmount:组件卸载前触发,可以进行清理操作,如取消定时器、取消订阅等。
除了上述生命周期方法,React 还提供了错误边界(Error Boundary)的生命周期方法,用于捕获组件渲染时发生的 JavaScript 错误,避免整个组件树崩溃。其中包括:
- static getDerivedStateFromError:在组件渲染出错时,更新 state 中的错误信息。
- componentDidCatch:在组件渲染出错时,记录错误信息或发送错误报告。
相关推荐
![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)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)