在windows上開發(fā)react-native已經(jīng)有一些時(shí)候了,。作為一個(gè)Android原生開發(fā)者，在開發(fā)的過程中,，雖然有點(diǎn)蛋疼，但畢竟積累了一點(diǎn)點(diǎn)經(jīng)驗(yàn),，再不說出來,，我就要側(cè)漏了......

1，前言

react-native開發(fā)使用的是JS,但是并不是純正的JS,而是一種JSX語言,，就是在JS中嵌入XML語言,，因此，只要有一些JS的語法基礎(chǔ)的原生開發(fā)者,，就可以肯容易理解JSX的語法了,，在RN中，推薦使用ES6的語法,。

對于JS而言,，一切皆對象,，函數(shù)也是對象，而對象的內(nèi)部是通過key-value的形式來組成的,，也可以說是通過json格式來組成,。對象內(nèi)部每一個(gè)鍵值對（key:value）稱作一個(gè)屬性（RN中最重要的屬性是state和props）。

2,，性能

使用react-native開發(fā)的最大的有點(diǎn)在于開發(fā)效率,，加入APP并不復(fù)雜的話，那么完全可以使用純JS開發(fā),，也就是Android和iOS公用一套界面和邏輯,。極大的提高了開發(fā)效率。在性能上,，（Android中一般的操作）RN的表現(xiàn)比原生弱一些,，但是遠(yuǎn)好于H5。所以總體來看,，其實(shí)RN的未來還是可以期待的,。

3，RN運(yùn)行機(jī)制簡述

RN是運(yùn)行JS的,，Android是運(yùn)行Java字節(jié)碼的,，所以，實(shí)際上JS代碼的最終運(yùn)行是通過一層封裝,，把JS的代碼映射成原生代碼,，而界面上的元素最終使用的也是原生的組件，而不是自己渲染（所以在性能上,，RN比H5要好很多）,。

4，Component簡介

在Android中,，主要交互容器是activity或Fragment,而在RN中,，界面的交互容器是Component：組件。我覺得Component和原生的Fragment其實(shí)很像,，都存在于activity中,，都受制于activity的生命周期，都可卸載和裝載,。

4.1,，Component生命周期

由上圖可知，大致分三個(gè)過程：初始化,，運(yùn)行中,，卸載。

• 初始化階段：
  • 在新版的Component中ES6語法中,，getDefaultProps,getInitialState 是不應(yīng)該被復(fù)寫的,。RNAPI要求我們props,，state的初始化在Component的constructor函數(shù)中完成（props，state這倆大寶貝下文在做解釋）,，因此在初始化階段可以做的就是在constructor或者componentDidMount函數(shù)中完成相關(guān)初始化工作,。
  • componentDidMount函數(shù)是組件第一次繪制完成之后被調(diào)用的，整個(gè)周期只被調(diào)用一次,，在這里可以做一些網(wǎng)絡(luò)請求操作等,。
• 運(yùn)行階段：
  • 重點(diǎn)在于修改state內(nèi)容，來刷新界面
• 卸載階段
  • 在componentWillUnmount方法中做一些移除操作,，或者什么都不做,。

在這里，已經(jīng)有前輩寫出了比較詳細(xì)的博文了,，有興趣請前往React Native 中組件的生命周期,。

4.2，state和 prop

這兩個(gè)屬性之所以重要,，是因?yàn)閟tat和界面的刷新有關(guān),，prop則和組件的封裝有關(guān)。

state初始化在構(gòu)造函數(shù)中,，通過setState來修改里面具體的值,。具體如下：

而修改state內(nèi)容則是這樣：

當(dāng)state中的內(nèi)容被修改后，當(dāng)前組件就會(huì)按照生命周期來刷新頁面,，這樣,，所有和界面刷新的任務(wù)就全部交到state這一個(gè)屬性手里了。這是一個(gè)很不錯(cuò)的設(shè)計(jì),。

而prop這個(gè)屬性,，則是用于封裝組件的時(shí)候?qū)ν獗┞督M件的可輸入屬性。即就像這樣：

就這樣,，封裝組件中的所有你想暴露給別人輸入的屬性都可以定義在prop之中,。

4.3，component間的跳轉(zhuǎn)

在原生開發(fā)中,，界面的跳轉(zhuǎn)主要依賴Intent作為橋梁,，而在RN中，則全部依靠Navigator這個(gè)組件來實(shí)現(xiàn)頁面之間的跳轉(zhuǎn)邏輯,。

• initRoute這個(gè)屬性指定了初始化的頁面，在這個(gè)例子中,，進(jìn)入第一屏的頁面將是TabBarView,
• configureScene這個(gè)屬性用于指定默認(rèn)跳轉(zhuǎn)動(dòng)畫
• renderScene這個(gè)屬性傳入的是一個(gè)方法,，根據(jù)得到的不同的組件（component）來渲染不同的場景。

Navigator這個(gè)導(dǎo)航器是全局的,，整個(gè)APP中只有一個(gè),，會(huì)根據(jù)界面的跳轉(zhuǎn)傳遞到每個(gè)Component內(nèi)部的prop中,。Navgator會(huì)維護(hù)一個(gè)棧，這一點(diǎn)和原生的Activity的任務(wù)棧極其相似,，可以對照理解,。

• 數(shù)據(jù)傳遞 上面的代碼中有這樣一段：

< 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界面界面中,，這樣來取數(shù)據(jù)：

export default class SecondPageComponent extends React.Component {

    componentDidMount() {
            //這里獲取傳遞過來的參數(shù)
            var message=this.prop.msg;
        }
}

怎么樣,，簡單極了吧。當(dāng)然,，在原生開發(fā)中,，還有startActivityForResylt()這個(gè)方法可以再從第二個(gè)界面返回時(shí)獲取數(shù)據(jù)，那么在RN中是否能做到呢,？也很簡單,，依然是通過傳遞參數(shù)，只不過這個(gè)時(shí)候的參數(shù),，應(yīng)該是一個(gè)回調(diào)函數(shù)（js中,，函數(shù)也可以當(dāng)作參數(shù)，一切皆對象）

跳轉(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() {
            //這里獲取傳遞過來的參數(shù)
            this.prop.getMsg('ladingwu is still handsome');
        }
}

不要太簡單哦,。,。。,。

5,，總結(jié)

當(dāng)然，RN還有很多可以說的,，比如動(dòng)畫（性能有點(diǎn)感人）,，網(wǎng)絡(luò)請求，數(shù)據(jù)存儲(chǔ)等等,，就不一一舉例說明了,。

說一點(diǎn)感想，使用RN開發(fā)這段時(shí)間,，感覺這玩兒確實(shí)可以提高工作效率,，畢竟Android和iOS使用一套界面，而且很多功能在RN上都有完備的實(shí)現(xiàn),，基本上,，只要APP的業(yè)務(wù)邏輯不復(fù)雜，或者并不涉及到很多硬件操作或?qū)π阅芤蠛芨叩脑?，使用純RN開發(fā)是完全可以的,。假如H5是未來的話，那么在未來來臨之前,，RN才是更好的選擇,，當(dāng)然,，RN并不能完全取代原生開發(fā)，因?yàn)樗皇窃谠虷5之間找平衡的產(chǎn)物,，它當(dāng)然好,，但也不是最優(yōu)解。

你是不是該學(xué),？

應(yīng)該,，即使只是沖著JS也要去學(xué)一把，如今,，JS不僅霸占了web端,，還入侵了移動(dòng)端和后臺(tái)開發(fā)，我就問你怕不怕,？

最后推薦幾個(gè)學(xué)習(xí)RN必備網(wǎng)站：

React-Native中文站(非官方)

React-Native官方網(wǎng)站

江清清的技術(shù)專欄

google搜索引擎