剛開始接觸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應用也就構建出來了。
轉載請註明出處：http://blog.csdn.net/yuanguozhengjust/article/details/50470171