作者 ｜ jeremyzj
來源 ｜https://github.com/jeremyzj/jeremyzj.github.io/blob/master/React%20Native%20總結(jié).md
前言
2015年3月, Facebook正式發(fā)布react-native，只支持iOS平臺(tái)；2015年9月，F(xiàn)acebook發(fā)布了React Native for Android，讓這一技術(shù)正式成為跨平臺(tái)開發(fā)框架。
我們團(tuán)隊(duì)是在2016年中期開始接觸并使用react-native, 起初團(tuán)隊(duì)有很多反對(duì)聲，其中
iOS平臺(tái)嚴(yán)格的審核制度，還有后來的JSPatch風(fēng)波，擔(dān)心有熱更新的能力的react-native也會(huì)被警用，還好react-native是以js.bundle為資源加載的沙盒熱更新。
React Native的性能能達(dá)到上限問題
當(dāng)時(shí)選擇react-native的幾個(gè)重要因素
跨平臺(tái)：這可能是最重要的原因了，可以節(jié)省人月
基于React框架開發(fā)，組建化，響應(yīng)式思路，調(diào)試方式可以縮短開發(fā)周期（在開發(fā)者熟練使用的情況下），也可以調(diào)整前端開發(fā)資源
熱更新：APP當(dāng)時(shí)修復(fù)BUG基本都是重新發(fā)版，周期比較長(zhǎng)，熱更新是解決這一個(gè)痛點(diǎn)是最好的選擇
新技術(shù)調(diào)研，擴(kuò)展技術(shù)棧
移動(dòng)框架學(xué)習(xí)套路
每次接觸一個(gè)新技術(shù)，新框架總是一頭霧水。其實(shí)是有套路的，有經(jīng)驗(yàn)的程序員會(huì)說這就是思想 主要從移動(dòng)開發(fā)這幾個(gè)方面調(diào)研
計(jì)算機(jī)語言工具
環(huán)境搭建
UI繪制
基本布局方式
基本tab + navigator的APP框架搭建
網(wǎng)絡(luò)請(qǐng)求(http, https, 上傳，下載等)
緩存, 本地存儲(chǔ)
圖片
平臺(tái)特性處理：例如推送，支付等等iOS，安卓不同的平臺(tái)代碼如何處理
調(diào)試工具：好的調(diào)試工具不但可以事半功倍，還可以給開發(fā)者愉悅的心情開發(fā)
靜態(tài)代碼檢查（這個(gè)對(duì)于解釋型的JS語言很重要）
Unit Test
CI集成方式
以上幾個(gè)方面都研究明白了，整個(gè)react-native生產(chǎn)鏈路就調(diào)研完成了
技術(shù)棧
針對(duì)上面的過程總結(jié)一下技術(shù)棧
需要的語言&框架
1.1 javascript ECMAScript6 : React Native 是以javascript作為語言工具開發(fā);
1.2 React : 起源于 Facebook 的內(nèi)部項(xiàng)目, 因?yàn)樵摴緦?duì)市場(chǎng)上所有 JavaScript MVC 框架，都不滿意，就決定自己寫一套，用來架設(shè) Instagram 的網(wǎng)站。
做出來以后，發(fā)現(xiàn)這套東西很好用，在2013年5月開源. 由于 React 的設(shè)計(jì)思想極其獨(dú)特，屬于革命性創(chuàng)新，性能出眾，代碼邏輯卻非常簡(jiǎn)單。
所以，越來越多的人開始關(guān)注和使用，認(rèn)為它可能是將來 Web 開發(fā)的主流工具;
簡(jiǎn)單直觀、符合習(xí)慣的（idiomatic）方式去編程，讓代碼更容易被理解，從而易于維護(hù)和不斷演進(jìn)。這正是React的設(shè)計(jì)哲學(xué)。
1.3、 flex 布局 : 布局方式;
1.4、 redux : JS 狀態(tài)容器，提供可預(yù)測(cè)化的狀態(tài)管理, 實(shí)現(xiàn)view & state 分離，開發(fā)體驗(yàn)超爽， 而且體小精悍(只有2K)
1.5 、immutable.js :
Pete Hunt: Shared mutable state is the root of all evil（共享的可變狀態(tài)是萬惡之源）, 有人說 Immutable 可以給 React 應(yīng)用帶來數(shù)十倍的提升，也有人說 Immutable 的引入是近期 JavaScript 中偉大的發(fā)明, Facebook 工程師 Lee Byron 花費(fèi) 3 年時(shí)間打造，與 React 同期出現(xiàn)。
如何環(huán)境搭建
node.js RN的調(diào)試服務(wù)基于node服務(wù)器.
npm js包管理工具.
Yarn 是Facebook提供的替代npm的工具，可以加速node模塊的下載。React Native的命令行工具用于執(zhí)行創(chuàng)建、初始化、更新項(xiàng)目、運(yùn)行打包服務(wù)（packager）等任務(wù)。
react-native 環(huán)境搭建（https://facebook.github.io/react-native/docs/getting-started.html）
如何UI繪制與布局
React Native 提供豐富的基礎(chǔ)組件庫(kù)，使用Flexbox布局規(guī)則。采用jsx更直觀的表達(dá)用戶界面結(jié)構(gòu)。
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>HomeText>
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'
}
})
上例繪制一個(gè)簡(jiǎn)單的頁(yè)面, View是最基礎(chǔ)的UI組件，并且支持Flexbox布局。Text是用于顯示文本的組件。Button從命名上就可以明確是按鈕組件。StyleSheet 提供了一種類似 CSS 樣式表的抽象。
調(diào)試
調(diào)試：開發(fā)流程中最重要的事情，下面兩個(gè)工具給RN開發(fā)帶來了超爽的體驗(yàn) RN 調(diào)試工具：react-native-debugger
redux 開發(fā)擴(kuò)展插件：redux-devtools-extension（https://github.com/zalmoxisus/redux-devtools-extension）
靜態(tài)代碼檢查
javascript是解釋型語言，編譯過程只有詞法分析和語法分析，并沒有詞法檢查. eslint對(duì)于js的意義格外重要
避免隱藏錯(cuò)誤
代碼統(tǒng)一規(guī)范，提高可讀性
eslint babel-eslint.
eslint-plugin-react
代碼質(zhì)量的保證
redux unit test.對(duì)于actions & reduce校驗(yàn)不可少.
Jest 很棒的BDD。（PS：每當(dāng)發(fā)現(xiàn)一個(gè)工具特別好用的時(shí)候，發(fā)現(xiàn)都是facebook開源的）。
fetch-mock. 異步單測(cè)不可少.
CI 可以用以下工具
travis-ci. github最流行的CI工具之一.
circle-ci react-native github庫(kù)使用的CI工具.
gitlab-ci 目前我司用的是gitlab ci
轉(zhuǎn)場(chǎng)：tab-navigator框架，流暢的轉(zhuǎn)場(chǎng)動(dòng)畫對(duì)于APP體驗(yàn)很重要
react-navigation. RN社區(qū)今后主推的方案是一個(gè)單獨(dú)的導(dǎo)航庫(kù)react-navigation，它的使用十分簡(jiǎn)單。
性能上： 在原生線程上的Animated動(dòng)畫庫(kù)，因而性能表現(xiàn)十分流暢。此外其動(dòng)畫形式和手勢(shì)都非常便于定制.
狀態(tài)管理： redux
view 與 狀態(tài)分離
Redux 由 Flux 演變而來，但受 Elm 的啟發(fā)，避開了 Flux 的復(fù)雜性。 不管你有沒有使用過它們，只需幾分鐘就能上手 Redux。
單向數(shù)據(jù)流： 應(yīng)用中所有的 state 都以一個(gè)對(duì)象樹的形式儲(chǔ)存在一個(gè)單一的 store 中。 惟一改變 state 的辦法是觸發(fā) action，一個(gè)描述發(fā)生什么的對(duì)象。 為了描述 action 如何改變 state 樹，你需要編寫 reducers。
如何做網(wǎng)絡(luò)請(qǐng)求
使用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 更好數(shù)據(jù)傳輸工具
如何本地存儲(chǔ)：
AsyncStorage使用起來非常簡(jiǎn)單的Key-Value Coding, 返回Promise
import { AsyncStorage } from 'react-native'
let kLoginInfo = '@login:info'
//存儲(chǔ)
AsyncStorage.setItem(kLoginInfo, JSON.stringify(loginInfo))
//刪除
AsyncStorage.removeItem(kLoginInfo)
//加載
AsyncStorage.getItem(kLoginInfo)
iOS內(nèi)部是用一個(gè)json文件實(shí)現(xiàn)永久性存儲(chǔ)， Android方面據(jù)官方了解是會(huì)嘗試使用RocksDB，或退而選擇 SQLite。
集成redux存儲(chǔ)
也可嘗試一下款平臺(tái)數(shù)據(jù)庫(kù)realm
熱更新：
React Native一個(gè)重要功能，支持熱更新，蘋果去年有過一次對(duì)熱修復(fù)的嚴(yán)打，JSPatch慘遭扼殺，不過對(duì)于RN這樣的沙盒熱更新是可以的.
微軟的hot-push是個(gè)不錯(cuò)的工具。
有條件的單位可以自己建熱修復(fù)服務(wù)，下載bundle包
native組件開發(fā)：
React Native可能還沒有相應(yīng)的模塊封裝，但是提供native組件開發(fā)能力. 利用這種方式解決平臺(tái)特性，支付，推送，face ID都可以封裝成native組件來解決
iOS原生模塊
iOS原生UI組件
安卓原生模塊
安卓原生UI組件
rnstart
rnstart是根據(jù)上面技術(shù)棧搭建的react native starter demo 工程
未來展望
react-native論成熟度，穩(wěn)定性，RN 比 不上iOS 和 Android 原生,
也存在很多奇怪的BUG，習(xí)慣了OC, Java語言開發(fā)的對(duì)于JS缺少類型系統(tǒng)很沮喪
手動(dòng)操作動(dòng)畫依然無解。
長(zhǎng)列表性能問題無解。
手勢(shì)操作不夠靈活。
iOS podfile維護(hù)也不給力.
…. …. 等等問題。
很多單位采用模塊化方案，讓APP有RN的能力，讓業(yè)務(wù)交互簡(jiǎn)單的模塊來用react-native開發(fā)。
但是facebook依然很努力了改變，在2018年對(duì)react-native有一次大的重構(gòu)，目的更輕量化并能更好地適應(yīng)現(xiàn)有的原生應(yīng)用，更符合js的生態(tài)系統(tǒng)。
對(duì)于移動(dòng)開發(fā)者而言，react-native只是開發(fā)箱中其中一種工具。豐富自己工具箱，才能有更寬的視野，更多的開發(fā)思路。
聯(lián)系客服
