剛開始接觸React Native開發(fā)的程序猿可能會拿著網(wǎng)上的例子和文檔一頭霧水，畢竟不是像C語言有個main、Android有個OnCreate，iOS有個ViewDidLoad那樣，加上JavaScript語法的隨意性，讓很多人無從下手，本文主要介紹React Native組件的結(jié)構(gòu)和生命周期，幫助讀者理解一個React Native組件如何進行展示，如何進行開發(fā)。
1.組件的構(gòu)成
在React Native項目中，所有展示的界面，都可以看做是一個組件（Component）只是功能和邏輯上的復雜程度不同。每一個是許許多多小的組件拼成的，每個小的組件也有自己對應的邏輯，不過他們都遵循同樣的代碼結(jié)構(gòu)，由以下幾個部分組成
第一是包和其他組件引用部分，如下圖：
新版本的React Native已經(jīng)變成了如下形式：
此部分首先會利用Node.js的require機制引入react-native這個包，接著會在var { } = React;的代碼結(jié)構(gòu)中引用來自React Native官方的組件（其中AppRegistry和StyleSheet比較重要）、API以及第三方或開發(fā)者項目中構(gòu)建的組件，形式為該組件或API的React類名，當然，由于React Native利用了Node.js實現(xiàn)，還可以使用require引入其他可用的Node.js包，如：jssha（一個js哈希算法包），以供后面的代碼進行使用。
第二部分是組件類的聲明，如圖：
新版形式：
此部分用于構(gòu)造組件的狀態(tài)和具體的展示結(jié)構(gòu)，利用React.createClass（）來實例化一個React Native組件對象，其中會包含組件的幾個重要的生命周期（下文會講到），其中render屬性對應的函數(shù)會返回一段JSX來表示該組件的結(jié)構(gòu)和布局。該部分是一個組件必不可少的地方，沒有這些內(nèi)容，就無法構(gòu)成一個組件。
第三部分是該組件的樣式聲明，如圖：
新版形式：
該部分使用StyleSheet.create來實例化樣式對象，其中的內(nèi)容為JSON形式的React Native樣式，該樣式來源于CSS3，并將其字段規(guī)范為標準的首字母小寫駝峰式命名，這些聲明的樣式可供開發(fā)者在構(gòu)建組件的展示時（JSX代碼中）進行使用（直接寫入JSX也可，但影響可讀性）。
2.生命周期
一個React Native組件的生命周期分為實例化、存在期和銷毀期，其中最常用的為實例化期，該時期即組件的構(gòu)建、展示時期，需要開發(fā)者根據(jù)幾個函數(shù)的調(diào)用過程，控制好組件的展示和邏輯的處理。
（1）實例化期分為5個階段，每個階段以一個函數(shù)來進行控制，具體如下：
getDefaultProps：顧名思義，這里會初始化一些默認的屬性，通常會將固定的內(nèi)容放在這個過程中進行初始化和賦值，一個控件可以利用this.props獲取在這里初始化它的屬性，由于組件初始化后，再次使用該組件不會調(diào)用getDefaultProps函數(shù)，所以組件自己不可以自己修改props（即：props可認為是只讀的），只可由其他組件調(diào)用它時在外部修改。
getInitialState：這里是對控件的一些狀態(tài)進行初始化，由于該函數(shù)不同于getDefaultProps，在以后的過程中，會再次調(diào)用，所以可以將控制控件的狀態(tài)的一些變量放在這里初始化，如控件上顯示的文字，可以通過this.state來獲取值，通過this.setState來修改state值，修改方式如下：
[javascript] view plain copy
function() {
this.setState({
showText: 'Hello'
});
}
值得注意的是，一旦調(diào)用了this.setState方法，控件必將調(diào)用render方法，對控件進行再次的渲染，不過，如果React框架會自動根據(jù)DOM的狀態(tài)來判斷是否需要真正的渲染。
componentWillMount：可以通過字面意思看出，這個方法被調(diào)用時期是組件將要被加載在視圖上之前，功能比較少，即：render一個組件前最后一次修改state的機會。
render：上面已經(jīng)說過render是一個組件必須有的方法，形式為一個函數(shù)，并返回JSX或其他組件來構(gòu)成DOM，和Android的XML布局、WPF的XAML布局類似，只能返回一個頂級元素，即：
同時，在render函數(shù)中，只可通過this.state和this.props來訪問在之前函數(shù)中初始化的數(shù)據(jù)值。
componentDidMount：即調(diào)用了render方法后，組件加載成功并被成功渲染出來以后所執(zhí)行的hook函數(shù)，一般會將網(wǎng)絡(luò)請求等加載數(shù)據(jù)的操作，放在這個函數(shù)里進行，來保證不會出現(xiàn)UI上的錯誤，如圖所示，_fetchData利用了fetch API來異步請求Web API來加載商品數(shù)據(jù)：
（2）存在期主要是用來處理與用戶的交互，如：點擊事件，都比較簡單，也不是很常用，具體有以下幾個過程：
componentWillReceiveProps：指父元素對組件的props或state進行了修改
shouldComponentUpdate：一般用于優(yōu)化，可以返回false或true來控制是否進行渲染
componentWillUpdate：組件刷新前調(diào)用，類似componentWillMount
componentDidUpdate：更新后的hook
（3）銷毀期，用于清理一些無用的內(nèi)容，如：點擊事件Listener，只有一個過程：componentWillUnmount
3.總結(jié)
總得來講，React Native組件的生命周期，經(jīng)歷了Mount->Update->Unmount這三個大的過程，即從創(chuàng)建到銷毀的過程，如果借助Android和iOS的開發(fā)思想，那么React Native組件的生命周期就更容易理解了。那么，我們構(gòu)建一個React Native控件也就能夠知道如何下手，如何控制和優(yōu)化。經(jīng)過一層一層的封裝和調(diào)用，一個完整的React Native應用也就構(gòu)建出來了。
轉(zhuǎn)載請注明出處：http://blog.csdn.net/yuanguozhengjust/article/details/50470171
