前言

在面試的時候被偶爾問到了react-native 的生命周期的問題，以前確實研究過這個過程，但是時間久了給忘了，一時語噎竟然一個完整的函數名字沒說出來，當時恨不得拿出我的電腦看一下這個過程，然后根據自己的思路娓娓道來，可惜還是記不起來了，正好成這個機會總結一下，下方這張圖已經完美詮釋了

react-native生命周期

如上我們可以將組件的生命周期分為以下三個階段：

• 第一階段：是組件初始化階段，如圖中運行中之前階段，在這里完成了組件的加載和初始化；
• 第二階段：是組件在運行和交互階段，如圖中左半部分，這個階段組件可以處理用戶交互，或者接收事件更新界面；
• 第三階段：是組件卸載的階段，如圖中右半部分，這里做一些組件的清理工作

這里需要強調和解釋以下幾點：

• 第一階段
  constructor 相當于構造函數，全局只調用一次，我們可以進行一些初始化階段，可以設置一些需要動態(tài)改變的值，如

constructor(props) {
      super(props);
          //設置一些初始值
      this.state = {
      };
}

這里super(props)是必須調用的. 這個跟舊RN版本是有區(qū)別的，我們不再用關注getDefaultProps getInitialState 這些過時的方法。

• 第二階段

componentWillReceiveProps(nextProps)

我發(fā)現有很多人在問，這個方法為什么不調用，我們可以看一段這個方法的解釋：

componentWillReceiveProps() is invoked before a mounted component receives new props. If you need to update the state in response to prop changes (for example, to reset it), you may compare this.props and nextProps and perform state transitions using this.setState() in this method.

只有當組件接收到新的屬性值的時候才能觸發(fā)這個方法。

其次當我們設置了this.setState()設置了某些屬性值的變化，調用順序是

• shouldComponentUpdate

• componentWillUpdate

• render

• componentDidUpdate
  如果你認為我只是只是介紹簡單的方法調用邏輯，你可能就錯了，我想說的是我們可以性能優(yōu)化的地方在componentWillUpdate,系統(tǒng)給我們一次攔擊組件UI 刷新的機會，我們可以做一些判斷，如果更新同屬性值，我們可以阻止UI的刷新，直接在這個函數中false.

• 第三階段
  這個階段是組件卸載的階段，我們通常做的是清理timer 或者listener。

以上就是react native 生命周期，大家可以試驗一下這個過程來加深這個過程。

我給大家準備了一個demo,可以下載下來驗證:
https://github.com/markdashi/ReactNativeLife.git

希望看到這篇文章的伙伴，不要盜取本人繪制的流程圖，如需要轉載最好注明出處，謝謝！