Hello大家好。大家可能會想問為什么最近公眾號不更新文章了，在這里說明一下。由于小編們近期工作和業務繁忙（我就不說是什么業務了，哈哈哈哈），需要靜養，最近都沒來得及更新文章，希望大家理解見諒哈。這一期先由我來為大家奉上一篇。

上一期為大家講解了一個ListView的實戰項目，包括怎么網絡請求，怎么解析數據，怎么布局等等，如果沒看過的可以去看鏈接。當然沒看過也不影響這一期的學習。這一期主要帶大家了解RN組件的生命周期。好了，廢話不多說我們步入正題。

一.React-Native生命周期

說到生命周期，大家大概也能想到就是創建、銷毀、狀態改變。RN的組件就是一個狀態機。它接收兩個輸入參數：props和state，返回一個Virtual DOM。和Native一樣，RN也為我們提供相應的鉤子函數。RN的狀態變化取決于props和state。我們先來看一張經典圖。

這張圖涵蓋了一個組件從創建、運行到銷毀的整個過程。大家可以看到，初始化的時候會調用5個函數（按先后順序）。這5個函數在整個組件被創建到銷毀的過程中只調用一次。初始化完畢后，當組件的props或者state改變都會觸發不同的鉤子函數，繼而引發組件的重新渲染。現在我們把這過程拆開一點一點來分析。

初始化

我們先來看初始化，在初始化的過程中，會按順序調用下面5個函數。

getDefaultProps：組件實例創建前調用，多個實例間共享引用。注意：如果父組件傳遞過來的Props和你在該函數中定義的Props的key一樣，將會被覆蓋。

getInitalState:組件示例創建的時候調用的第一個函數。主要用于初始化state。注意：為了在使用中不出現空值，建議初始化state的時候盡可能給每一個可能用到的值都賦一個初始值。

componentWillMount：在render前，getInitalState之后調用。僅調用一次，可以用于改變state操作。

render：組件渲染函數，會返回一個Virtual DOM，只允許返回一個最外層容器組件。render函數盡量保持純凈，只渲染組件，不修改狀態，不執行副操作（比如計時器）。

componentDidMount:在render渲染之后，React會根據Virtual DOM來生成真實DOM，生成完畢后會調用該函數。在瀏覽器端（React），我們可以通過this.getDOMNode()來拿到相應的DOM節點。然而我們在RN中并用不到，在RN中主要在該函數中執行網絡請求，定時器開啟等相關操作

下面我們來演示getDefaultProps初始化Props以及父組件覆蓋問題（AppConnect和Provider是和redux相關的代碼，大家請跳過這一行）:

比如我們在這里定義了SimpleApp的默認Props為一個key為name,value為wsd的字典（ES6以后廢除了getDefaultProps而使用上述方式），然后我們在它的父組件App中傳入一個同樣key為name的Props，然后我們在SimpleApp中使用this.props.name把props打印出來，如下：

可以看到，原先的wsd被后面傳入的kingStart覆蓋了。

然后我們來看初始化State的演示(ES6里使用constructor)：

我們初始化一個state為key為sex，value為boy的state對象，然后我們在componentWillMount函數中改變已經初始化的sex和沒有聲明的age，最后在render中打?。?/p>

可以看到我們在render中打印出了state中兩個屬性的值。在這里我們需要注意的是，如果在componentWillMount中直接修改state的值不會引發render的再次渲染。而如果把修改state的操作放到在render執行完之后的componentDidMount中，是會引發render的再次渲染的。

運行中

初始化完成之后，組件將會進入到運行中狀態，運行中狀態我們將會遇到如下幾個函數：

componentWillReceiveProps(nextProps)：props改變（父容器來更改或是redux），將會調用該函數。新的props將會作為參數傳遞進來，老的props可以根據this.props來獲取。我們可以在該函數中對state作一些處理。注意：在該函數中更新state不會引起二次渲染。

boolean shouldComponentUpdate(object nextProps, object nextState)：該函數傳遞過來兩個參數，新的state和新的props。state和props的改變都會調到該函數。該函數主要對傳遞過來的nextProps和nextState作判斷。如果返回true則重新渲染，如果返回false則不重新渲染。在某些特定條件下，我們可以根據傳遞過來的props和state來選擇更新或者不更新，從而提高效率。

componentWillUpdate(object nextProps, object nextState)：與componentWillMount方法類似，組件上會接收到新的props或者state渲染之前，調用該方法。但是不可以在該方法中更新state和props。

render：跟初始化的時候功能一樣。

componentDidUpdate(object prevProps,object prevState):和初始化時期的componentDidMount類似，在render之后，真實DOM生成之后調用該函數。傳遞過來的是當前的props和state。在該函數中同樣可以使用this.getDOMNode()來拿到相應的DOM節點。如果你需要在運行中執行某些副操作，請在該函數中完成。

我們來演示componentWillReceiveProps的調用時機，對于頂層組件，我們添加一個文本及一個點擊事件：

按鈕點擊以后，我們將自身state的name屬性改變，并傳遞給SimpleApp（這里的AppConnect就是SimpleApp），結果如下：

我們可以看到，第一次render，打印的是defaultProps傳過來的props。當按鈕點擊，頂層組件state改變，引發頂層組件重新渲染，父組件傳遞的name發生改變，componentWillReceiveProps被調用，繼而引發二次渲染。在第二次render的時候，打印出來的就是新傳遞過來的props。

銷毀

銷毀階段只有一個函數，很簡單

componentWillUnmount：組件DOM中移除的時候調用。在這里進行一些相關的銷毀操作，比如定時器，監聽等等。

為了加深記憶，我們把初始化和運行中所有的鉤子函數寫出來，讓大家看看最終的運行結果。

我們首先初始化組件，不執行任何操作，打印結果如圖所示：

當我們點擊按鈕，改變組件的props之后，打印結果如下：

我們給自身組件添加了一個點擊事件，點擊之后改變自身的state，如下：

點擊之后，再來看調用結果：

這也印證了我們的結論

二.props和state

上面講完了生命周期，我們對props和state的不同點以及相同點作一個總結，加深大家理解。

相同點

1.不管是props還是state的改變，都會引發render的重新渲染。

2.都能由自身組件的相應初始化函數設定初始值。

不同點

1.初始值來源：state的初始值來自于自身的getInitalState（constructor）函數；props來自于父組件或者自身getDefaultProps（若key相同前者可覆蓋后者）。

2.修改方式：state只能在自身組件中setState，不能由父組件修改；props只能由父組件修改，不能在自身組件修改。

3.對子組件：props是一個父組件傳遞給子組件的數據流，這個數據流可以一直傳遞到子孫組件；state代表的是一個組件內部自身的狀態，只能在自身組件中存在。

以上總結盜用本站另一位小編的圖來解釋O(∩_∩)O~：

本章結束。打廣告打廣告了，喜歡全棧開發的猿友們，請不要忘記動手掃一掃下面的二維碼關注我們喲O(∩_∩)O~。我們會繼續不定期推出有關于全棧的相關文章，敬請期待。