React生命周期

1. React生命周期概述

React组件总共经历三个大的周期。

• 装载阶段

1. constructor
2. getDerivedStateFromProps
3. render
4. componentDidMount

• 更新阶段

1. getDerivedStateFromProps
2. shouldComponentUpdate
3. render
4. getSnapshotBeforeUpdate
5. componentDidUpdate

• 卸载阶段

1. componentWillUnmount

• 错误捕获阶段

1. getDerivedStateFromError
2. componentDidCatch
   一图胜千言

   

2. 装载阶段

2.1 constructor

组件构造函数，此阶段通常

• 初始化state
• 初始化类属性
• 为方法绑定this。

2.2 getDerivedStateFromProps

根据props计算state，大部分情况下使用该方法意味着代码组织有问题，可以考虑将该组件重构为受控组件或非受控组件。

2.3 render

计算当前界面展示的组件，当渲染中用到的值需要进行计算时，通常使用memoization help缓存，提高性能，减少渲染。

2.5 componentDidMount

• 适合做第一次异步请求。
• 触发setState。当你的渲染依赖于dom时，可以使用setstate触发重新渲染，用户看到的只会是最后一次渲染。谨慎使用，此方法会引起性能问题。

3. 更新阶段

3.1 概述

组件更新分为3种情况：

• 父组件更新
• setState
• forceUpdata

3.2 shouldComponentUpdate

这个阶段可以对比更新前后的props和state，来决定是否重新渲染，可以避免不必要的渲染，提高性能。一般我们可以通过继承React.PureComponent，来使用React提供的shouldComponentUpdate，对prop和state进行浅比较。

3.3 getSnapshotBeforeUpdate

这个阶段可以拿到最近一次渲染的dom元素，返回值作为componentdidupdate的第三个参数。

3.4 componentDidUpdate

• 可以通过对比props发起相应的请求
• 在条件表达式里触发setState，否则回引起死循环。当你的渲染依赖于dom时，可以使用setstate触发重新渲染，用户看到的只会是最后一次渲染。谨慎使用，此方法会引起性能问题。
• 第三个参数接受getSnapshotBeforeUpdate传递的值。

4. 卸载阶段

4.1 componentWillUnmount

卸载阶段可以做的事情有

• 清楚定时器
• 清楚自定义事件
• 中断异步请求

5. 何时使用声明周期函数

1. 组件装载阶段发送异步请求
   在componentDidMount里发送请求，在componentWillUnMount里取消该请求
2. props或state里的某个值变化时，发送异步请求
   在componentDidUpdate里发送请求，在componentWillUnmount里取消该请求
3. props变化时，计算某个值，本组件渲染时需要用到这个值
   在render里计算该值，添加memorization help提高性能，避免重复渲染
4. props变化时更新state
   在getDerivedStateFromProps里计算新的state

参考文档

React官网文档