React Component Lifecycle

componentWillMount里允许我们初始化前最后一次对state进行修改，而不会触发重新渲染。

如果在componentDidMount中setState，结果就会是这样的。

也许会有人会问了：在这个方法中

componentDidMount: function () {
    this.setState({init: true});
    console.log("A componentDidMount");
}

先调用了setState，为啥不是先打印 ‘A render：true’后打印‘A componentDidMount’呢？

setState并不是一个同步的方法，可以理解为异步。

这里容易犯的错误就是，setState完后，马上就获取state的值做处理，结果获取的还是老的state。

如果想setState后获取到更新的值，可以放在回调里

componentDidMount渲染完成后执行一次，一般我们会在这里异步获取数据，重新渲染页面。例如

官方文档上也说的很清楚，建议我们在componentDidMount中添加ajax，因为这是DOM已经完成了初始化的渲染，在componentWillMount中获取也可以，例如上面的例子，换在componentWillMount中获取数据，完全OK的。但是不建议大家这么干，第一个是官方不推荐，另一个因为DOM还没有渲染，这个时候的一些DOM操作就会出错！

看个父子组件的执行过程，加深对初始化渲染过程的理解。

var Child = React.createClass({
    componentWillMount: function () {
        console.log("Child componentWillMount");
    },
    componentDidMount: function () {
        console.log("Child componentDidMount");
    },
    render: function () {
        console.log("Child render");
        return null;
    }
});

var Parent = React.createClass({
    componentWillMount: function () {
        console.log("Parent componentWillMount");
    },
    componentDidMount: function () {
        console.log("Parent componentDidMount");
    },
    render: function () {
        console.log("Parent render");
        return ;
    }
});
React.render(, document.getElementById("example"));

#控制台打印
Parent componentWillMount
Parent render
Child componentWillMount
Child render
Child componentDidMount
Parent componentDidMount

更新方法只会在组件初始化渲染完成后且触发了重新渲染的条件才会执行。更新方法同挂载方法分处组件生命周期的不同的阶段。例如一个婴儿在出生前和出生后，这是两个不同的阶段。

组件接收到新的props时会调用，一般在组件嵌套中比较常见，单一组件state变化是不会执行这个函数的。例如

因为对组件来说，他的props是不可变的。在看另外一个例子：

var Child = React.createClass({
    componentWillReceiveProps: function (nextProps) {
        console.log("Child componentWillReceiveProps");
    },
    render: function () {
        return 
{this.props.name}
;
    }
});

var Parent = React.createClass({
    getInitialState: function () {
        return {name: "xxx"};
    },
    componentDidMount: function () {
        this.setState({name: "zzz"});
    },
    render: function () {
        return ;
    }
});
React.render(, document.getElementById("example"));

#控制台打印
Child componentWillReceiveProps

尽管没有传递属性，但是方法依旧会执行，只不过nextProps是个空对象而已。有人会问了，在Child组件当中，初始化渲染的时候name值为‘xxx’,第二次更新的时候name值为‘zzz’，为什么会说组件的props是不变的呢？这里不是发生变化了么？

按照我的个人理解，组件props不变指的是在它的生命周期的阶段中，保持不变。例如初始化渲染的过程中，如果在componentWillMount方法中，手动修改props，控制台就会提示如下警告。组件更新方法主要是相应state的变化，此处更不应该去修改props。

Warning: Don"t set .props.name of the React component . 
Instead, specify the correct value when initially         
creating the element. The element was created by Parent.

componentWillReceiveProps主要是在更新前，最后一次修改state，而不会触发重新渲染。有点类似componentWillMount，但是执行的时间不一样，例如

var Child = React.createClass({
    getInitialState: function () {
        return {show: false};
    },
    componentWillReceiveProps: function (nextProps) {
        if (this.props.name !== nextProps.name) {
            this.setState({show: true});
        }
    },
    render: function () {
        return this.state.show ? 
{this.props.name}
 : null;
    }
});

var Parent = React.createClass({
    getInitialState: function () {
        return {name: "xxx"};
    },
    componentDidMount: function () {
        this.setState({name: "xxx"});
    },
    render: function () {
        return ;
    }
});
React.render(, document.getElementById("example"));

我们要尽量避免父子组件当中都有state，这样组件的复用性就会降低，一般来说保持最外层的容器组件同服务器、用户交互，改变state，而子组件只负责通过props接收数据，然后渲染页面。这也是官方推荐的做法。

更新前调用，返回值决定了组件是否更新。例如

第一个render是初始化。组件会将render方法的返回值同已有的DOM结构比较，只更新有变动的的部分，这个过程是需要花费时间的，在这个方法中我可以决定是否需要更新组件，从而减少性能的损耗。

this.forceUpdate()不会执行shouldComponentUpdate方法，因为是强制更新，不会因为shouldComponentUpdate的返回值决定是否更新，所以跳过该方法。另外还需要注意的是，this.forceUpdate()调用会导致该组件的shouldComponentUpdate不执行，对子组件的shouldComponentUpdate方法没有影响。

组件更新前后执行，没办法决定组件是否更新，只能进行些非状态的操作，个人感觉用途不太明显。

组件更新的整个过程

var Child = React.createClass({
    componentWillReceiveProps: function () {
       console.log("Child componentWillReceiveProps");
    },
    shouldComponentUpdate: function (nextProps, nextState) {
        console.log("Child shouldComponentUpdate");
        return true;
    },
    componentWillUpdate: function () {
        console.log("Child componentWillUpdate");
    },
    componentDidUpdate: function () {
        console.log("Child componentDidUpdate");
    },
    render: function () {
        console.log("Child render");
        return null ;
    }
});

var Parent = React.createClass({
    componentDidMount: function () {
        this.setState({});
    },
    render: function () {
        return ;
    }
});

React.render(, document.getElementById("example"));

#控制台打印
Child render
Child componentWillReceiveProps
Child shouldComponentUpdate
Child componentWillUpdate
Child render
Child componentDidUpdate

第一个render是初始化调用的，不是更新的过程。

组件被移除前调用，这里可以做一些清除工作，例如清除内存，解除事件的监听等等。