在元件的整個生命週期中，隨著該元件的props或者state發生改變，它的DOM表現也將有相應的改變，一個元件就是一個狀態機，對於特定的輸入，它總會返回一致的輸出。

React為每個元件提供了生命週期鉤子函式去響應不同的時刻——建立時、存在期及銷燬時。

生命週期方法

React的元件擁有簡潔的生命週期API，它僅僅提供你所需要的方法，而不會去最求全面。

例項化：

一個例項出吃被穿件時所呼叫的生命週期方法與其他哥哥後續例項被建立所呼叫的方法略有不同。當你首次使用一個組建類時，會看到下面這些方法依次被呼叫：

getDefaultProps

getInitialState

componentWillMount

render

ComponentDidMOunt

對於該元件類所有後續應用，你將會看到下面的方法依次被呼叫。注意：gerDefaultProps方法不在列表中。

getInitialState

componentWillMount

render

componentDidMount

存在期：

隨著應用狀態的改變，以及元件逐漸受到影響，你將會看到下面的方法一次被呼叫：

componentwillReceiveProps

shouldComponentUpdate

componentWillUpdate

render

componentDidUpdate

銷燬

&清理期：

最後，當該元件被使用完成後，componentWillUnmount方法會被呼叫，目的是給這個例項提供清理自身的機會。

以下是詳細說明：

例項化：

當每個新的元件被建立首次渲染時，有一系列的方法可以用來為其做準備工作，這些方法中的每一個鬥毆明確的職責，如下所示：

getDefaultProps

對於元件來說，這個方法只會呼叫一次，對於那些沒有父輩元件指定的props屬性的新建例項來說，這個方法返回的物件可用與為例項設定預設的props值。

getInitalState：

對於元件的每個例項來說，這個方法呼叫次數有且僅有一次，這裡你將有機會初始化每個例項的state,與getDefaultProps方法不同的是，每次例項建立時該方法都會被呼叫一次，這個方法中，可以訪問到this.props.

componentWillMount:

該方法在完成首次渲染之前被呼叫，這也是在render方法呼叫前可以修改元件state的最後一次機會。

render:

在這裡你建立一個虛擬DOM，用來表示元件的輸出，對於一個元件來說，render是唯一一個必需的方法，並且有特定的規則。render方法選要滿足下面幾點：

只能通過this.props和this.state訪問資料。

可以返回null，false或者任何React元件。

只能出現一個頂級元件（不能返回一組元素）、

必須純淨，有位置不能改變元件狀態或者修改DOM輸出。

componentDidMount:

在render方法成功呼叫並且真實的DOM已經被渲染之後，可以在componentDidMount內部通過this.getDOMNode(方法訪問到它。

這就是你可以訪問原始DOM的生命週期的鉤子函式，當你需要測量DOM元素的高度或者使用計時器操作它或者執行jQuery外掛時，可以將這些操作掛載到這個方法上：

舉例來說，假設需要在一個通過React渲染出的表單元素上使用jQueryUI的Autocomplete外掛，則可以這樣使用它：

//需要自動補全的字串列表

var datasource =[...];

var MyComponent=React.crateClass({

render:function(){

rerurn <input .../>

},

componentDidMount:function(){

$(this.gerDOMNode()).autocomplete({

source:datasource

});

}

});

ps：當React執行在伺服器端時候，componentdidmount方法不會被呼叫。

存在期：

此時元件已經渲染好並且使用者可以與它進行互動，通常一次滑鼠點選、手指點按或者鍵盤事件觸發一個時間處理器，隨著使用者改變了元件或則和整個應用的state，便會有新的state流入元件樹，並且我們將會獲得操控它的機會。

componentWillReceiveProps:

任何時刻元件的props都可以通過父輩元件來更改，出現這種情況時，componentWillReceiveProps方法會被呼叫，你將獲得更改props方法及跟他關心state的機會。例如：

componentWillReceiveProps:function(nextProps){

if(nextProps.checked ！==undefined）{

this.setState({

checked:nextProps.checked

});

}

}

shouleComponentUpdate:

呼叫shoulecomponentUpadte方法在元件渲染時進行精確優化。如果某個元件或者它的任何子元件不需要渲染成新的props或則和state，則該方法返回false，返回false則是說明React要跳到render方法，一屆位於render前後的鉤子函式：componentWillUpadate和componentDidUpdate。

該方法非必需的，並且大部分情況沒有必要使用它。

componentWillUpdate:

和componentwillMount:方法類似，組建會在收到新的props或者state進行渲染之前呼叫該方法。

注意：你不可以在該方法中更新huo或者props。而應該藉助componentWillreceiveProps方法在執行時更新state。

componentDidUpdate：

和componentDidMount方法類似，該方法給我們更新已經渲染好的DOM機會。

銷燬&清理期

當React使用完一個元件，這個元件必須從DOM中解除安裝隨後被銷燬。此時僅有的一個狗子函式會做出響應，完成所有的清理和銷燬工作。

componentWillUnmount：

最後，隨著元件從他的層級結構中移除，這個元件的生命也就走id熬了盡頭，該方法會在元件被移除之前呼叫，讓你有機會做一些清理工作。在componentDidMount方法中新增的所有任務都需要在該方法中撤銷，比如穿件的定時器或者新增的事件監聽器。

反模式：把計算後的值賦值給state：

getInitalState方法中，嘗試通過this.props來建立state的做法是一種反模式。React專注於維護資料的單一來源。它的設計使得傳遞資料的來源更加顯而易見，這激素和iReact的一個優勢。

比如在元件中吧日期轉化成字串形式，或者渲染之前字串轉換為大寫。這些都不是state，只能夠在渲染時進行計算。

當元件的state值和它基於的prop不同步，因而無法瞭解到render函式內部結構時，可以認定為一種反模式。

//反模式:經過計算後值不應該賦給state

getDefaultProps:function(){

return{

date:newDate()

};

},

getInitalState:function(){

return{

day:this.props.date.getDay()

}

},

render:function(){

return <div>Day:{this.state.day}</day>

}

正確的模式應該是渲染時計算這些值，保證了計算後的值永遠不會派生出它的props值不同步。

//渲染時計算值是正確的

gerDefaultProps：function（）{

return{

date：new Date()

}；

}

render：function（）{

var day = this.props.date.getDay();

return <div>Day:{day}</div>;

}

然而，如果你的目的並不是同步，而只是簡單的初始化state，那麼在getInitialState方法中使用props是沒問題的，只是一定要明確你的意圖，比如prop新增initial字首。

getDefaultProps：function(){

return{

initialValue:'some-dafault-value'

}；

},

getInitialState:function(){

return{

value:this.props.initialValue

};

},

render:function(){

return <div>{this.props.value}</div>

}

總結：

react生命週期提供了進行設計的鉤子函式，會伴隨著元件整個生命週期。和狀態機類似，每個元件都被設計成了能夠在整個生命週期中輸出穩定、語義化的標籤。

元件不會獨立存，隨著父元件將props推送給他們的子元件，以及那些子元件渲染它們自身的子元件你必須謹慎的考慮資料是如何流經整個應用的。每一個子元件真正需要掌握多少資料，哪個元件來控制應用的狀態？這些涉及資料流了。