React生命周期详解（图）

深藏阁楼爱情的钟 2021-09-30 07:58 392阅读 0赞

## React16.3版本以前的生命周期 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjc1NTY3Nw_size_16_color_FFFFFF_t_70]

## React16.3版本以后的生命周期 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjc1NTY3Nw_size_16_color_FFFFFF_t_70 1]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjc1NTY3Nw_size_16_color_FFFFFF_t_70 2]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjc1NTY3Nw_size_16_color_FFFFFF_t_70 3]

### 注意： ###

*  componentWillMount()、componentWillReceiveProps()、componentWillUpdate()在React16.3新版本中都被移除；
 *  在React16.3新版本的生命周期函数中，getSnapshotBeforeUpdate()生命周期函数必须要有返回值，且必须和componentDidUpdate()写在一起
 *  getDerivedStateFromProps
    
    1.  通过参数可以获取新的属性和状态
    2.  该函数是静态的
    3.  该函数的返回值会覆盖掉组件状态
    4.  该函数几乎是没有什么用
 *  getSnapshotBeforeUpdate

1.  真实的DOM构建完成，但还未实际渲染到页面中。
2.  在该函数中，通常用于实现一些附加的dom操作
3.  该函数的返回值，会作为componentDidUpdate的第三个参数

### 详解 ###

# 生命周期 #

生命周期：组件从诞生到销毁会经历一系列的过程，该过程就叫做生命周期。React在组件的生命周期中提供了一系列的钩子函数（类似于事件），可以让开发者在函数中注入代码，这些代码会在适当的时候运行。

**生命周期仅存在于类组件中，函数组件每次调用都是重新运行函数，旧的组件即刻被销毁**

## 旧版生命周期 ##

React < 16.0.0

1.  constructor
    
    1.  同一个组件对象只会创建一次
    2.  不能在第一次挂载到页面之前，调用setState，为了避免问题，构造函数中严禁使用setState
2.  componentWillMount
    
    1.  正常情况下，和构造函数一样，它只会运行一次
    2.  可以使用setState，但是为了避免bug，不允许使用，因为在某些特殊情况下，该函数可能被调用多次
3.  **render**
    
    1.  返回一个虚拟DOM，会被挂载到虚拟DOM树中，最终渲染到页面的真实DOM中
    2.  render可能不只运行一次，只要需要重新渲染，就会重新运行
    3.  严禁使用setState，因为可能会导致无限递归渲染
4.  **componentDidMount**
    
    1.  只会执行一次
    2.  可以使用setState
    3.  通常情况下，会将网络请求、启动计时器等一开始需要的操作，书写到该函数中
5.  组件进入活跃状态
6.  componentWillReceiveProps
    
    1.  即将接收新的属性值
    2.  参数为新的属性对象
    3.  该函数可能会导致一些bug，所以不推荐使用
7.  **shouldComponentUpdate**
    
    1.  指示React是否要重新渲染该组件，通过返回true和false来指定
    2.  默认情况下，会直接返回true
8.  componentWillUpdate
    
    1.  组件即将被重新渲染
9.  componentDidUpdate
    
    1.  往往在该函数中使用dom操作，改变元素
10. **componentWillUnmount**
    
    1.  通常在该函数中销毁一些组件依赖的资源，比如计时器

## 新版生命周期 ##

React >= 16.0.0

React官方认为，某个数据的来源必须是单一的

1.  getDerivedStateFromProps
    
    1.  通过参数可以获取新的属性和状态
    2.  该函数是静态的
    3.  该函数的返回值会覆盖掉组件状态
    4.  该函数几乎是没有什么用
2.  getSnapshotBeforeUpdate
    
    1.  真实的DOM构建完成，但还未实际渲染到页面中。
    2.  在该函数中，通常用于实现一些附加的dom操作
    3.  该函数的返回值，会作为componentDidUpdate的第三个参数

### React官方为什么要改它的生命周期 ###

React16.3之前，用户在使用React的时候有一种反模式，组件的props和state同时控制数据（实现原理是在componentWillReceiveProps里监听props的变化，props是变化时使用this.setSate同步props和state的数据），数据来源不再单一。\*\*React官方认为，某个数据的来源必须是单一的，否则很容易出现Bug。\*\*且componentWillReceiveProps生命周期里用户可以操作this，所以在React16.3之后官方移除了componentWillReceiveProps，使用静态属性getDerivedStateFromProps（该属性几乎没什么用）来替代。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjc1NTY3Nw_size_16_color_FFFFFF_t_70]: /images/20210812/8c5a644c51eb4abe854bf38be6793e12.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjc1NTY3Nw_size_16_color_FFFFFF_t_70 1]: /images/20210812/01459930f32d46d3a33fb63a12b8d8be.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjc1NTY3Nw_size_16_color_FFFFFF_t_70 2]: /images/20210812/681f939fe2854f708959ad8ae4cac758.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjc1NTY3Nw_size_16_color_FFFFFF_t_70 3]: /images/20210812/efc2b9ad54174fae8f7a5a29e686722a.png