react 生命周期

Posted 2020-11-07 mawn

为了理解 React 的工作过程，我们就必须要了解 React 组件的生命周期，如同人有生 老病死 ， 自然界有日月更替，每个组件在网页中也会被创建、更新和删除，如同有生命 的机体一样。

React严格定义了组件的生命周期，生命周期可能会经历如下三个过程:

口装载过程( Mount)，也就是把组件第一次在 DOM 树中渲染的过程;
口 更新过程( Update)，当组件被重新渲染的过程;
口卸载过程( Unmount)，组件从 DOM 中删除的过程 。

装载过程

 

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

constructor
 getlnitialState
 getDefaultProps
 componentWillMount      render         componentDidMount

 

1. constructor

我们先来看第一个 constructor，也就是 ES6 中每个类的构造函数，要创造一个组件 类的实例，当然会调用对应的构造函数。

要注意，并不是每个组件都需要定义自己的构造函数。在后面的章节我们可以看到， 无状态的 React组件往往就不需要定义构造函数，一个 React组件需要构造函数，往往是 为了下面的目的:初始化 state，因为组件生命周期中任何函数都可能要访问 state，那么整个生命周期中第一个被调用的构造函数自然是初始化 state 最理想的地方;

绑定成员函数的 this环境。
在 ES6语法下，类的每个成员函数在执行时的 this并不是和类实例自动绑定的。 而

在构造函数中， this 就是当前组件实例，所以，为了方便将来的调用，往往在构造函数中 将这个实例的特定函数绑定 this 为 当前实例。

以 Counter组件为例，我们的构造函数有这样如下的代码:

this .onClickincrementButton = this .onClickincrementButton.bind(this);

this.onClickDecrementButton = this .onClickDecrementButton.bind(this);

这两条语句的作用，就是通过 bind 方法让当前实例中 onClicklncrementButton 和 onClickDecrementButton 函数被调用时， this 始终是指向当前组件实例 。

2. getlnitialState 和 getDefaultProps

getlnitialState这个函数的返回值会用来初始化组件的 this.state，但是，这个方法只 有用 React.createClass方法创造的组件类才会发生作用，以为我们一直使用的 ES6语法，所以这个函数根本不会产生作用。

getDefaultProps 函数的返回值可以作为 props 的初始值，和 getlnitia!State 一样，这个函数只在 React.createClass 方法创造的组件类才会用到 。 总之，实际上 getlnitialState 和 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{sampleProps：0}
 }

render

render其实是react组件中最重要的函数，但是本文不打算介绍了嘿嘿。

注意一点就可以了 render必须是一个纯函数（不要在render写this.setstate）

 

componentWillMount 和 componentDidMount

在装载过程中， componentWil!Mount 会在调用 render 函数之前被调用， component-DidMount 会在调用 render 函数之后被调用，这两个函数就像是 render 函数的前哨和后卫，一前一后，把 render 函数夹住，正好分别做 render前后必要的工作 。

componentWil!Mount一般是在初始化的时候想要确定你到底需要用什么数据来render这个页面 所以componentWil!Mount用处相对于component-DidMount来说用到的地方比较少

componentDidMount只会在render结束之后渲染一次，

render 函数本身并不往 DOM 树上渲染或者装载内 容，它只是返回一个 JSX表示的对象，然后由 React库来根据返回对象决定如何渲染。 而 React库肯定是要把所有组件返回的结果综合起来，才能知道该如何产生对应的 DOM 修改。 所以，只有 React库调用三个 Counter组件的 render函数之后，才有可能完成装 载，这时候才会依次调用各个组件的 componentDidMount 函数作为装载过程的收尾 。

就是说componentDidMount在这里完成挂载的

shouldComponentUpdate和componentWillReceiveProps这两个周期我有时间会单独整理以下的，就不在这里介绍了，不介绍不代表不重要。

componentWillUpdate 和 componentDidUpdate也是同上 ，有时间一个周期一个周期的总结。