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

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

也許會(huì)有人會(huì)問(wèn)了：在這個(gè)方法中

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

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

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

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

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

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

官方文檔上也說(shuō)的很清楚，建議我們?cè)赾omponentDidMount中添加ajax，因?yàn)檫@是DOM已經(jīng)完成了初始化的渲染，在componentWillMount中獲取也可以，例如上面的例子，換在componentWillMount中獲取數(shù)據(jù)，完全OK的。但是不建議大家這么干，第一個(gè)是官方不推薦，另一個(gè)因?yàn)镈OM還沒(méi)有渲染，這個(gè)時(shí)候的一些DOM操作就會(huì)出錯(cuò)！

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

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"));

#控制臺(tái)打印
Parent componentWillMount
Parent render
Child componentWillMount
Child render
Child componentDidMount
Parent componentDidMount

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

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

因?yàn)閷?duì)組件來(lái)說(shuō)，他的props是不可變的。在看另外一個(gè)例子：

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"));

#控制臺(tái)打印
Child componentWillReceiveProps

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

按照我的個(gè)人理解，組件props不變指的是在它的生命周期的階段中，保持不變。例如初始化渲染的過(guò)程中，如果在componentWillMount方法中，手動(dòng)修改props，控制臺(tái)就會(huì)提示如下警告。組件更新方法主要是相應(yīng)state的變化，此處更不應(yīng)該去修改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，而不會(huì)觸發(fā)重新渲染。有點(diǎn)類(lèi)似componentWillMount，但是執(zhí)行的時(shí)間不一樣，例如

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"));

我們要盡量避免父子組件當(dāng)中都有state，這樣組件的復(fù)用性就會(huì)降低，一般來(lái)說(shuō)保持最外層的容器組件同服務(wù)器、用戶交互，改變state，而子組件只負(fù)責(zé)通過(guò)props接收數(shù)據(jù)，然后渲染頁(yè)面。這也是官方推薦的做法。

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

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

this.forceUpdate()不會(huì)執(zhí)行shouldComponentUpdate方法，因?yàn)槭菑?qiáng)制更新，不會(huì)因?yàn)閟houldComponentUpdate的返回值決定是否更新，所以跳過(guò)該方法。另外還需要注意的是，this.forceUpdate()調(diào)用會(huì)導(dǎo)致該組件的shouldComponentUpdate不執(zhí)行，對(duì)子組件的shouldComponentUpdate方法沒(méi)有影響。

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

組件更新的整個(gè)過(guò)程

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"));

#控制臺(tái)打印
Child render
Child componentWillReceiveProps
Child shouldComponentUpdate
Child componentWillUpdate
Child render
Child componentDidUpdate

第一個(gè)render是初始化調(diào)用的，不是更新的過(guò)程。

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