React Native組件的生命周期
可以說整個React Native應用是由各種類型的組件構成。而每個組件都有其各自的生命周期。組件由初生到消亡，React Native框架通過不同的生命周期方法，為我們提供了方便切入組件生命周期的鉤子，讓我們可以在正確的時間點做正確的事情。
當應用啟動，React Native框架在內存中維護著一個虛擬DOM樹。所謂組件的生命周期即由組件初始化并掛載到虛擬DOM為起始，到組件由虛擬DOM卸載為終結，組件的不同狀態。生命周期方法則是組件在虛擬DOM樹不同狀態的描述。
理解組件的生命周期方法是理解組件生命周期的關鍵，現在就讓我們來詳細探究組件的生命周期方法。
生命周期方法
組件的生命周期方法對應著組件的不同生命階段，通常我們分為三個階段：組件初始化及掛載階段、組件運行期階段及組件卸載階段。
- 初始化及掛載階段
一、這是組件類的構造函數，通常在此初始化state數據模型。
constructor(props) {
super(props);
this.state = {
//key : value
};
}
二、表示組件將要加載到虛擬DOM，在render方法之前執行，整個生命周期只執行一次。
componentWillMount() {
}
三、表示組件已經加載到虛擬DOM，在render方法之后執行，整個生命周期只執行一次。通常在該方法中完成異步網絡請求或者集成其他JavaScript庫。
componentDidMount() {
}
- 運行期階段
一、在組件接收到其父組件傳遞的props的時候執行,參數為父組件傳遞的props。在組件的整個生命周期可以多次執行。通常在此方法接收新的props值，重新設置state。
componentWillReceiveProps(nextProps) {
this.setState({
//key : value
});
}
二、在componentWillReceiveProps(nextProps)執行之后立刻執行；或者在state更改之后立刻執行。該方法包含兩個參數，分別是props和state。該方法在組件的整個生命周期可以多次執行。如果該方法返回false，則componentWillUpdate(nextProps, nextState)及其之后執行的方法都不會執行，組件則不會進行重新渲染。
shouldComponentUpdate(nextProps, nextState) {
return true;
}
二、在shouldComponentUpdate(nextProps, nextState)函數執行完畢之后立刻調用，該方法包含兩個參數，分別是props和state。render()函數執行之前調用。該方法在組件的整個生命周期可以多次執行。
componentWillUpdate(nextProps, nextState) {
}
三、在render()方法執行之后立刻調用。該方法包含兩個參數，分別是props和state。該方法在組件的整個生命周期可以多次執行。
componentDidUpdate(preProps, preState) {
}
四、render方法用于渲染組件。在初始化階段和運行期階段都會執行。
render() {
return(
<View/>
);
}
- 卸載階段
一、在組件由虛擬DOM卸載的時候調用。
componentWillUnmount() {
}
生命周期方法的執行流
下面我們通過實例來演示上述生命周期方法在整個React Native應用具體的執行流程，讓大家對React Native應用數據流動以及組件的渲染過程有更加清晰的認識。
初始化組件
現在我們來初始化一個名為itemView的組件，觀察哪些生命周期方法會在組件初始化的時候執行以及它們的執行順序。
上圖點擊創建View的button，會初始化一個View組件在屏幕上，然后切換到控制臺可以看到組件在初始化的時候方法的執行順序。
如圖，可以看到在初始化itemView的時候，依次調用constructor、componentWillMount、render和componentDidMount，而其他方法則不會調用。
卸載組件
現在我們刪除剛才創建的itemView，觀察哪些方法會執行。
如圖，可以看到只有componentWillUnmount方法會執行。通常在該方法清理定時器或者監聽。
更改state
我們在itemView內部設置一個定時器，過5秒自動更改state的item屬性的值為'reRender'，觀察哪些方法執行。
this.timer = setTimeout(() => {
this.setState({
item:'reRender'
});
}, 5000);
如圖，shouldComponentUpdate、componentWillUpdate、render和componentDidUpdate執行。并且itemView的propsr仍然是初始化時候的值create，而state則改變為reRender。
傳遞props
最后，我們由父組件向itemView傳遞props，值為reset。
如圖，可以看到當父組件向子組件傳遞props的時候，componentWillReceiveProps會被調用，并且輸出傳遞的props的值。
以上就是組件的生命周期方法在不同的情況下的執行流程。上面的情況已經基本包括React Native應用組件活動的全部狀態。
生命周期方法的完整流程圖
下圖是組件的生命周期方法完整的流程，通過這張圖以及上面的解釋，我們可以對生命周期方法有一個完整的認識。
理解組件的生命周期不僅能夠幫助我們更好的運用組件構建應用，更是優化React Native應用組件渲染性能的關鍵，希望通過本文拋磚引玉，希望大家能夠對組件的生命周期有更深入的理解。
