componentWillMount里允許我們初始化前最后一次對state進行修改，而不會觸發(fā)重新渲染。

如果在componentDidMount中setState，結(jié)果就會是這樣的。

也許會有人會問了：在這個方法中

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

先調(diào)用了setState，為啥不是先打印 ‘A render：true’后打印‘A componentDidMount’呢？

setState并不是一個同步的方法，可以理解為異步。

這里容易犯的錯誤就是，setState完后，馬上就獲取state的值做處理，結(jié)果獲取的還是老的state。

如果想setState后獲取到更新的值，可以放在回調(diào)里

componentDidMount渲染完成后執(zhí)行一次，一般我們會在這里異步獲取數(shù)據(jù)，重新渲染頁面。例如

官方文檔上也說的很清楚，建議我們在componentDidMount中添加ajax，因為這是DOM已經(jīng)完成了初始化的渲染，在componentWillMount中獲取也可以，例如上面的例子，換在componentWillMount中獲取數(shù)據(jù)，完全OK的。但是不建議大家這么干，第一個是官方不推薦，另一個因為DOM還沒有渲染，這個時候的一些DOM操作就會出錯！

看個父子組件的執(zhí)行過程，加深對初始化渲染過程的理解。

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

更新方法只會在組件初始化渲染完成后且觸發(fā)了重新渲染的條件才會執(zhí)行。更新方法同掛載方法分處組件生命周期的不同的階段。例如一個嬰兒在出生前和出生后，這是兩個不同的階段。

組件接收到新的props時會調(diào)用，一般在組件嵌套中比較常見，單一組件state變化是不會執(zhí)行這個函數(shù)的。例如

因為對組件來說，他的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

盡管沒有傳遞屬性，但是方法依舊會執(zhí)行，只不過nextProps是個空對象而已。有人會問了，在Child組件當中，初始化渲染的時候name值為‘xxx’,第二次更新的時候name值為‘zzz’，為什么會說組件的props是不變的呢？這里不是發(fā)生變化了么？

按照我的個人理解，組件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，而不會觸發(fā)重新渲染。有點類似componentWillMount，但是執(zhí)行的時間不一樣，例如

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接收數(shù)據(jù)，然后渲染頁面。這也是官方推薦的做法。

更新前調(diào)用，返回值決定了組件是否更新。例如

第一個render是初始化。組件會將render方法的返回值同已有的DOM結(jié)構(gòu)比較，只更新有變動的的部分，這個過程是需要花費時間的，在這個方法中我可以決定是否需要更新組件，從而減少性能的損耗。

this.forceUpdate()不會執(zhí)行shouldComponentUpdate方法，因為是強制更新，不會因為shouldComponentUpdate的返回值決定是否更新，所以跳過該方法。另外還需要注意的是，this.forceUpdate()調(diào)用會導致該組件的shouldComponentUpdate不執(zhí)行，對子組件的shouldComponentUpdate方法沒有影響。

組件更新前后執(zhí)行，沒辦法決定組件是否更新，只能進行些非狀態(tài)的操作，個人感覺用途不太明顯。

組件更新的整個過程

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是初始化調(diào)用的，不是更新的過程。

組件被移除前調(diào)用，這里可以做一些清除工作，例如清除內(nèi)存，解除事件的監(jiān)聽等等。