react-native 開發小結（Android）

在windows上開發react-native已經有一些時候了。做爲一個Android原生開發者，在開發的過程當中，雖然有點蛋疼，但畢竟積累了一點點經驗，再不說出來，我就要側漏了......

1，前言

react-native開發使用的是JS,可是並非純正的JS,而是一種JSX語言，就是在JS中嵌入XML語言，所以，只要有一些JS的語法基礎的原生開發者，就能夠肯容易理解JSX的語法了，在RN中，推薦使用ES6的語法。

對於JS而言，一切皆對象，函數也是對象，而對象的內部是經過key-value的形式來組成的，也能夠說是經過json格式來組成。對象內部每個鍵值對（key:value）稱做一個屬性（RN中最重要的屬性是state和props）。

2，性能

使用react-native開發的最大的有點在於開發效率，加入APP並不複雜的話，那麼徹底可使用純JS開發，也就是Android和iOS公用一套界面和邏輯。極大的提升了開發效率。在性能上，（Android中通常的操做）RN的表現比原生弱一些，可是遠好於H5。因此整體來看，其實RN的將來仍是能夠期待的。

3，RN運行機制簡述

RN是運行JS的，Android是運行Java字節碼的，因此，實際上JS代碼的最終運行是經過一層封裝，把JS的代碼映射成原生代碼，而界面上的元素最終使用的也是原生的組件，而不是本身渲染（因此在性能上，RN比H5要好不少）。

4，Component簡介

在Android中，主要交互容器是activity或Fragment,而在RN中，界面的交互容器是Component：組件。我以爲Component和原生的Fragment其實很像，都存在於activity中，都受制於activity的生命週期，均可卸載和裝載。

4.1，Component生命週期

由上圖可知，大體分三個過程：初始化，運行中，卸載。

• 初始化階段：
  • 在新版的Component中ES6語法中，getDefaultProps,getInitialState 是不該該被複寫的。RNAPI要求咱們props，state的初始化在Component的constructor函數中完成（props，state這倆大寶貝下文在作解釋），所以在初始化階段能夠作的就是在constructor或者componentDidMount函數中完成相關初始化工做。
  • componentDidMount函數是組件第一次繪製完成以後被調用的，整個週期只被調用一次，在這裏能夠作一些網絡請求操做等。
• 運行階段：
  • 重點在於修改state內容，來刷新界面
• 卸載階段
  • 在componentWillUnmount方法中作一些移除操做，或者什麼都不作。

在這裏，已經有前輩寫出了比較詳細的博文了，有興趣請前往React Native 中組件的生命週期。

4.2，state和 prop

這兩個屬性之因此重要，是由於stat和界面的刷新有關，prop則和組件的封裝有關。

state初始化在構造函數中，經過setState來修改裏面具體的值。具體以下：

而修改state內容則是這樣：

當state中的內容被修改後，當前組件就會按照生命週期來刷新頁面，這樣，全部和界面刷新的任務就所有交到state這一個屬性手裏了。這是一個很不錯的設計。

而prop這個屬性，則是用於封裝組件的時候對外暴露組件的可輸入屬性。即就像這樣：

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

4.3，component間的跳轉

在原生開發中，界面的跳轉主要依賴Intent做爲橋樑，而在RN中，則所有依靠Navigator這個組件來實現頁面之間的跳轉邏輯。

• initRoute這個屬性指定了初始化的頁面，在這個例子中，進入第一屏的頁面將是TabBarView,
• configureScene這個屬性用於指定默認跳轉動畫
• renderScene這個屬性傳入的是一個方法，根據獲得的不一樣的組件（component）來渲染不一樣的場景。

Navigator這個導航器是全局的，整個APP中只有一個，會根據界面的跳轉傳遞到每一個Component內部的prop中。Navgator會維護一個棧，這一點和原生的Activity的任務棧極其類似，能夠對照理解。

• 數據傳遞 上面的代碼中有這樣一段：

< Component navigator = {navigator} route = {route}
        {...route.passProps} />複製代碼

{...route.passProps}保證passProps裏每一個key都會被視做prop的一個屬性，具體以下：

跳轉到SecondPageComponent界面

navigator.push({
    name: 'SecondPageComponent',
    component: SecondPageComponent,
    passProps: {   //注意passProps和以前定義的保持一致
        msg:'ladingwu is handsome'
    }
});複製代碼

而在SecondPageComponent界面界面中，這樣來取數據：

export default class SecondPageComponent extends React.Component {

    componentDidMount() {
            //這裏獲取傳遞過來的參數
            var message=this.prop.msg;
        }
}複製代碼

怎麼樣，簡單極了吧。固然，在原生開發中，還有startActivityForResylt()這個方法能夠再從第二個界面返回時獲取數據，那麼在RN中是否能作到呢？也很簡單，依然是經過傳遞參數，只不過這個時候的參數，應該是一個回調函數（js中，函數也能夠看成參數，一切皆對象）

跳轉到SecondPageComponent界面

navigator.push({
    name: 'SecondPageComponent',
    component: SecondPageComponent,
    passProps: {   //注意passProps和以前定義的保持一致

        getMsg:(msg)=>{console.log(msg)}
    }
});複製代碼

而在SecondPageComponent界面界面中返回數據：

export default class SecondPageComponent extends React.Component {

    componentDidMount() {
            //這裏獲取傳遞過來的參數
            this.prop.getMsg('ladingwu is still handsome');
        }
}複製代碼

不要太簡單哦。。。。

5，總結

固然，RN還有不少能夠說的，好比動畫（性能有點感人），網絡請求，數據存儲等等，就不一一舉例說明了。

說一點感想，使用RN開發這段時間，感受這玩兒確實能夠提升工做效率，畢竟Android和iOS使用一套界面，並且不少功能在RN上都有完備的實現，基本上，只要APP的業務邏輯不復雜，或者並不涉及到不少硬件操做或對性能要求很高的話，使用純RN開發是徹底能夠的。假如H5是將來的話，那麼在將來來臨以前，RN纔是更好的選擇，固然，RN並不能徹底取代原生開發，由於它只是在原生和H5之間找平衡的產物，它固然好，但也不是最優解。

你是否是該學？

應該，即便只是衝着JS也要去學一把，現在，JS不只霸佔了web端，還入侵了移動端和後臺開發，我就問你怕不怕？

---

最後推薦幾個學習RN必備網站：

React-Native中文站(非官方)

React-Native官方網站

江清清的技術專欄

google搜索引擎