在windows上開(kāi)發(fā)react-native已經(jīng)有一些時(shí)候了。作為一個(gè)Android原生開(kāi)發(fā)者，在開(kāi)發(fā)的過(guò)程中，雖然有點(diǎn)蛋疼，但畢竟積累了一點(diǎn)點(diǎn)經(jīng)驗(yàn)，再不說(shuō)出來(lái)，我就要側(cè)漏了......
react-native開(kāi)發(fā)使用的是JS,但是并不是純正的JS,而是一種JSX語(yǔ)言，就是在JS中嵌入XML語(yǔ)言，因此，只要有一些JS的語(yǔ)法基礎(chǔ)的原生開(kāi)發(fā)者，就可以肯容易理解JSX的語(yǔ)法了，在RN中，推薦使用ES6的語(yǔ)法。
對(duì)于JS而言，一切皆對(duì)象，函數(shù)也是對(duì)象，而對(duì)象的內(nèi)部是通過(guò)key-value的形式來(lái)組成的，也可以說(shuō)是通過(guò)json格式來(lái)組成。對(duì)象內(nèi)部每一個(gè)鍵值對(duì)（key:value）稱作一個(gè)屬性（RN中最重要的屬性是state和props）。
使用react-native開(kāi)發(fā)的最大的有點(diǎn)在于開(kāi)發(fā)效率，加入APP并不復(fù)雜的話，那么完全可以使用純JS開(kāi)發(fā)，也就是Android和iOS公用一套界面和邏輯。極大的提高了開(kāi)發(fā)效率。在性能上，（Android中一般的操作）RN的表現(xiàn)比原生弱一些，但是遠(yuǎn)好于H5。所以總體來(lái)看，其實(shí)RN的未來(lái)還是可以期待的。
RN是運(yùn)行JS的，Android是運(yùn)行Java字節(jié)碼的，所以，實(shí)際上JS代碼的最終運(yùn)行是通過(guò)一層封裝，把JS的代碼映射成原生代碼，而界面上的元素最終使用的也是原生的組件，而不是自己渲染（所以在性能上，RN比H5要好很多）。
在Android中，主要交互容器是activity或Fragment,而在RN中，界面的交互容器是Component：組件。我覺(jué)得Component和原生的Fragment其實(shí)很像，都存在于activity中，都受制于activity的生命周期，都可卸載和裝載。
由上圖可知，大致分三個(gè)過(guò)程：初始化，運(yùn)行中，卸載。
在這里，已經(jīng)有前輩寫(xiě)出了比較詳細(xì)的博文了，有興趣請(qǐng)前往React Native 中組件的生命周期。
這兩個(gè)屬性之所以重要，是因?yàn)閟tat和界面的刷新有關(guān)，prop則和組件的封裝有關(guān)。
state初始化在構(gòu)造函數(shù)中，通過(guò)setState來(lái)修改里面具體的值。具體如下：
而修改state內(nèi)容則是這樣：
當(dāng)state中的內(nèi)容被修改后，當(dāng)前組件就會(huì)按照生命周期來(lái)刷新頁(yè)面，這樣，所有和界面刷新的任務(wù)就全部交到state這一個(gè)屬性手里了。這是一個(gè)很不錯(cuò)的設(shè)計(jì)。
而prop這個(gè)屬性，則是用于封裝組件的時(shí)候?qū)ν獗┞督M件的可輸入屬性。即就像這樣：
就這樣，封裝組件中的所有你想暴露給別人輸入的屬性都可以定義在prop之中。
在原生開(kāi)發(fā)中，界面的跳轉(zhuǎn)主要依賴Intent作為橋梁，而在RN中，則全部依靠Navigator這個(gè)組件來(lái)實(shí)現(xiàn)頁(yè)面之間的跳轉(zhuǎn)邏輯。
Navigator這個(gè)導(dǎo)航器是全局的，整個(gè)APP中只有一個(gè)，會(huì)根據(jù)界面的跳轉(zhuǎn)傳遞到每個(gè)Component內(nèi)部的prop中。Navgator會(huì)維護(hù)一個(gè)棧，這一點(diǎn)和原生的Activity的任務(wù)棧極其相似，可以對(duì)照理解。
< Component navigator = {navigator} route = {route} {...route.passProps} />{...route.passProps}保證passProps里每個(gè)key都會(huì)被視作prop的一個(gè)屬性，具體如下：
跳轉(zhuǎn)到SecondPageComponent界面
navigator.push({ name: 'SecondPageComponent', component: SecondPageComponent, passProps: { //注意passProps和之前定義的保持一致 msg:'ladingwu is handsome' }});而在SecondPageComponent界面界面中，這樣來(lái)取數(shù)據(jù)：
export default class SecondPageComponent extends React.Component { componentDidMount() { //這里獲取傳遞過(guò)來(lái)的參數(shù) var message=this.prop.msg; }}怎么樣，簡(jiǎn)單極了吧。當(dāng)然，在原生開(kāi)發(fā)中，還有startActivityForResylt()這個(gè)方法可以再?gòu)牡诙€(gè)界面返回時(shí)獲取數(shù)據(jù)，那么在RN中是否能做到呢？也很簡(jiǎn)單，依然是通過(guò)傳遞參數(shù)，只不過(guò)這個(gè)時(shí)候的參數(shù)，應(yīng)該是一個(gè)回調(diào)函數(shù)（js中，函數(shù)也可以當(dāng)作參數(shù)，一切皆對(duì)象）
跳轉(zhuǎn)到SecondPageComponent界面
navigator.push({ name: 'SecondPageComponent', component: SecondPageComponent, passProps: { //注意passProps和之前定義的保持一致 getMsg:(msg)=>{console.log(msg)} }});而在SecondPageComponent界面界面中返回?cái)?shù)據(jù)：
export default class SecondPageComponent extends React.Component { componentDidMount() { //這里獲取傳遞過(guò)來(lái)的參數(shù) this.prop.getMsg('ladingwu is still handsome'); }}不要太簡(jiǎn)單哦。。。。
當(dāng)然，RN還有很多可以說(shuō)的，比如動(dòng)畫(huà)（性能有點(diǎn)感人），網(wǎng)絡(luò)請(qǐng)求，數(shù)據(jù)存儲(chǔ)等等，就不一一舉例說(shuō)明了。
說(shuō)一點(diǎn)感想，使用RN開(kāi)發(fā)這段時(shí)間，感覺(jué)這玩兒確實(shí)可以提高工作效率，畢竟Android和iOS使用一套界面，而且很多功能在RN上都有完備的實(shí)現(xiàn)，基本上，只要APP的業(yè)務(wù)邏輯不復(fù)雜，或者并不涉及到很多硬件操作或?qū)π阅芤蠛芨叩脑?，使用純RN開(kāi)發(fā)是完全可以的。假如H5是未來(lái)的話，那么在未來(lái)來(lái)臨之前，RN才是更好的選擇，當(dāng)然，RN并不能完全取代原生開(kāi)發(fā)，因?yàn)樗皇窃谠虷5之間找平衡的產(chǎn)物，它當(dāng)然好，但也不是最優(yōu)解。
你是不是該學(xué)？
應(yīng)該，即使只是沖著JS也要去學(xué)一把，如今，JS不僅霸占了web端，還入侵了移動(dòng)端和后臺(tái)開(kāi)發(fā)，我就問(wèn)你怕不怕？
最后推薦幾個(gè)學(xué)習(xí)RN必備網(wǎng)站：
聯(lián)系客服
