React Native組件的結構和生命週期

React Native組件的結構和生命週期

1、組件的結構

一、導入引用

能夠理解爲C++編程中的頭文件。

導入引用包括導入react native定義的組件、API，以及自定義的組件。

1.1 導入組件

 

1.2 導入API

 

1.3 導入自定義組件

 

二、組件的聲明

組件的生命分爲組件的定義和樣式。組件的定義有各類組件的組成結構、方法的定義。

2.1 組件的定義

 

2.2 組件樣式

組件樣式的定義能夠直接在組件的定義中的style中定義。可是對於樣式複雜的組件須要組件樣式。

 

三、組件的註冊或導出

3.1 註冊

AppRegistry是JS運行全部React Native應用的入口。應用的根組件應當經過AppRegistry.registerComponent方法註冊本身，而後原生系統才能夠加載應用的代碼包而且在啓動完成以後經過調用AppRegistry.runApplication來真正運行應用。

 

3.2 導出

導出是用module.exports語句聲明組件，讓組件能夠被其餘組件引用。能夠理解爲JAVA中變量的聲明，聲明時並不分配內存空間。

 

2、組件的生命週期

一個React Native組件從它被React Native框架加載，到最終被React Native框架卸載，會經歷一個完整的生命週期。

2.1 getInitialState

其函數原型爲：

object getInitialState()

這個函數將在React Native組件被家在前調用一次。它的返回值會成爲this.state的初始值。

2.2 getDefaultProps

其函數原型爲：

object getDefaultProps()

這個函數在組件被建立時調用一次。它的返回值會成爲this.props的初始值。在這以後，若是父組件指定了組件的props中的某些值，這些值將會與this.props的初始值合併，若是有相同的鍵，父組件指定的鍵將覆蓋初始值的鍵。

getDefaultProps()返回的任何複雜對象都將會在組件的各個實例間共享，而不是每一個實例擁有一個拷貝。

2.3 componentWillMount

其函數原型爲：

componentWillMount()

在React Native組件的生命週期中，這個函數只會被執行一次。它在初始渲染（render函數被React Native框架調用執行）前被執行，當它執行以後，render函數會立刻被React Native框架調用執行。若是在這個函數裏調用setState函數改變了某些狀態機變量的值，React Native框架不會執行渲染操做，而是等待這個函數執行完成後再執行初始渲染。

React Native組件的子組件也有componentWillMount函數，而且會在父組件的componentWillMount函數以後被調用。

這個函數無參數而且不須要任何返回值。

若是開發者須要從本地存儲中讀取數據用於顯示，那麼在這個函數裏進行讀取是一個很好的時機。

2.4 componentDidMount

其函數原型爲：

componentDidMount()

在React Native組件的生命週期中，這個函數只會被執行一次。它在初始渲染執行完成後會立刻被調用。在React Native組件生命週期的這個時間點以後，開發者能夠經過子組件的引用來訪問、操做任何子組件。React Native組件的子組件也有componentDidMount函數，而且會在父組件的componentDidMount函數以前被調用。

這個函數無參數而且不須要任何返回值。

若是React Native應用須要在程序啓動顯示初始界面後從網絡側獲取數據，那麼把從網絡側獲取數據的代碼放在這個函數裏是一個不錯的選擇。

2.5 componentWillReceiveProps

其函數原型爲：

componentWillReceiveProps(object nextProps)

React Native組件的初始渲染執行完成後，當React Native組件接收到新的props時，這個函數將被調用。這個函數接收一個object參數，object裏的是新的props。

若是新的props會倒置界面從新渲染，這個函數將在渲染前被執行。在這個函數中，老的props能夠經過this.props訪問，新的props在傳入的object中。若是在這個函數中經過調用this.setState函數改變某些狀態機變量的值，React Native框架不會執行對這些狀態機變量改變的渲染，而是等componentWillReceiveProps函數執行完成後一塊兒渲染。

2.6 shouldComponentUpdate

其函數原型爲：

boolean  shouldComponentUpdate(object nextProps, object nextState)

React Native組件的初始渲染執行完成後，當React Native組件接收到新的props或者state時，這個函數將被調用。這個函數接收兩個object參數，其中第一個是新的props，第二個是新的state。這個函數須要返回一個布爾值，告訴React Native框架針對此次改變，React Native是否須要從新渲染本組件。若是次函數返回false，React Native將不會從新渲染本組件，相應的本組件的componentWillUpdate和componentDidUpdate函數也不會被調用。

React Native組件默認的shouldComponentUpdate函數老是返回true值。若是開發者聽從了「視狀態機變量爲‘不可變的常量’」這個開發規則，那麼開發者能夠提供本身的shouldComponentUpdate，在函數中比較新老版本的state和props，判斷是否須要進行從新渲染。

經過這個函數來阻止無必要的從新渲染，是提升React Native應用程序性能的一大技巧。

2.7 componentWillUpdate

其函數原型爲：

componentWillUpdate(object nextProps, object nextState)

React Native組件的初始渲染執行完成後，React Native框架在從新渲染React Native組件前會調用這個函數。開發者能夠在這個函數中爲即將發生的從新渲染作一些準備工做，但開發者不能在這個函數中經過this.setState再次改變狀態機變量的值。若是須要改變，則在componentWillReceiveProps函數中進行改變。

2.8 componentDidUpdate

其函數原型爲：

componentDidUpdate(object preProps, object preState)

eact Native組件的初始渲染執行完成後，React Native框架在從新渲染React Native組件後會調用這個函數。傳入的兩個參數是渲染前的props和state。

2.9 componentWillUnmount

其函數原型爲：

componentWillUnmount()

在React Native組件被卸載前，這個函數將被執行。這個函數沒有參數。

若是React Native組件申請了某些資源或者訂閱了某些消息，那麼須要在這個函數中釋放資源，取消訂閱。