生命週期，貫穿整個開發過程非常重要。

搭建開發環境

生命週期

react-native 是一種狀態機的模式，和安卓一樣也是存在生命週期的。
先上張經典圖片

如圖，可以把元件生命週期大致分為三個階段：

這裡 我們和android的生命週期做一下對比。

第一階段：是元件第一次繪製階段，如圖中的上面虛線框內，在這裡完成了元件的載入和初始化；（onCreate onStart onResume）
第二階段：是元件在執行和互動階段，如圖中左下角虛線框，這個階段元件可以處理使用者互動，或者接收事件更新介面(onRestart )；
第三階段：是元件解除安裝消亡的階段，如圖中右下角的虛線框中，這裡做一些元件的清理工作。(onPause onStop onDestory)

前期為了方便理解，可以這麼按照android的狀態來理解react-native的狀態過程。

在rn中頁面的重新整理是通過 props(屬性) state（狀態）來重新整理頁面的。貫穿整個生命週期。

生命週期回撥函式

下面來詳細介紹生命週期中的各回調函式。

getDefaultProps

在元件建立之前，會先呼叫 getDefaultProps()，這是全域性呼叫一次，嚴格地來說，這不是元件的生命週期的一部分。在元件被建立並載入候，首先呼叫 getInitialState()，來初始化元件的狀態。

componentWillMount

這個函式呼叫時機是在元件建立，並初始化了狀態之後，在第一次繪製 render() 之前。可以在這裡做一些業務初始化操作，也可以設定元件狀態。這個函式在整個生命週期中只被呼叫一次。

componentDidMount

在元件第一次繪製之後，會呼叫 componentDidMount()，通知元件已經載入完成。
這個函式呼叫的時候，其虛擬 DOM 已經構建完成，你可以在這個函式開始獲取其中的元素或者子元件了。需要注意的是，RN 框架是先呼叫子元件的 componentDidMount()，然後呼叫父元件的函式。從這個函式開始，就可以和 JS 其他框架互動了，例如設定計時 setTimeout 或者 setInterval，或者發起網路請求。這個函式也是隻被呼叫一次。這個函式之後，就進入了穩定執行狀態，等待事件觸發。

componentWillReceiveProps

如果元件收到新的屬性（props），就會呼叫 componentWillReceiveProps()
輸入引數 nextProps 是即將被設定的屬性，舊的屬性還是可以通過 this.props 來獲取。在這個回撥函式裡面，你可以根據屬性的變化，通過呼叫 this.setState() 來更新你的元件狀態，這裡呼叫更新狀態是安全的。

shouldComponentUpdate

當元件接收到新的屬性和狀態改變的話，都會觸發呼叫 shouldComponentUpdate(…)，函式原型如下：

boolean shouldComponentUpdate(  
  object nextProps, object nextState
)

輸入引數 nextProps 和上面的 componentWillReceiveProps 函式一樣，nextState 表示元件即將更新的狀態值。這個函式的返回值決定是否需要更新元件，如果 true 表示需要更新，繼續走後面的更新流程。否者，則不更新，直接進入等待狀態。

預設情況下，這個函式永遠返回 true 用來保證資料變化的時候 UI 能夠同步更新。在大型專案中，你可以自己過載這個函式，通過檢查變化前後屬性和狀態，來決定 UI 是否需要更新，能有效提高應用效能。

componentWillUpdate

如果元件狀態或者屬性改變，並且上面的 shouldComponentUpdate(…) 返回為 true，就會開始準更新元件，並呼叫 componentWillUpdate()，其函式原型如下：

void componentWillUpdate(  
  object nextProps, object nextState
)

輸入引數與 shouldComponentUpdate 一樣，在這個回撥中，可以做一些在更新介面之前要做的事情。需要特別注意的是，在這個函式裡面，你就不能使用 this.setState 來修改狀態。這個函式呼叫之後，就會把 nextProps 和 nextState 分別設定到 this.props 和 this.state 中。緊接著這個函式，就會呼叫 render() 來更新介面了。

componentDidUpdate

呼叫了 render() 更新完成介面之後，會呼叫 componentDidUpdate() 來得到通知，其函式原型如下：

void componentDidUpdate(  
  object prevProps, object prevState
)

因為到這裡已經完成了屬性和狀態的更新了，此函式的輸入引數變成了 prevProps 和 prevState。

componentWillUnmount

當元件要被從介面上移除的時候，就會呼叫 componentWillUnmount()，其函式原型如下：

void componentWillUnmount()
在這個函式中，可以做一些元件相關的清理工作，例如取消計時器、網路請求等。

就像android中生命週期的一樣，我們要熟悉各個生命週期的狀態，方便頁面的初始化以及回收狀態，才能更好佈置頁面。

React-native的渲染過程

react 的生命週期函式已經有了一部分的瞭解，下面來說一下j渲染android應用的，android的準備過程，以及一個頁面的構建過程。

簡單說就是Native初始化 -> 載入JS，JS端註冊元件 ->移動 端上呼叫JS端run方法，傳入入口元件名稱 -> JS端啟動渲染流程。

第一次渲染

getDefaultProps
元件型別首次例項化時初始化預設props屬性，多例項共享

getInitialState
例項化時初始化預設state屬性

componentWillMount
在渲染之前觸發一次

render
渲染函式，返回DOM結構（可以理解為返回新的頁面佈局，顯示樣式）

componentDidMount
在渲染之後觸發一次

重新渲染（props變更或者setState改變state時）

componentWillReceiveProps
元件接收到新的props時呼叫，並將其作為引數nextProps使用，可在此更改元件state

shouldComponentUpdate
判斷是否需要更新元件（在首次渲染期間或者呼叫了forceUpdate方法後，該方法不會>被呼叫）

componentWillUpdate
更新渲染前呼叫

render
渲染函式，返回DOM結構

componentDidUpdate
更新渲染後呼叫

銷燬

componentWillUnmount
元件移除之前呼叫

看到這裡我們在重新，好好看一看這張結構圖一定可以有更深刻的認識。

生命週期部分，基本說完了。