移動開發者如何更好地學習 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生產鏈路就調研完成了。

技術棧

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

需要的語言&框架

JavaScript - ECMAScript6：React Native是以JavaScript作為語言工具開發；

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

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

flex 布局 : 布局方式；

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

immutable.js :「Pete Hunt: Shared mutable state is the root of all evil（共享的可變狀態是萬惡之源）」, 有人說 Immutable 可以給 React 應用帶來數十倍的提升，也有人說 Immutable 的引入是近期 JavaScript 中偉大的發明, Facebook 工程師 Lee Byron 花費 3 年時間打造，與 React 同期出現；

Immutable 詳解及 React 中實踐（https://github.com/camsong/blog/issues/3）。

如何進行環境搭建

node.js RN的調試服務基於node伺服器；

npm js包管理工具；

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

react-native 環境搭建（https://facebook.github.io/react-native/docs/getting-started.html）。

如何進行UI繪製與布局

React Native 提供豐富的基礎組件庫，使用Flexbox布局規則。採用jsx更直觀的表達用戶界面結構。

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

調試

調試是開發流程中最重要的事情，下面兩個工具給RN開發帶來了超爽的體驗

RN 調試工具：react-native-debugger

https://github.com/jhen0409/react-native-debugger

redux 開發擴展插件：redux-devtools-extension

https://github.com/zalmoxisus/redux-devtools-extension

靜態代碼檢查

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

避免隱藏錯誤；

代碼統一規範，提高可讀性。

代碼質量的保證

redux unit test：對於actions & reduce校驗不可少（https://redux.js.org/docs/recipes/WritingTests.html）；

Jest：很棒的BDD（https://facebook.github.io/jest/docs/en/tutorial-react-native.html，PS：每當發現一個工具特別好用的時候，發現都是Facebook開源的）；

fetch-mock：非同步單測不可少（http://www.wheresrhys.co.uk/fetch-mock/）。

CI 可以用以下工具

travis-ci：GitHub最流行的CI工具之一（https://travis-ci.org/）；

circle-ci：react-native GitHub庫使用的CI工具（https://circleci.com/）；

gitlab-ci：目前我司用的是gitlab ci（https://about.gitlab.com/features/gitlab-ci-cd/）。

轉場

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

react-navigation：RN社區今後主推的方案是一個單獨的導航庫react-navigation（https://reactnavigation.org/），它的使用十分簡單。性能上在原生線程上的Animated動畫庫，因而性能表現十分流暢，此外其動畫形式和手勢都非常便於定製。

狀態管理

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

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

如何做網路請求

使用fetch（https://facebook.github.io/react-native/docs/network）；

react-native-fetch-blob：更好的數據傳輸工具（https://github.com/wkh237/react-native-fetch-blob）。

如何本地存儲

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

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

集成redux存儲（https://github.com/rt2zz/redux-persist）；

也可嘗試一下款平台資料庫realm（https://realm.io/docs/javascript/latest/v）。

熱更新

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

微軟的hot-push是個不錯的工具（https://github.com/Microsoft/react-native-code-push）；

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

native組件開發

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

iOS原生模塊（https://reactnative.cn/docs/native-modules-ios）

iOS原生UI組件（https://reactnative.cn/docs/native-components-ios/）

安卓原生模塊（https://reactnative.cn/docs/native-modules-android/）

安卓原生UI組件（https://reactnative.cn/docs/native-components-android/）

rnstart：是根據上面技術棧搭建的react native starter demo工程（https://github.com/jeremyzj/rnstarter）。

未來展望

論成熟度、穩定性，RN 比不上iOS和Android原生，也存在很多奇怪的BUG，習慣了OC、Java語言開發的對於JS缺少類型系統很失望，對於手動操作動畫也依然無解，長列表性能問題無解、手勢操作不夠靈活、iOS podfile維護也不給力........等等問題。

很多單位採用模塊化方案，讓App有RN的能力，讓業務交互簡單的模塊來用react-native開發。但是Facebook依然很努力地在改變，2018年對react-native有了一次大的重構，目的更輕量化並能更好地適應現有的原生應用，更符合JS的生態系統。

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

作者：魔笛，從事移動端開發7+年的經驗，目前在某互聯網金融公司作為iOS端leader工作。

聲明：本文為作者投稿，版權歸對方所有。

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！