在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搜索引擎

總結

以上是生活随笔為你收集整理的react-native 开发小结（Android）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。