摘要：組件裝載過程裝載過程依次調(diào)用的生命周期函數(shù)中每個類的構(gòu)造函數(shù)，創(chuàng)造一個組件實例，當(dāng)然會調(diào)用對應(yīng)的構(gòu)造函數(shù)。組件需要構(gòu)造函數(shù)，是為了以下目的初始化，因為生命周期中任何函數(shù)都有可能訪問，構(gòu)造函數(shù)是初始化的理想場所綁定成員函數(shù)的環(huán)境。

React系列---React（一）初識React
React系列---React（二）組件的prop和state
React系列---之React（三）組件的生命周期

React嚴(yán)格定義了組件的生命周期，共3個過程：
1) 裝載過程（Mount）：組件第一次在DOM樹中渲染的過程；
2) 更新過程（Update）：組件被重新渲染的過程；
3) 卸載過程（Unmount）：組件從DOM樹中刪除的過程。

三種不同的過程，React庫會依次調(diào)用組件的一些生命周期函數(shù)。所以，定義一個React組件，實際上就是定制這些生命周期函數(shù)。

裝載過程依次調(diào)用的生命周期函數(shù)：
constructor
getInitialState
getDefaultProps
componentWillMount
render
componentDidMount

ES6中每個類的構(gòu)造函數(shù)，創(chuàng)造一個組件實例，當(dāng)然會調(diào)用對應(yīng)的構(gòu)造函數(shù)。

并不是每個組件都需要定義構(gòu)造函數(shù)。后面會看到無狀態(tài)React組件是不需要定義構(gòu)造函數(shù)的。

React組件需要構(gòu)造函數(shù)，是為了以下目的：
1) 初始化state，因為生命周期中任何函數(shù)都有可能訪問state，構(gòu)造函數(shù)是初始化state的理想場所；
2) 綁定成員函數(shù)的this環(huán)境。

這2個函數(shù)，只有在通過React.createClass方法創(chuàng)造的組件類才會發(fā)生作用。這是過時的方法，ES6創(chuàng)造的組件中用不到。

假如用React.createClass定義組件Sample，設(shè)定內(nèi)部狀態(tài)foo初始值為bar，同時設(shè)定sampleProp的prop初始值為0，代碼如下：

const Sample = React.createClass({
    getInitialState: function(){
        return {foo: "bar"};
    },
    getDefaultProps: function() {
        return {sampleProp: 0}
    }
});

用ES6的話，在構(gòu)造函數(shù)中給this.state賦值完成狀態(tài)初始化，給類的屬性defaultProps賦值指定props初始值：

class Sample extends React.Component {
    constructor(props) {
        super(props);
        this.state = {foo: "bar"};
    }
}

Sample.defaultProps = {
    return {sampleProp: 0};
};

React組件可以忽略其他所有函數(shù)都不實現(xiàn)，但是一定要實現(xiàn)render函數(shù)，因為所有React組件的父類React.Component類對除render之外的生命周期函數(shù)都有默認(rèn)實現(xiàn)。render函數(shù)并不做實際的渲染動作，它只負(fù)責(zé)返回一個JSX描述的結(jié)構(gòu)，最終由React來操作渲染過程。

render函數(shù)應(yīng)該是一個純函數(shù)，完全根據(jù)this.state和this.props來決定返回的結(jié)果，而且不要產(chǎn)生任何副作用。在render函數(shù)中去調(diào)用this.setState是錯誤的，因為一個純函數(shù)不應(yīng)該引起狀態(tài)的變化。

裝載過程中，componentWillMount和componentDidMount分別在render之前和之后調(diào)用。

不過，通常不定義componentWillMount函數(shù)，因為顧名思義，它發(fā)生在將要裝載的時候，這個時候一切都遲了，即使再調(diào)用this.setState()修改狀態(tài)也不會引發(fā)重新繪制了。換句話說，所有可以在componentWillMount中做的事情，都可以提前到constructor中去做?？梢哉J(rèn)為這個函數(shù)存在的目的就是為了和componentDidMount對稱。

而componentDidMount作用就大了。不過要注意的是，componentDidMount被調(diào)用時，前置render函數(shù)返回的東西必定已經(jīng)完成了渲染，組件已經(jīng)被“裝載”到DOM樹上了。

還是以ControlPanel為例，在ControlPanel中有三個Counter組件，我們修改Counter代碼，讓裝載過程的所有生命周期函數(shù)都用console.log輸出函數(shù)名和caption值，比如，componentWillMount函數(shù)如下：

componentWillMount() {
    console.log("enter componentWillMount " + this.props.caption);
}

在瀏覽器的console里我們能看到：

enter constructor: First
enter componentWillMount First
enter render First
enter constructor: Second
enter compomentWillMount: Second
enter render Second
enter constructor: Third
enter componentWillMount Third
enter render Third
enter componentDidMount First
enter componentDidMount Second
enter componentDidMount Third

可以清楚的看到，由于渲染需要一定的時間，所以三個組件的componentDidMount是在最后才連在一起被調(diào)用的。

componentWillMount和componentDidMount還有一個區(qū)別，就是componentWillMount可以在服務(wù)端被調(diào)用，也可以在瀏覽器端被調(diào)用；而componentDidMount只能在瀏覽器端被調(diào)用。

componentDidMount中，可通過AJAX獲取數(shù)據(jù)來填充組件內(nèi)容。在componentDidMount被調(diào)用時，組件已經(jīng)被裝載到DOM樹了，也可以放心的讓React和其他操縱DOM的庫（如jQuery）配合工作了。

當(dāng)組件被裝載到DOM樹上之后，用戶在網(wǎng)頁上看到了第一印象，但是要提供更好的交互體驗，就要讓組件可以隨著用戶操作改變展現(xiàn)的內(nèi)容，當(dāng)props或state被修改時，就會引發(fā)組件的更新過程。

更新過程依次調(diào)用以下生命周期函數(shù)：
1) componentWillReceiveProps
2) shouldComponentUpdate
3) componentWillUpdate
4) render
5) componentDidUpdate

當(dāng)組件的props發(fā)生改變時會被調(diào)用。父組件的render被調(diào)用時，被渲染的子組件也會經(jīng)歷更新過程，不管父組件傳給子組件的props有沒有改變，都會觸發(fā)子組件的componentWillReceiveProps。

我們在Counter組件類里增加這個函數(shù)定義，并在console輸出一些文字：

componentWillReceiveProps(nextProps) {
    console.log("enter componentWillReceiveProps " + this.props.caption)
}

在ControlPanel組件的render函數(shù)中，也做如下修改：

render() {
    console.log("enter ControlPanel render");
    return (
      

        ...
         this.forceUpdate() }>
          Click me to parent!
        
      
    );
}

除了在ControlPanel的render函數(shù)入口增加console輸出，還增加了一個按鈕，當(dāng)這個按鈕被點擊時，調(diào)用this.forceUpdate()，每個React組件都可以通過forceUpdate()強(qiáng)行引發(fā)一次組件重繪。

在網(wǎng)頁上點擊父組件新增的重繪按鈕，看到瀏覽器console輸出：

enter ControlPanel render
enter componentWillReceiveProps First
enter render First
enter componentWillReceiveProps Second
enter render Second
enter componentWillReceiveProps Third
enter render Third

可以看到，父組件引發(fā)重繪后，首先是父組件ControllPanel的render被調(diào)用，隨后依次3個Counter子組件的componentWillReceiveProps和render函數(shù)被調(diào)用。

然而，父組件傳給三個子組件的props值一直沒有變化，這就驗證了componentWillReceiveProps并不只是當(dāng)props值變化時才被調(diào)用，父組件render時，子組件的componentWillReceiveProps也會被調(diào)用。

在網(wǎng)頁中，我們再嘗試點擊第一個Counter子組件的“+”按鈕，可以看到瀏覽器console輸出：

enter render First

明顯，只有第一個子組件Counter的render函數(shù)被調(diào)用，因為組件的this.setState()函數(shù)不會引發(fā)componentWillReceiveProps調(diào)用。

shouldComponentUpdate函數(shù)返回一個布爾值，告訴React庫這個組件在這次更新過程中是否要繼續(xù)。返回false會停止更新過程，就此結(jié)束，也不會引發(fā)后續(xù)的渲染了。

這個函數(shù)能夠大大提升React組件的性能，不管React的組件渲染有多快，如果發(fā)現(xiàn)沒有必要重新渲染，就干脆不要渲染。

修改Counter組件類增加shouldComponentUpdate函數(shù)的定義：

shouldComponentUpdate(nextProps, nextState) {
    return (nextProps.caption !== this.props.caption) ||
       (nextState.count !== this.state.count);
}

如果組件的shouldComponentUpdate返回true，接下來會依次調(diào)用componentWillUpdate、render和componentDidUpdate函數(shù)。

在介紹componentDidMount函數(shù)時，說到可以利用componentDidMount函數(shù)執(zhí)行其他UI代碼庫，比如jQuery代碼。那么現(xiàn)在，組件被更新時，也需要在componentDidUpdate函數(shù)再次調(diào)用jQuery代碼。

React組件的卸載過程只涉及一個函數(shù)componentWillUnmount，這個函數(shù)適合做一些清理工作。這些清理工作往往和componentDidMount有關(guān)，比如你在componentDidMount中用非React的方法創(chuàng)造了一些DOM元素，如果撒手不管會造成內(nèi)存泄漏，那就需要在componentWillUnmount中把這些DOM元素清理掉。

代碼：https://github.com/zhutx/reac...

React系列---React（一）初識React
React系列---React（二）組件的prop和state
React系列---之React（三）組件的生命周期