相關文章
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相關原創技術乾貨。
掃一掃下方二維碼或者長按識別二維碼，即可關注。
