React Native 組件（一）組件的生命週期

相關文章
React Native探索系列

前言

React Native有不少組件好比Image、ListView等等，想要合理的使用組件，首先要先了解組件的生命週期。

1.概述

不管你是開發Android仍是iOS，對於組件的生命週期必定不陌生，這是開發的基礎。一樣的React Native的組件也有生命週期，當應用啓動，React Native在內存中維護着一個虛擬DOM，組件的生命週期就是指組件初始化並掛載到虛擬DOM爲起始，到組件從虛擬DOM卸載爲終結。生命週期的方法就是組件在虛擬DOM中不一樣狀態的描述。

從上圖所示，組件的生命週期分爲三個階段，分別是掛載（mounting）、更新（updating）和卸載（Unmounting），其中掛載和更新階段都會調用rander方法進行繪製。下面對這三個階段分別進行講解。

2.掛載

掛載指的是組件的實例被建立並插入到DOM中，掛載會調用以下方法。

constructor

constructor是RN組件的構造方法，它在RN組件被加載前先被調用。當咱們的組件繼承自React.Component時，須要在構造方法中最早調用super(props)。若是不須要初始化state，則不須要實現構造方法。
在構造方法中初始化state，以下所示。

constructor(props) {
  super(props);
  this.state = {
    text: '構造方法'
  };
}複製代碼

componentWillMount

componentWillMount()複製代碼

componentWillMount方法在掛載前被當即調用。它在render方法前被執行，所以，在componentWillMount方法中設置state並不會致使從新被渲染。它只會被執行一次，一般狀況下，建議使用constructor方法來代替它。

rander

render()複製代碼

該方法是必須的，一旦調用，則會去檢查 this.props 和 this.state 的數據並返回一個 React 元素。render方法中不該該修改組件的props和state，由於render方法是「純潔的」，這意味着每次調用該方法時都會返回相同的結果。render方法在更新階段也會被調用，前提是shouldComponentUpdate方法返回true。

componentDidMount

componentDidMount()複製代碼

componentDidMount方法在組件被掛載後當即調用，在render方法後被執行。開發者能夠在這個方法中獲取其中的元素或者子組件，須要注意的是，子組件的componentDidMount方法會在父組件的componentDidMount方法以前調用。若是須要從網絡加載數據顯示到界面上，在這裏進行網絡請求是一個不錯的選擇。在componentDidMount方法中設置state將會被從新渲染。

3.更新

改變props或者state時能夠致使更新，當一個組件被從新渲染時，會調用以下方法。

componentWillReceiveProps

componentWillReceiveProps(nextProps)複製代碼

componentWillReceiveProps方法會在掛載的組件接收到新的props時被調用，它接收一個Object類型參數nextProps，表示新的props。一般在這個方法中接收新的props值，並根據props的變化，經過調用 this.setState() 來更新組件state，this.setState()不會觸發 render方法的調用。
在掛載的過程當中，初始的props並不會觸發調用componentWillReceiveProps方法，這個方法只會在組件中的props更新時被調用，另外，調用this.setState()也不會觸發調用componentWillReceiveProps方法。

shouldComponentUpdate

boolean shouldComponentUpdate(nextProps, nextState)複製代碼

當組件接收到新的props和state時，shouldComponentUpdate方法被調用，它接收兩個Object參數，nextProps是新的props，nextState是新的state。
shouldComponentUpdate方法默認返回true，用來保證數據變化時，組件可以從新渲染。你也能夠重載這個方法，經過檢查變化先後props和state，來決定組件是否須要從新渲染。若是返回false，則組件不會被從新渲染，也不會調用本方法後面的componentWillUpdate和componentDidUpdate方法。

componentWillUpdate

componentWillUpdate(nextProps, nextState)複製代碼

若是組件props或者state改變，而且此前的shouldComponentUpdate方法返回爲 true，則會調用該方法。componentWillUpdate方法會在組件從新渲染前被調用，所以，能夠在這個方法中爲從新渲染作一些準備工做。須要注意的是，在這個方法中，不能使用 this.setState 來更改state，若是想要根據props來更改state，須要在componentWillReceiveProps方法中去實現，而不是在這裏。

componentDidUpdate

componentDidUpdate(prevProps, prevState)複製代碼

組件從新渲染完成後會調用componentDidUpdate方法。兩個參數分別是渲染前的props和渲染前的state。這個方法也適合寫網絡請求，好比能夠將當前的props和prevProps進行對比，發生變化則請求網絡。

4.卸載

卸載就是從DOM中刪除組件，會調用以下方法。

componentWillUnmount()

componentWillUnmount()複製代碼

componentWillUnmount方法在組件卸載和銷燬以前被當即調用。能夠在這個方法中執行必要的清理工做，好比，關掉計時器、取消網絡請求、清除組件裝載中建立的DOM元素等等。

組件的生命週期就講到這裏，這個系列的後續文章會介紹React Native的經常使用組件，敬請期待。

參考資料
The Component Lifecycle
Understanding the React Component Lifecycle
React Native 中組件的生命週期
《React Native跨平臺移動應用開發》第二版

---

歡迎關注個人微信公衆號，第一時間得到博客更新提醒，以及更多成體系的Android相關原創技術乾貨。
掃一掃下方二維碼或者長按識別二維碼，便可關注。