前言
這一篇是給稍微有點原生（iOS 或者 Android）編程經(jīng)驗的人的一個系統(tǒng)性的 React Native 入門指南。主要總結(jié)的是我之前系統(tǒng)學(xué)習(xí) React Native 的經(jīng)驗。
我在很早的時候就接觸了 RN钱磅，但是剛開始那段時間基本處于一種瞎寫的狀態(tài)绿饵，不知道很多內(nèi)在原理铝条，導(dǎo)致我碰到問題各種谷歌、StackOverflow嘶朱，搜代碼特愿，拷貝粘貼代碼仲墨。然后又荒廢了一段時間，今年開始又重拾 RN洽议，有了之前的經(jīng)驗宗收，這次是比較系統(tǒng)的學(xué)習(xí)了漫拭。
先介紹一下我的情況：我是原生 iOS 開發(fā)亚兄，Objective C 3年經(jīng)驗，Swift 2年經(jīng)驗采驻。
路線
基本路線如下：
- 詳細了解 JavaScript
- 詳細了解 React
- 詳細了解 React Native
- 其他（比如說 Redux）
下面詳細介紹审胚。
JavaScript
關(guān)鍵是了解 JavaScript 的繼承和原型鏈機制，同時包括 JavaScript 的對象模型礼旅。
參考資料如下：（參考資料如果包含瀏覽器相關(guān)的內(nèi)容膳叨，可以忽略）
先從 MDN 的 JavaScript 教程開始看，這是 JavaScript 的基礎(chǔ)痘系，有一定編程經(jīng)驗在初級部分可以看的快一點菲嘴，但是關(guān)于 JavaScript 對象介紹、繼承與原型鏈、對象模型的細節(jié) 要詳細的看龄坪。
如果沒有頭緒昭雌，或者覺得跳著看思路跟不上，可以從頭到尾細看（我就是這么看的健田，但是我看的比較快烛卧，花了2天時間看完）
看完 MDN 的教程以后就可以看 ES6 相關(guān)內(nèi)容了。我看的是 ruanyifeng 的 ES6 網(wǎng)上教程妓局，不過也可以看 MDN 的 JavaScript 指南总放，兩者可以對比的看。我是看完 ruanyifeng 的教程之后又看了 MDN 的 JavaScript 指南好爬，由于看過 ruanyifeng 的 ES6局雄，所以 MDN 的 JavaScript 指南就可以快一點。我覺得這里比較關(guān)鍵的是理解 ES6 的模塊（Module）存炮，也就是這兩章：Module 的語法 和 Module 的加載實現(xiàn)
哎榴，還有就是基本的 ES6 語法。
在看的過程中有些內(nèi)容可能不好懂僵蛛，完全可以跳過尚蝌，等后面寫代碼或者看代碼碰到的時候再回過頭來看，只要記住有這么一個東西即可充尉。有些內(nèi)容比較好懂飘言，或者理解一下就懂了，這時候可以對比一下和其他語言在這方面有哪些不同和相同（比如你是 Java 程序員驼侠，學(xué)習(xí) JavaScript姿鸿，就可以對比一下 Java 的繼承和 JavaScript 的繼承），這樣子可以加深你對 JavaScript 的理解倒源。
看完這些其實 JavaScript 已經(jīng)入門了苛预，不過我要特別提一下 TypeScript。由于 JavaScript 是弱類型語言笋熬，經(jīng)常代碼寫著寫著就不知道當(dāng)前函數(shù)的參數(shù)定義是什么热某。無論是 debug 還是閱讀代碼、寫代碼胳螟，不知道一個東西確定是什么是很痛苦的（你可以想象一下你寫的一個函數(shù)昔馋，有一個參數(shù)，但是卻無法確定類型是什么糖耸，所以需要時刻在腦海中告訴自己這個參數(shù)的定義是這樣的秘遏，但是一不小心疏忽了，編輯器也沒有提醒你這里寫的有問題嘉竟，那只能在運行時發(fā)生問題才知道出了問題邦危，然后又要花一段時間去調(diào)試）洋侨。TypeScript 是微軟出的一個比較流行的解決這類問題的方案，就是給 JavaScript 加上 Type （類型）倦蚪。你也可以在一開始不用 TypeScript凰兑，但是等到你碰到很多上面提到的類似問題時，TypeScript 就是你的解決方案审丘。
React
我剛開始學(xué)習(xí) RN 的時候吏够，對 React 一無所知，直接根據(jù) React Native 的官方文檔來學(xué)習(xí)滩报。但是在越來越深入的寫 React Native 相關(guān)代碼的時候锅知，我發(fā)現(xiàn)，了解 React 是很關(guān)鍵的脓钾。
對于喜歡立即上手的人來說售睹，可以先不看 React 相關(guān)的內(nèi)容，直接學(xué)習(xí) RN可训。但是在你寫了一定量的代碼以后昌妹，你會碰到一些問題，比如如何復(fù)用組件握截，如何處理一些不是很常見的操作飞崖，如何處理數(shù)據(jù)（展示組件和容器組件）等等，這時候你就可以開始去了解 React 了谨胞。
了解 React 當(dāng)然是官方文檔：
上面兩個內(nèi)容是一樣的固歪，喜歡中文的可以看中文，喜歡看英文的可以看英文胯努。
建議能夠全部看完所有內(nèi)容牢裳，不要忽略任何一個地方（如果是 Web 開發(fā)可以跳著看）。
當(dāng)然其實看完這文檔是不夠的叶沛，我覺得有時間一定要理解一下 React 的實現(xiàn)原理蒲讯。（我沒有看過 React 源碼，所以就不繼續(xù)說了）
React Native
說了那么多終于到 RN 這一部分了灰署。還是要強調(diào)一下判帮，學(xué)習(xí) RN 可以先不了解 JavaScript 和 React，（前提是你要有一點編程經(jīng)驗氓侧，如果是大神的話脊另，請隨意）喜歡立即上手的可以直接根據(jù)官方文檔上手导狡。不過要深入了解 RN约巷，則必須要了解 React 和 JavaScript。
學(xué)習(xí) RN 的時候主要就是看 官方英文文檔（中文版）旱捧，一些環(huán)境依賴等根據(jù)官方文檔來操作即可独郎。
RN 需要關(guān)鍵了解使用的部分如下：
- FlexBox踩麦，一個前端布局的方式，寫界面的時候一定要了解這個氓癌，否則界面就寫不出來
- 各種 UI 組件的使用谓谦、屬性等，可以一邊寫代碼一邊學(xué)習(xí)使用
- 網(wǎng)絡(luò)請求贪婉，大部分 app 都會有網(wǎng)絡(luò)請求反粥，所以了解這個也很關(guān)鍵。有一個框架 axios 可以嘗試使用疲迂，這是一個 HTTP 客戶端框架才顿。
- 如何與原生代碼交互，iOS 相關(guān)文檔地址 iOS Native Modules尤蒿、iOS Native UI Components 郑气，Android 相關(guān)文檔 Android Native Modules、Android Native UI Components
- 數(shù)據(jù)存儲腰池，使用 RealmJS 或者原生的 AsyncStorage尾组，使用 RealmJS 的問題是，如果你的 iOS 原生項目已經(jīng)使用了 RealmSwift 等的話示弓，會導(dǎo)致符號沖突讳侨，無法通過編譯。
一些坑：
- 建議在原生項目上添加 RN 支持奏属，文檔地址集成到現(xiàn)有原生應(yīng)用爷耀。如果使用
create-react-native-app AwesomeProject命令來生成一個 RN 項目，會引入 Expo 這種東西拍皮，我個人不建議使用此類框架歹叮。 - 不建議使用
NavigatorIOS這類組件，推薦 React Navigation铆帽，但是這個開源組件坑也比較多咆耿，不過個人認為還是比 RN 提供的組件要好。
其他
Redux爹橱，Redux 是一個關(guān)于數(shù)據(jù)流的前端框架萨螺，也可以用在 RN 中。其他還有類似的比如 MobX（除此之外據(jù)說新版 React 有種 Context API 可以讓我們告別使用 Redux愧驱，不太清楚慰技，應(yīng)該是比較新的東西）。
先說一下组砚，一開始可以不使用 Redux吻商，Redux 的官網(wǎng)也提示說如果不知道要不要使用 Redux，則不要使用 Redux糟红。
學(xué)習(xí)自然要根據(jù)文檔來：Redux 英文官方文檔（中文版）
理解 Redux 比較關(guān)鍵的是它的狀態(tài)樹艾帐，所有的操作最終會反應(yīng)到狀態(tài)樹上乌叶，所有的操作也是圍繞狀態(tài)樹展開來的。所以一開始做 app 的時候設(shè)計一個比較貼切的狀態(tài)樹很關(guān)鍵柒爸。
進階
- 打包
- 熱更新
- 與原生交互
- RN 原生實現(xiàn)原理
參考資料有如下：
- React Native拆包及熱更新方案
- 攜程是如何做React Native優(yōu)化的
- 微軟的熱更新方案 CodePush
- ReactNative中文網(wǎng)推出的代碼熱更新服務(wù)
- iOS Native Modules
- iOS Native UI Components
- Android Native Modules
- Android Native UI Components
- React Native通信機制詳解
開發(fā)環(huán)境
我使用 Visual Studio Code准浴，不建議使用 Atom（很卡）。并且配置了 TypeScript 環(huán)境捎稚，配置參考 demo 地址： https://github.com/Microsoft/TypeScript-React-Native-Starter
注意事項
個人覺得 RN 的要求其實很高乐横，不僅要了解前端開發(fā)相關(guān)內(nèi)容，還要了解 Android 和 iOS 的原生內(nèi)容今野。一個純 JavaScript 的 RN 項目不太現(xiàn)實晰奖。所以建議在原生項目上使用 RN，不要使用純 RN 項目腥泥。這對于理解 RN 也有一定幫助匾南。
不建議使用其他類似 RN 的解決方案，比如說 Weex蛔外，當(dāng)然我并沒有了解過 Weex蛆楞。我想說的是 RN 的生態(tài)環(huán)境是很活躍的，GitHub 有很多開發(fā)者共享的開源代碼夹厌，很多人也在 GitHub 和 stackoverflow 上討論自己碰到的 RN 相關(guān)的問題豹爹。但是即使如此，RN 還是沒有出 1.0 版本矛纹，而且在實際使用過程中經(jīng)常要自己造輪子臂聋，也會碰到很多奇奇怪怪的問題，導(dǎo)致拖累開發(fā)速度或南，從學(xué)習(xí)角度不是問題孩等，但是工作就不一樣了。所以使用 Weex 情況可能更糟糕采够。
總結(jié)
學(xué)習(xí) React Native 的過程其實更像是入門 React 前端開發(fā)肄方，區(qū)別就是代碼環(huán)境從瀏覽器變成了移動設(shè)備。
在原生移動開發(fā)勢微的今天蹬癌，從 React Native 切入來了解前端開發(fā)也很不錯权她。在學(xué)習(xí)的同時，結(jié)合自己已有的原生開發(fā)經(jīng)驗逝薪，對比 React Native 開發(fā)隅要，更能在鞏固 React Native 相關(guān)知識的同時對加深原生開發(fā)的理解。
