详述React生命周期函数

悠悠 2022-05-25 03:29 234阅读 0赞

React严格定义了组件的生命周期，分为如下三个过程：

**装载过程（Mounting）：**也就是组件第一次在DOM树中渲染的过程；

**更新过程（Updating）：**当组件重新渲染的过程；

**卸载过程（Unmounting）：**组件从DOM中删除的过程。

# 一、装载过程： #

我们先来看装载过程，当组件第一次被渲染的时候，依次调用的函数是如下这些：

*  **constructor**
 *  **getInitialState**
 *  **getDefaultProps**
 *  **componentWillMount**
 *  **render**
 *  **componentDidMount**

## 1、constructor ##

构造函数，并不是每个组件都需要定义自己的构造函数，无状态的React组件往往就不需要定义构造函数，

执行时间：组件被加载前最先调用，并且只调用一次。

作用：

*  继承父组件的Props

super(props)

*  初始化state，因为组建生命周期中任何函数都可能要访问state，那么整个生命周期中第一个被调用的构造函数自然是初始化state最理想的地方；

this.state=\{变量名:值\}

*  绑定成员函数的this环境

this.函数名称 = this.函数名称.bind(this);

这样做的目的在于，在render中调用时，可直接使用this.函数名称。

## 2、getInitialState和getDefaultProps ##

getInitialState这个函数的返回值会用来初始化组件的this.state，getDefaultProps函数的返回值可以作为props的初始值，和getInitialState一样，这两个函数只在React.createClass方法创造的组件类才会用到。总之，实际上getInitialState和getDefaultProps两个方法在ES6的方法定义的React组件中根本不会用到。

假如我们用React.createClass方法定义一个组件Sample，设定内部状态foo的初始值为字符串bar，同时设定一个叫sampleProp的prop初始值为数字值0，代码如下：

const Sample = React.createClass({
            getInitialState: function() {
                return {foo: 'bar'};
            },
            getDefaultProps: function() {
                return { sampleProp: 0 }
            }
        });

用ES6的话，在构造函数中通过给this.state赋值完成状态的初始化，通过给类属性defaultProps赋值指定props初始值，达到的效果是完全一样的，代码如下：

class Sample extends React.Component {
            constructor(props) {
               super(props);
                this.state = { foo: 'bar' };
              }
         };
        Sample.defaultProps = {
            return { sampleProp: 0 }
        };

## 3、componentWillMount ##

组件将要挂载，在render之前执行，但仅执行一次，即使多次重复渲染该组件，或者改变了组件的state。

## 4、render ##

React组件必不可少的核心组件，不能在该函数中修改状态机state。

*  执行时间：componentWillMount之后，componentDidMount之前，
 *  作用：渲染挂载组件
 *  触发条件：（1）初始化加载页面（2）状态机改变setState ( 3 ) 接收到新的props（父组件更新）
 *  注意：render函数并不做实际的渲染动作，组件在render中生成虚拟的DOM节点,即JSX,最后由React生成真实的DOM节点。

## 5、componentDidMount ##

组件已经挂载，在render之后执行，只执行一次。

# 二、更新过程（Updating） #

当组件被装载到DOM树上之后，用户在网页上可以看到组件的第一印象，但是要提供更好的交互体验，就要让该组件可以随着用户操作改变展现的内容，当props或者state被修改的时候，就会引发组件的更新过程。

更新过程依次会调用以下函数，其中render函数和装载过程一样，没有差别。

*  **componentWillReceiveProps**
 *  **shouldComponentUpdate**
 *  **componentWillUpdate**
 *  **render**
 *  **componentDidUpdate**

注意：并不是所有的更新过程都会执行所有的函数。

## 1、componentWillReceiveProps(nextProps) ##

只要是父组件的render函数被调用，在render函数里面被渲染的子组件就会经历更新过程，不管父组件传给子组件的props有没有改变，都会触发子组件的componentWillReceiveProps函数。注意：在互联网上有些教材声称这个函数只有当组件的props发生改变的时候才会被调用，其实是不正确的。

## 2、shouldComponentUpdate（nextProps，nextState） ##

除了render函数，shouldComponentUpdate可能是React组件生命周期中最重要的一个函数了。

说render函数重要，是因为render函数决定了该渲染什么，而说shouldComponentUpdate函数重要，是因为它决定了一个组件什么时候不需要渲染。

render和shouldComponentUpdate函数，也是React生命周期函数中唯二两个要求有返回结果的函数。render函数的返回结果将用于构造DOM对象，而shouldComponentUpdate函数返回一个布尔值，告诉React库这个组件在这次更新过程中是否要继续。

在更新过程中，React库首先调用shouldComponentUpdate函数，如果这个函数返回true，那就会继续更新过程，接下来调用render函数；反之，如果得到一个false，那就立刻停止更新过程，也就不会引发后续的渲染了。如果使用得当，就能够大大提高React组件的性能，虽然React的渲染性能已经很不错了，但是，不管渲染有多快，如果发现没必要重新渲染，那就干脆不用渲染就好了，速度会更快。

## 3、componentWillUpdate和componentDidUpdate ##

如果组件的shouldComponentUpdate函数返回true，React接下来就会依次调用对应组件的componentWillUpdate、render和componentDidUpdate函数。

componentWillMount和componentDidMount，componentWillUpdate和componentDidUpdate，这两对函数一前一后地把render函数夹在中间。

和装载过程不同的是，当在服务器端使用React渲染时，这一对函数中的Did函数，也就是componentDidUpdate函数，并不是只在浏览器端才执行的，无论更新过程发生在服务器端还是浏览器端，该函数都会被调用。

# 三、卸载过程（Unmounting） #

React组件的卸载过程只涉及一个函数componentWillUnmount，当React组件要从DOM树上删除掉之前，对应的componentWillUnmount函数会被调用，所以这个函数适合做一些清理性的工作。