ReactNative – 組件的生命週期

ReactNative – 組件的生命週期

如同Android的Activity一樣，React中的組件也有自己的生命週期。首先看下面這張圖：

* 上面第一個虛線框內是React組件被繪製的階段，組件被加載和初始化
* 左下角的虛線框內是組件的交互狀態，在這裏處理交互動作，更新UI
* 右下角是組件被銷燬前的階段，主要有一些清理的工作

下面依次講下每個方法都是何時被調用的

• object getDefaultProps()
  在組件類創建的時候調用一次，然後返回值被緩存下來。全局調用一次，所有實例共享。

• object getInitialState()
  在組件掛載之前調用一次。返回值將會作爲 this.state 的初始值。

• componentWillMount ()
  在初始化渲染執行之前立刻調用

• ReactComponent render()
  這個方法是必須的，對視圖進行渲染，你也可以返回 null 或者 false 來表明不需要渲染任何東西

• componentDidMount()
  在初始化渲染執行之後立刻調用一次

• componentWillReceiveProps(object nextProps)
  在組件接收到新的 props 的時候調用，也就是父組件修改子組件的屬性時觸發。在初始化渲染的時候，該方法不會調用。可以用於更新 state 來響應某個 prop 的改變。

• boolean shouldComponentUpdate(object nextProps, object nextState)
  在接收到新的 props 或者 state，將要渲染之前調用,如果確定新的 props 和 state 不會導致組件更新，則此處應該 返回 false。返回true將進行渲染。

• componentWillUpdate(object nextProps, object nextState)
  在接收到新的 props 或者 state 並且shouldComponentUpdate返回true時調用

• componentDidUpdate(object prevProps, object prevState)
  在組件的更新已經同步到 DOM 中之後立刻被調用

• componentWillUnmount()
  在組件從 DOM 中移除的時候立刻被調用。在該方法中執行任何必要的清理，比如無效的定時器，或者清除在 componentDidMount 中創建的 DOM 元素。