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 中移除之前立刻被呼叫

2、getInitialState：初始化狀態引數state

3、componentWillMount：首次渲染前

4、render：建立虛擬DOM

5、componentDidMount：首次渲染後