P19:React高级-生命周期讲解（二）

╰半橙微兮° 2023-10-06 20:48 23阅读 0赞

#### React16 基础 ####

*  阐述
 *  shouldComponentUpdate 函数
 *  componentWillUpdate 函数
 *  componentDidUpdate
 *  componentWillReceiveProps 函数

## 阐述 ##

这节继续学习React生命周期中的 `Updation` 阶段，也就是组件发生改变的更新阶段，这是React生命周期中比较复杂的一部分，它有两个基本部分组成，一个是 `props` 属性改变，一个是 `state` 状态改变（这个在生命周期的图片中可以清楚的看到）。

## shouldComponentUpdate 函数 ##

`shouldComponentUpdate`函数会在组件更新之前，自动被执行。  
比如写入下面的代码:

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

它要求返回一个布尔类型的结果，必须有返回值，这里就直接返回一个 `true` 了（真实开发中，这个是有大作用的）。

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

现在就可以在控制台 `console` 里看到结果了，并且结果是每次文本框发生改变时都会随着改变。如果你返回了 `false`，这组件就不会进行更新了。

简单点说，就是返回 `true`，就同意组件更新;返回`false`,就反对组件更新。

## componentWillUpdate 函数 ##

`componentWillUpdate` 在组件更新之前，但 `shouldComponenUpdate` 之后被执行。  
但是如果 `shouldComponentUpdate` 返回 `false`，这个函数就不会被执行了。

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

## componentDidUpdate ##

`componentDidUpdate` 在组件更新之后执行，它是组件更新的最后一个环节。

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

为了方便我们看出结果，可以在每个函数前加上序号。  
最后我们可以看到控制台输出的结果如下：

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

结果和我们写的顺序也是相对的，讲到这里，你一定对React的生命周期函数有了比较直观的了解了。

## componentWillReceiveProps 函数 ##

我们可以先在 `Beauty.js` 组件里写下这个函数，例如下面的代码。

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

这时候会发现函数什么时候都不会被执行，因为 `Beauty.js` 算是一个顶层组件，它并没接收任何的 `props`。可以把这个函数移动到 `BeautyItem.js`组件中。

凡是组件都有生命周期函数，所以子组件也是有的，并且子组件接收了 `props`，这时候函数就可以被执行了。

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

这个时候再预览，就会看到 `componentWillReceiveProps` 执行了。  
那现在可以总结一下它的执行时间了。

> 子组件接收到父组件传递过来的参数，父组件 `render` 函数重新被执行，这个生命周期就会被执行。

也就是说这个组件第一次存在于Dom中，函数是不会被执行的;

如果已经存在于Dom中，函数才会被执行。

这个生命周期算是比较复杂的一个生命周期，需要我们花点时间去消化。