剛開始接觸React Native開發的程式猿可能會拿著網上的例子和文件一頭霧水，畢竟不是像C語言有個main、Android有個OnCreate，iOS有個ViewDidLoad那樣，加上JavaScript語法的隨意性，讓很多人無從下手，本文主要介紹React Native元件的結構和生命週期，幫助讀者理解一個React Native元件如何進行展示，如何進行開發。

1.元件的構成

在React Native專案中，所有展示的介面，都可以看做是一個元件（Component）只是功能和邏輯上的複雜程度不同。每一個是許許多多小的元件拼成的，每個小的元件也有自己對應的邏輯，不過他們都遵循同樣的程式碼結構，由以下幾個部分組成

第一是包和其他元件引用部分，如下圖：

新版本的React Native已經變成了如下形式：

此部分首先會利用Node.js的require機制引入react-native這個包，接著會在var { } = React;的程式碼結構中引用來自React Native官方的元件（其中AppRegistry和StyleSheet比較重要）、API以及第三方或開發者專案中構建的元件，形式為該元件或API的React類名，當然，由於React Native利用了Node.js實現，還可以使用require引入其他可用的Node.js包，如：jssha（一個js雜湊演算法包），以供後面的程式碼進行使用。

第二部分是元件類的宣告，如圖：

新版形式：

此部分用於構造元件的狀態和具體的展示結構，利用React.createClass（）來例項化一個React Native元件物件，其中會包含元件的幾個重要的生命週期（下文會講到），其中render屬性對應的函式會返回一段JSX來表示該元件的結構和佈局。該部分是一個元件必不可少的地方，沒有這些內容，就無法構成一個元件。

第三部分是該元件的樣式宣告，如圖：

新版形式：

該部分使用StyleSheet.create來例項化樣式物件，其中的內容為JSON形式的React Native樣式，該樣式來源於CSS3，並將其欄位規範為標準的首字母小寫駝峰式命名，這些宣告的樣式可供開發者在構建元件的展示時（JSX程式碼中）進行使用（直接寫入JSX也可，但影響可讀性）。

2.生命週期

一個React Native元件的生命週期分為例項化、存在期和銷燬期，其中最常用的為例項化期，該時期即元件的構建、展示時期，需要開發者根據幾個函式的呼叫過程，控制好元件的展示和邏輯的處理。

（1）例項化期分為5個階段，每個階段以一個函式來進行控制，具體如下：

getDefaultProps：顧名思義，這裡會初始化一些預設的屬性，通常會將固定的內容放在這個過程中進行初始化和賦值，一個控制元件可以利用this.props獲取在這裡初始化它的屬性，由於元件初始化後，再次使用該元件不會呼叫getDefaultProps函式，所以元件自己不可以自己修改props（即：props可認為是隻讀的），只可由其他元件呼叫它時在外部修改。

getInitialState：這裡是對控制元件的一些狀態進行初始化，由於該函式不同於getDefaultProps，在以後的過程中，會再次呼叫，所以可以將控制控制元件的狀態的一些變數放在這裡初始化，如控制元件上顯示的文字，可以通過this.state來獲取值，通過this.setState來修改state值，修改方式如下：

function() {
    this.setState({
        showText: 'Hello'
    });
}

componentWillMount：可以通過字面意思看出，這個方法被呼叫時期是元件將要被載入在檢視上之前，功能比較少，即：render一個元件前最後一次修改state的機會。

render：上面已經說過render是一個元件必須有的方法，形式為一個函式，並返回JSX或其他元件來構成DOM，和Android的XML佈局、WPF的XAML佈局類似，只能返回一個頂級元素，即：

同時，在render函式中，只可通過this.state和this.props來訪問在之前函式中初始化的資料值。

componentDidMount：即呼叫了render方法後，元件載入成功並被成功渲染出來以後所執行的hook函式，一般會將網路請求等載入資料的操作，放在這個函式裡進行，來保證不會出現UI上的錯誤，如圖所示，_fetchData利用了fetch API來非同步請求Web API來載入商品資料：

（2）存在期主要是用來處理與使用者的互動，如：點選事件，都比較簡單，也不是很常用，具體有以下幾個過程：

componentWillReceiveProps：指父元素對元件的props或state進行了修改

shouldComponentUpdate：一般用於優化，可以返回false或true來控制是否進行渲染

componentWillUpdate：元件重新整理前呼叫，類似componentWillMount

componentDidUpdate：更新後的hook

（3）銷燬期，用於清理一些無用的內容，如：點選事件Listener，只有一個過程：componentWillUnmount

3.總結

總得來講，React Native元件的生命週期，經歷了Mount->Update->Unmount這三個大的過程，即從建立到銷燬的過程，如果藉助Android和iOS的開發思想，那麼React Native元件的生命週期就更容易理解了。那麼，我們構建一個React Native控制元件也就能夠知道如何下手，如何控制和優化。經過一層一層的封裝和呼叫，一個完整的React Native應用也就構建出來了。