React高级-如何理解React的生命周期

短命女 2022-12-13 04:13 120阅读 0赞

#### 1.React生命周期图 ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgyNjM0OQ_size_16_color_FFFFFF_t_70_pic_center]  
通过这张图可以看到React声明周期的四大阶段：

> 1.  `Initialization`:初始化阶段。
> 2.  `Mounting`: 挂在阶段。
> 3.  `Updation`: 更新阶段。
> 4.  `Unmounting`: 销毁阶段

#### 2.什么是生命周期函数 ####

> 生命周期函数指在某一个时刻组件会自动调用执行的函数

*  `constructor`不算生命周期函数。

`constructor`叫构造函数，它是ES6的基本语法。虽然它和生命周期函数的性质一样，但不能认为是生命周期函数。

但是你要心里把它当成一个生命周期函数，我个人把它看成React的`Initialization`阶段，定义属性（props）和状态(state)。

#### 3.Mounting阶段 ####

Mounting阶段叫挂载阶段，伴随着整个虚拟DOM的生成，它里边有三个小的生命周期函数，分别是：

1.  `componentWillMount` : 在组件即将被挂载到页面的时刻执行。
2.  `render` : 页面state或props发生变化时执行。
3.  `componentDidMount` : 组件挂载完成时被执行。

**componentWillMount**代码

componentWillMount(){ 
        console.log('componentWillMount----组件将要挂载到页面的时刻')
    }

**componentDidMount**代码

componentDidMount(){ 
        console.log('componentDidMount----组件挂载完成的时刻执行')
    }

**render**代码

render(){ 
        console.log('render---组件挂载中.......')
    }

这时候我们查看一下控制台，会为我们打出如下提示：

componentWillMount----组件将要挂载到页面的时刻执行
    render----开始挂载渲染
    componentDidMount----组件挂载完成的时刻执行

这也是生命周期的顺序。有小伙伴会问我，这个函数书写有顺序吗?哪个在前？哪个在后？其实是没有顺序的，你可以随便改动他们的顺序。

**注意的问题**

`componentWillMount`和`componentDidMount`这两个生命周期函数，只在页面刷新时执行一次，而`render`函数是只要有state和props变化就会执行。

#### 4.Updation阶段 ####

`Updation`阶段，就是组件发生改变的更新阶段，它有两个基本部分组成，一个是`props`属性改变，一个是`state`状态改变。它里边有四个小的生命周期函数，分别是：

1.  `shouldComponentUpdate` : 函数会在组件更新之前，自动被执行。
2.  `componentWillUpdate` : `componentWillUpdate`在组件更新之前，但`shouldComponenUpdate`之后被执行。
3.  `componentDidUpdate` : 在组件更新之后执行，它是组件更新的最后一个环节。
4.  `componentWillReceiveProps`：子组件接收到父组件传递过来的参数，父组件render函数重新被执行后执行。

1.`shouldComponentUpdate`函数会在组件发生变化之前执行。

shouldComponentUpdate(){ 
        console.log('1-shouldComponentUpdate---组件发生改变前执行')
      	return true
    }

它要求返回一个布尔类型的结果，必须有返回值。

如果返回是false，该组件就不会进行更新。true反之。

2.`componentWillUpdate`函数会在组件发生变化之前执行，但在shouldComponentUpdate之后被执行，如果shouldComponentUpdate返回的是false，该函数就不会被执行。

//shouldComponentUpdate返回true才会被执行。
    componentWillUpdate(){ 
        console.log('2-componentWillUpdate---组件更新前，shouldComponentUpdate函数之后执行')
    }

3.`componentDidUpdate`在组件发生变化之后执行，它是组件更新的最后一个环节。

componentDidUpdate(){ 
        console.log('3-componentDidUpdate----组件更新之后执行')
    }

最后我们可以看到控制台输出的结果如下：

1-shouldComponentUpdate---组件发生改变前执行
    2-componentWillUpdate---组件更新前，shouldComponentUpdate函数之后执行
    3-render----开始挂载渲染
    4-componentDidUpdate----组件更新之后执行

4.`componentWillReceiveProps`函数式在子组件接收到父组件传递过来的参数，父组件render函数重新被执行，才会被执行。

*  也就是说这个组件第一次存在于Dom中，函数是不会被执行的;
 *  如果已经存在于Dom中，函数才会被执行。

componentWillReceiveProps(){ 
            console.log('child - componentWillReceiveProps')
    }

#### 5.Unmounting阶段 ####

Unmounting阶段就是在销毁阶段执行的生命周期函数。

1.shouldComponentUpdate函数：是在组件从页面删除的时候被执行。

//当组件从页面中删除的时候执行
    componentWillUnmount(){ 
        console.log('child - componentWillUnmount')
    }

![在这里插入图片描述][20201009201924364.png_pic_center]  
个人博客：[Karma’s Blog][Karma_s Blog]  
源码地址：[传送门][Link 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDgyNjM0OQ_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/b58ecce8c9264b12a74cb470b1f632db.png
[20201009201924364.png_pic_center]: /images/20221123/f679cb5ea4954c268f166021dd2c6b08.png
[Karma_s Blog]: http://karma520.com/2020/10/09/31%20React%E9%AB%98%E7%BA%A7-%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F/
[Link 1]: https://github.com/kay-520/React_study