React Native組件生命週期

標籤：.text   set   app   分析   word   view   log   網路   int   

概述

所謂生命週期，就是一個對象從開始產生到最後消亡所經曆的狀態，理解空間的生命週期，是開發中必須掌握的一個知識點。就像 Android 開發中組件 一樣，React Native的組件也有生命週期（Lifecycle）。
React Native組件的生命週期大致上可以劃分為執行個體化階段、存在階段和銷毀階段。我們只有在理解組件生命週期的基礎上，才能開發出高效能的app。
React Native中組件的生命週期大致可以用以表示：

• 第一階段：是組件第一次繪製階段，中的上面虛線框內，在這裡完成了組件的載入和初始化；
• 第二階段：是組件在運行和互動階段，中左下角虛線框，這個階段組件可以處理使用者互動，或者接收事件更新介面；
• 第三階段：是組件卸載消亡的階段，中右下角的虛線框中，這裡做一些組件的清理工作。

生命週期分析執行個體化階段分析

getDefaultProps
該函數用於初始化一些預設的屬性，通常會將固定的內容放在這個函數 中進行初始化和賦值；
在組件建立之前，會先調用 getDefaultProps()初始化一些屬性，由於組件初始化後，再次使用該組件不會調用getDefaultProps()，所以組件自己不可以自己修改props。
getInitialState
該函數是用於對組件的一些狀態進行初始化；
該函數不同於getDefaultProps，在以後的過程中，可以再次調用。
比如：

this.setState({    activePage: activePage,     currentX: contentOffSetX  });

註：一旦調用了this.setState方法，組件一定會調用render方法，對組件進行再次的渲染，不過，如果React架構會自動根據DOM的狀態來判斷是否需要真正的渲染。
componentWillMount
這個函數調用時機是在組件建立，並初始化了狀態之後，在第一次繪製 render() 之前。這個函數在整個生命週期中只被調用一次。
render是一個組件中必須有的方法，本質上是一個函數，並返回JSX或其他組件來構成DOM，和Android的XML布局類似。作用是通知系統準備載入組件。
componentDidMount
該方法是在調用了render方法後，通知群組件已經載入完成。一般會在這個函數中處理網路請求等載入資料的操作；

存在期階段分析

componentWillReceiveProps
如果組件收到新的屬性（props），就會調用 componentWillReceiveProps()對組件的props或state進行了修改。
舊的屬性還是可以通過 this.props 來擷取，通過調用 this.setState() 來更新你的組件狀態，這裡調用更新狀態是安全的，並不會觸發額外的 render() 調用。
shouldComponentUpdate
當組件接收到新的屬性和狀態改變的話，都會觸發調用 shouldComponentUpdate(…)，通過返回false或true來控制是否進行介面的渲染。如果 true 表示需要更新，繼續走後面的更新流程。否者，則不更新，直接進入等待狀態。

componentWillUpdate
如果組件狀態或者屬性改變，並且上面的 shouldComponentUpdate() 返回為 true，就會開始准更新群組件，並調用 componentWillUpdate()，組件重新整理前調用，有點類似於componentWillMount()。
componentDidUpdate
調用了 render() 更新完成介面之後，會調用 componentDidUpdate() 來得到通知，其函數原型如下：

void componentDidUpdate(    object prevProps, object prevState)

銷毀期階段分析

componentWillUnmount
當組件要被從介面上移除的時候，就會調用 componentWillUnmount()，該函數可以做一些組件相關的清理工作，例如取消計時器、網路請求等。

總結

生命週期	調用次數	能否使用 setSate()
getDefaultProps	全域調用1次	否
getInitialState	1	否
componentWillMount	1	是
render	>=1	否
componentDidMount	1	是
componentWillReceiveProps	>=0	是
shouldComponentUpdate	>=0	否
componentWillUpdate	>=0	是
componentDidUpdate	>=0	是
componentWillUnmount	1	是

補充什麼是DOM Diff演算法

Web介面由DOM樹來構成，當其中某一部分發生變化時，其實就是對應的某個DOM節點發生了變化。在React中，構建UI介面的思路是由目前狀態決定介面。前後兩個狀態就對應兩套介面，然後由React來比較兩個介面的區別，’這就需要對DOM樹進行Diff演算法分析。
即給定任意兩棵樹，找到最少的轉換步驟。但是標準的的Diff演算法複雜度需要O(n^3)，這顯然無法滿足效能要求。要達到每次介面都可以整體重新整理介面的目的，勢必需要對演算法進行最佳化。這看上去非常有難度，然而Facebook工程師卻做到了，他們結合Web介面的特點做出了兩個簡單的假設，使得Diff演算法複雜度直接降低到O(n)兩個相同組件產生類似的DOM結構，不同的組件產生不同的DOM結構；對於同一層次的一組子節點，它們可以通過唯一的id進行區分。

React Native組件生命週期