React Native 開發總結

摘要： 2015年3月, Facebook正式釋出react-native，只支援iOS平臺；2015年9月，Facebook釋出了React Native for Android，讓這一技術正式成為跨平臺開發框架。 我們團隊是在2016年中期開始接觸並使用react-native, 起初團隊有很...

2015年3月, Facebook正式釋出react-native，只支援iOS平臺；2015年9月，Facebook釋出了React Native for Android，讓這一技術正式成為跨平臺開發框架。

我們團隊是在2016年中期開始接觸並使用react-native, 起初團隊有很多反對聲，其中

• iOS平臺嚴格的稽核制度，還有後來的JSPatch風波，擔心有熱更新的能力的react-native也會被警用，還好react-native是以js.bundle為資源載入的沙盒熱更新。
• React Native的效能能達到上限問題

當時選擇react-native的幾個重要因素

• 跨平臺：這可能是最重要的原因了，可以節省人月
• 基於React框架開發，組建化，響應式思路，除錯方式可以縮短開發週期（在開發者熟練使用的情況下），也可以調整前端開發資源
• 熱更新：APP當時修復BUG基本都是重新發版，週期比較長，熱更新是解決這一個痛點是最好的選擇
• 新技術調研，擴充套件技術棧

移動框架學習套路

每次接觸一個新技術，新框架總是一頭霧水。其實是有套路的，有經驗的程式員會說這就是思想 主要從移動開發這幾個方面調研

• 計算機語言工具
• 環境搭建
• UI繪製
• 基本佈局方式
• 基本tab + navigator的APP框架搭建
• 網路請求(http, https, 上傳，下載等)
• 快取, 本地儲存
• 圖片
• 平臺特性處理：例如推送，支付等等iOS，安卓不同的平臺程式碼如何處理
• 除錯工具：好的除錯工具不但可以事半功倍，還可以給開發者愉悅的心情開發
• 靜態程式碼檢查（這個對於解釋型的JS語言很重要）
• Unit Test
• CI整合方式

以上幾個方面都研究明白了，整個react-native生產鏈路就調研完成了

技術棧

針對上面的過程總結一下技術棧

需要的語言&框架

1.1 javascript ofollow,noindex" target="_blank">ECMAScript6  : React Native 是以javascript作為語言工具開發;

1.2 React :起源於 Facebook 的內部專案, 因為該公司對市場上所有 JavaScript MVC 框架，都不滿意，就決定自己寫一套，用來架設 Instagram 的網站。做出來以後，發現這套東西很好用，在2013年5月開源. 由於 React 的設計思想極其獨特，屬於革命性創新，效能出眾，程式碼邏輯卻非常簡單。所以，越來越多的人開始關注和使用，認為它可能是將來 Web 開發的主流工具;

簡單直觀、符合習慣的（idiomatic）方式去程式設計，讓程式碼更容易被理解，從而易於維護和不斷演進。這正是React的設計哲學。

1.3flex 佈局 :佈局方式;

1.4redux :JS 狀態容器，提供可預測化的狀態管理, 實現view & state 分離，開發體驗超爽， 而且體小精悍(只有2K)

如何環境搭建

node.js RN的除錯服務基於node伺服器.

npm js包管理工具.

Yarn 是Facebook提供的替代npm的工具，可以加速node模組的下載。React Native的命令列工具用於執行建立、初始化、更新專案、執行打包服務（packager）等任務。

react-native環境搭建

如何UI繪製與佈局

React Native 提供豐富的基礎元件庫，使用Flexbox佈局規則。採用jsx更直觀的表達使用者介面結構。

import React, {Component} from 'react'
import {View, Text, Button, StyleSheet} from 'react-native'
 
export class Home extends Component {
  state = {
  number: 0
  }
 
  _increase() {
    const { number } = this.state
 this.setState({number: number + 1})
  }
 
  _decrease() {
    const { number } = this.state
 this.setState({number: number - 1})
  }
 
  render() {
    const { number } = this.state
 
    return (
      <View style={styles.container}>
        <Text>Home</Text>
        <Button title="加" onPress={this._increase.bind(this)}/> 
        <Button title="減" onPress={this._decrease.bind(this)}/> 
        <Text>{number}</Text>
      </View>
    )
  }
}
 
let styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff'
  }
})

上例繪製一個簡單的頁面,View 是最基礎的UI元件，並且支援Flexbox佈局。Text 是用於顯示文字的元件。Button 從命名上就可以明確是按鈕元件。StyleSheet 提供了一種類似 CSS 樣式表的抽象。

除錯

除錯：開發流程中最重要的事情，下面兩個工具給RN開發帶來了超爽的體驗 RN 除錯工具：react-native-debugger

redux 開發擴充套件外掛：redux-devtools-extension

靜態程式碼檢查

javascript是解釋型語言，編譯過程只有詞法分析和語法分析，並沒有詞法檢查. eslint對於js的意義格外重要

• 避免隱藏錯誤
• 程式碼統一規範，提高可讀性

程式碼質量的保證

redux unit test .對於actions & reduce校驗不可少.

Jest 很棒的BDD。（PS：每當發現一個工具特別好用的時候，發現都是facebook開源的）。

fetch-mock . 非同步單測不可少.

CI 可以用以下工具

travis-ci . github最流行的CI工具之一.

circle-ci react-native github庫使用的CI工具.

gitlab-ci 目前我司用的是gitlab ci

轉場：tab-navigator框架，流暢的轉場動畫對於APP體驗很重要

react-navigation . RN社群今後主推的方案是一個單獨的導航庫react-navigation，它的使用十分簡單。

效能上： 在原生執行緒上的Animated動畫庫，因而效能表現十分流暢。此外其動畫形式和手勢都非常便於定製.

狀態管理：redux

view 與 狀態分離

Redux 由 Flux 演變而來，但受 Elm 的啟發，避開了 Flux 的複雜性。 不管你有沒有使用過它們，只需幾分鐘就能上手 Redux。

單向資料流： 應用中所有的 state 都以一個物件樹的形式儲存在一個單一的 store 中。 惟一改變 state 的辦法是觸發 action，一個描述發生什麼的物件。 為了描述 action 如何改變 state 樹，你需要編寫 reducers。

如何做網路請求

使用fetch

fetch('https://mywebsite.com/endpoint/', {
  method: 'POST',
  headers: {
    Accept: 'application/json',
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    firstParam: 'yourValue',
    secondParam: 'yourOtherValue',
  }),
});

react-native-fetch-blob 更好資料傳輸工具

如何本地儲存：

AsyncStorage 使用起來非常簡單的Key-Value Coding, 返回Promise

import { AsyncStorage } from 'react-native'
let kLoginInfo = '@login:info'
 
//儲存
AsyncStorage.setItem(kLoginInfo, JSON.stringify(loginInfo))
 
//刪除
AsyncStorage.removeItem(kLoginInfo)
 
//載入
AsyncStorage.getItem(kLoginInfo)

iOS內部是用一個json檔案實現永久性儲存， Android方面據官方瞭解是會嘗試使用RocksDB，或退而選擇 SQLite。

整合redux儲存

也可嘗試一下款平臺數據庫realm

熱更新：

React Native一個重要功能，支援熱更新，蘋果去年有過一次對熱修復的嚴打，JSPatch慘遭扼殺，不過對於RN這樣的沙盒熱更新是可以的.

微軟的hot-push 是個不錯的工具。

有條件的單位可以自己建熱修復服務，下載bundle包

native元件開發：

React Native可能還沒有相應的模組封裝，但是提供native元件開發能力. 利用這種方式解決平臺特性，支付，推送，face ID都可以封裝成native元件來解決

rnstart

rnstart 是根據上面技術棧搭建的react native starter demo 工程

未來展望

react-native論成熟度，穩定性，RN 比 不上iOS 和 Android 原生,

也存在很多奇怪的BUG，

習慣了OC, Java語言開發的對於JS缺少型別系統很沮喪 手動操作動畫依然無解.

長列表效能問題無解

手勢操作不夠靈活.

iOS podfile維護也不給力.

…. …. 等等問題。

很多單位採用模組化方案，讓APP有RN的能力，讓業務互動簡單的模組來用react-native開發

但是facebook依然很努力了改變，在2018年對react-native有一次大的重構，目的更輕量化並能更好地適應現有的原生應用，更符合js的生態系統。

對於移動開發者而言，react-native只是開發箱中其中一種工具。豐富自己工具箱，才能有更寬的視野，更多的開發思路。