1.前言

1、生命周期总共分为三部分：实例化-存在期-销毁时

2、整个生命周期中，不管props或state发生变化，其DOM都会发生重渲染；

3、每个组件都是一个状态机，有自己的生命周期；

4、相同的组件引用，生命周期一般不会出现互相影响的情况；

2.第一部分：实例化

初始化props；初始化state；虚拟DOM储存在内存；第一次DOM挂载成功；

（以下方法是依次调用的）

1、getDefaultProps：获取默认props传值

对于每个组件实例来讲，这个方法只会调用一次，该组件类的所有后续应用，getDefaultPops 将不会再被调用，其返回的对象可以用于设置默认的 props 值，而 props 值为只读，不可进行setProps设定。

2、getInitialState：初始化状态参数state

对于组件的每个实例来说，这个方法的调用有且只有一次，用来初始化每个实例的 state，在这个方法里，可以访问组件的 props。每一个React组件都有自己的 state，其与 props 的区别在于 state只存在组件的内部，props 在所有实例中共享，值得一说的是：组件内部的state是允许通过 this.setSate() 进行修改的，每次修改每次重新渲染。

3、componentWillMount：首次渲染前

该方法在首次渲染之前调用，也是在 render 方法调用之前修改 state 的最后一次机会。

4、render：创建虚拟DOM

该方法会创建一个虚拟DOM，用来表示组件的输出。对于一个组件来讲，render方法是唯一一个必需的方法。render方法返回的结果并不是真正的DOM元素，而是一个虚拟的表现，类似于一个DOM tree的结构的对象。

补充：

1. this.props 和 this.state 在这可直接访问，但是不可以set；

2.return的内容包括：null；false；有根的HTML元素；React组件；

3.不能修改DOM的输出；

5、componentDidMount：首次渲染后

该方法被调用时，已经渲染出真实的 DOM，可以再该方法中通过 this.getDOMNode() 访问到真实的 DOM。

补充：

1.由于组件并不是真实的 DOM 节点，而是存在于内存之中的一种数据结构，叫做虚拟 DOM （virtual DOM）。只有当它插入文档以后，才会变成真实的 DOM 。

2.获取真实DOM节点，我们可以使用 ref 属性，需要注意的是，由于 this.refs.[refName] 属性获取的是真实 DOM ，所以必须等到虚拟 DOM 插入文档以后，才能使用这个属性，否则会报错。
var One= React.createClass({
    render: function(){
        this.getDOMNode();  //render调用时，只会常见xuniDOM，组件未挂载，这里将报错
        return <canvas ref='mainCanvas'>
    },
    componentDidMount: function(){
        var canvas = this.refs.mainCanvas.getDOMNode();  //挂载成功，可以访问到 Canvas 节点
    }
})

3.第二部分：存在期(更新)

（应用状态state变化，以下方法是依次调用的）

1、componentWillReceiveProps：更新 state来触发 render重新渲染

组件的 props 属性可以通过父组件来更改，这时，componentWillReceiveProps 将来被调用。可以在这个方法里更新 state,以触发 render 方法重新渲染组件。

2、shouldComponentUpdate：应不应该去重新渲染

如果你确定组件的 props 或者 state 的改变不需要重新渲染，可以通过在这个方法里通过返回 false 来阻止组件的重新渲染，返回 `false 则不会执行 render 以及后面的 componentWillUpdate，componentDidUpdate 方法。该方法是非必须的，并且大多数情况下没有在开发中使用。

3、componentWillUpdate：重新渲染前

这个方法和 componentWillMount 类似，在组件接收到了新的 props 或者 state 即将进行重新渲染前，componentWillUpdate() 会被调用，注意不要在此方面里再去更新 props 或者 state。

4、componentDidUpdate：重新渲染后

这个方法和 componentDidMount 类似，在组件重新被渲染之后，componentDidUpdate() 会被调用。可以在这里访问并修改 DOM。

4.第三部分：销毁时

（再次装载组件时，以下方法会被依次调用，详情请看第一部分：实例化）

1、componentWillUnmount：组件从 DOM 中移除之前立刻被调用