最近React Native火的不要不要的，打哪兒看都全是好評苞尝，從去年年底就開始的Native末日言論又被炒了起來硫惕。居安思危，入職以來一直做得純Native應(yīng)用野来，連WebView / UIWebView都很少用，感覺與目前主流的Hybrid App嚴(yán)重脫軌∽倏酰現(xiàn)在正好借手頭項(xiàng)目完結(jié)了沒事做學(xué)習(xí)一下曼氛，其實(shí)官網(wǎng)寫的文檔還是比較詳細(xì)的，這里只是總結(jié)和整理令野。
首先對比一下Native APP舀患、Hybrid APP、 Web App气破、React Native：
Native APP
Native APP 指的是原生應(yīng)用聊浅，使用Java/OC等開發(fā)，一般依托于操作系統(tǒng)现使，有很強(qiáng)的交互低匙，是一個完整的App，可拓展性強(qiáng)碳锈。需要用戶下載安裝使用顽冶。
優(yōu)點(diǎn)：
（1）用戶體驗(yàn)高,可針對不同平臺提供不同的體驗(yàn)，針對平臺特性去做用戶體驗(yàn)優(yōu)化售碳。
（2）可以利用系統(tǒng)API及平臺特性强重，訪問手機(jī)的提供的功能（GPS，相機(jī)等）贸人。
（3）可定制的專場動畫和切換動畫间景，與系統(tǒng)高度切合，可獲得更快的運(yùn)行速度和性能艺智，并支持豐富的圖形和動畫倘要。
（4）擁有系統(tǒng)級別的通知或提醒，用戶留存率高力惯。
（5）可訪問本地資源碗誉，支持離線工作，節(jié)省用戶的流量成本父晶。
（6）開源框架豐富哮缺，已經(jīng)形成了良好的生態(tài)環(huán)境。
缺點(diǎn)：
（1）開發(fā)成本高甲喝，上手需要一定的平臺基礎(chǔ)尝苇，需要針對不同平臺需要不同的技術(shù)背景進(jìn)行開發(fā)，并且開發(fā)相對來說比較繁瑣。
（2）維護(hù)成本高糠溜，需要兼容歷史版本淳玩，保證歷史版本的正常使用。用戶需要下載升級非竿，雖然現(xiàn)在熱修復(fù)熱更新比較熱蜕着，但是我認(rèn)為還達(dá)不到正常更新版本的地步。
（3）分發(fā)成本高红柱，分發(fā)到不同的應(yīng)用商店承匣，需要進(jìn)行不同的配置打包。
Web App
我理解的Web App說白了就是一套適配各種屏幕的Html5頁面锤悄，使用Html5/JavaScript/CSS開發(fā)韧骗，由前端開發(fā)人員編寫，只需要一個瀏覽器就能輕松訪問零聚。
優(yōu)點(diǎn)：
（1）開發(fā)成本低袍暴，一個web前端開發(fā)人員不需要學(xué)習(xí)很多新技術(shù)即可進(jìn)行開發(fā)。
（2）開發(fā)一次基本可以適配所有平臺隶症，適用范圍廣政模，再次體現(xiàn)了成本低。
（3）更新快蚂会，用戶看到的總是最新版本览徒，無需下載，隨開隨用颂龙。
缺點(diǎn)：
（1）用戶體驗(yàn)相對來說比較差习蓬，Dom解析耗費(fèi)了大量的時間（傳送門），交互圖形和動畫效果較差措嵌，尤其是弱網(wǎng)情況下基本不能忍躲叼，而且對系統(tǒng)資源的損耗遠(yuǎn)遠(yuǎn)超過Native應(yīng)用。
（2）用戶存留率低企巢，只有打開才有通知推送枫慷。
（3）訪問手機(jī)文件和手機(jī)功能的能力相對來說比較薄弱。
（4）雖然Html5可以離線使用浪规，但是連接網(wǎng)絡(luò)的時候把用戶想看的不想看的頁面都給下載下來或听，個人認(rèn)為對流量要求比較高，不符合大眾使用笋婿。
Hybrid App
Hybrid App又叫混合應(yīng)用誉裆，是一種介于Native App、Web App之間的App缸濒，結(jié)合了兩種App模式的優(yōu)點(diǎn)足丢，一般來說是使用Native來處理用戶和系統(tǒng)的交互粱腻，Web來展示內(nèi)容。通過原生系統(tǒng)的WebView / UIWebView或者自定義的WebView來實(shí)現(xiàn)Web頁面的嵌入斩跌，現(xiàn)在大部分應(yīng)用都是采用的這種模式绍些。
優(yōu)點(diǎn)：
（1）可以利用系統(tǒng)API及平臺特性，訪問手機(jī)的提供的功能（GPS耀鸦，相機(jī)等）柬批。
（2）用戶體驗(yàn)適中,可定制的專場動畫和切換動畫，與系統(tǒng)高度切合袖订，可獲得更快的運(yùn)行速度和性能萝快，并支持豐富的圖形和動畫。
（3）擁有系統(tǒng)級別的通知或提醒著角，用戶留存率高。
（4）開發(fā)成本適中旋恼，Web頁面替代了部分Native頁面吏口，并且可以跨平臺使用，節(jié)省了開發(fā)時間冰更。
缺點(diǎn)：
（1）維護(hù)成本高产徊，需要兼容歷史版本，保證歷史版本的正常使用蜀细。
（2）分發(fā)成本高舟铜，分發(fā)到不同的應(yīng)用商店，需要進(jìn)行不同的配置打包奠衔。
（3）嵌入的Web頁面在弱網(wǎng)情況下體驗(yàn)比較差谆刨。
React Native
React Native (簡稱RN)是Facebook于2015年四月開源的跨平臺移動應(yīng)用開發(fā)框架，是Facebook早先開源的Web UI框架 React 在原生移動應(yīng)用平臺的衍生產(chǎn)物归斤，目前支持iOS和安卓兩大平臺痊夭。該框架使用Javascript，類似于HTML的JSX脏里，以及CSS來開發(fā)移動應(yīng)用UI她我，因此熟悉Web開發(fā)的人只需很少的學(xué)習(xí)成本就可以轉(zhuǎn)入移動應(yīng)用開發(fā)。
RN運(yùn)行時包含一個原生的主線程和一個JS線程迫横，JS線程執(zhí)行JS代碼番舆，負(fù)責(zé)界面布局和業(yè)務(wù)邏輯處理，原生線程負(fù)責(zé)界面渲染和原生組件的執(zhí)行矾踱。RN里面盡量使用原生組件恨狈，避免重復(fù)造輪子。這樣的好處呛讲，一是可以利用現(xiàn)有的大量的原生組件拴事，降低入門門檻沃斤；二是可以達(dá)到跟原生應(yīng)用一樣的性能；三是通過JS封裝過后的組件刃宵，可以支持跨平臺衡瓶。
JS在RN里面的作用類似于Python這樣的支持調(diào)用原生C庫的腳本語言，都是起著“膠水”的作用牲证。復(fù)雜計(jì)算和底層功能都通過調(diào)用原生接口來完成哮针，流程控制和業(yè)務(wù)邏輯則在“膠水”語言里完成。這樣既提高了開發(fā)效率坦袍，又兼顧了性能十厢。
React Native是 Facebook 開源的框架，可以直接用JavaScript 開發(fā)原生的APP捂齐。React Native和Hybrid App很像蛮放，很多人也喜歡吧React Native和Hybrid App混為一談，但其實(shí)并不是奠宜。React Native采用JavaScript橋接加Native橋接兩個方式合并起來包颁，然后加上增加對比差異化算法增量渲染，而且渲染都是Native渲染压真，雖然使用JavaScript 編寫娩嚼，但是后臺是渲染成Native來使用的，性能雖然比純原生差一點(diǎn)滴肿，但是還是遠(yuǎn)遠(yuǎn)比Html5的性能要快很多岳悟。
優(yōu)點(diǎn)：
（1）Learn once,write anywhere。注意泼差，不是Java的Write once, run anywhere贵少！
（2）因?yàn)槭荖ative渲染，所以性能相對來說比較高堆缘。
（3）可以利用系統(tǒng)API及平臺特性春瞬，訪問手機(jī)的提供的功能（GPS，相機(jī)等）套啤。
（4）擁有系統(tǒng)級別的通知或提醒宽气，用戶留存率高。
缺點(diǎn)：
（1）由于還不是穩(wěn)定版本潜沦，版本更新太快萄涯。并且更新新版可能會出現(xiàn)不兼容的問題或者額外的bug需要開發(fā)者自己去處理。
（2）學(xué)習(xí)成本高唆鸡。要學(xué)習(xí)Javascript涝影，還需要涉及到IOS，Android開發(fā)相關(guān)知識争占。(Boss：這個工作特么的要分給前端做呢還是給客戶端做呢燃逻？Ｐ蚰俊）
（3）支持的組件不全面。大部分廠商并不支持React Native伯襟。
（4）截止到現(xiàn)在還是個新技術(shù)猿涨，生態(tài)剛剛開始生成姆怪，但是還沒有到Native生態(tài)那么豐富的地步叛赚，很多需求還得自己動手從頭寫起。
題外：
一般要學(xué)習(xí)一門新技術(shù)的時候都會查技術(shù)的前景和發(fā)展?jié)摿遥拖嚓P(guān)主流技術(shù)對比俺附。不論從已有的生態(tài)和發(fā)展趨勢躲因，還是公司的技術(shù)要求上來看倚聚，我覺得目前學(xué)習(xí)React Native是最好的選擇。過程在下面羅列出來（我都沒用過古劲，暫時都是收集的觀點(diǎn)揪胃，意見保留到我都試用之后）：
- Dcloud ： 可能是目前國人開發(fā)的最易用的璃哟、最優(yōu)秀的跨平臺框架，并且有自己的IDE只嚣，HBuilder和MUI搭配雖然我沒用過，但是周圍朋友公司在用艺沼，贊不絕口册舞。據(jù)說有人查過最終的頁面結(jié)構(gòu)，依舊是基于WebView的渲染障般，所以性能暫時還是比不過React Native的调鲸。具體詳情見傳送門。
- LuaView ： 阿里的開源SDK挽荡，采用的是Lua腳本語言藐石，作者團(tuán)隊(duì)更新比較慢，資料也比較少定拟，不推薦于微。
- Weex(Vue-Native) ： 同樣是阿里的開源作品，目測是React Native最有力的競爭者青自，易用性比React Native好株依，并且性能上各有千秋，甚至說還要更優(yōu)秀一點(diǎn)延窜，唯一的缺點(diǎn)是開源時間比較晚恋腕，資料還不夠豐富，沒有形成強(qiáng)大的生態(tài)環(huán)境逆瑞，不過按照目前的形勢看荠藤，一切只是時間問題伙单。和React Native的Learn once,write anywhere 理念不同的是，Weex 比較傾向于和Java一樣的 Write once, run anywhere哈肖。 具體詳情見傳送門1吻育，傳送門2。
安裝環(huán)境：
目前支持的開發(fā)平臺是Windows,Mac和Linux牡彻。因?yàn)榧依镫娔X用的是Win7扫沼，所以暫時只總結(jié)Windows和Android下的開發(fā)環(huán)境搭建。其他平臺請看官網(wǎng)這里庄吼。
搭建React Native平臺環(huán)境需要安裝Python2和Node.js缎除。我們可以直接去官網(wǎng)下載配置環(huán)境，不過官方推薦我們用Chocolatey來進(jìn)行環(huán)境搭建总寻。
Chocolatey is a package manager for Windows (like apt-get or yum but for Windows). It was designed to be a decentralized framework for quickly installing applications and tools that you need. It is built on the NuGet infrastructure currently using PowerShell as its focus for delivering packages from the distros to your door, err computer.
1.一般來說器罐，使用Chocolatey來安裝軟件的時候，需要以管理員的身份來運(yùn)行命令提示符窗口渐行。我們在命令行下輸入如下命令（自備梯子）：
@powershell -NoProfile -ExecutionPolicy Bypass -Command "iex ((new-object net.webclient).DownloadString('https://chocolatey.org/install.ps1'))" && SET PATH=%PATH%;%ALLUSERSPROFILE%\\\\chocolatey\\\\bin
安裝比較慢轰坊，而且沒有進(jìn)度條，忍忍祟印。
2.安裝Node.js 和 Python2肴沫。注意，目前已知Node 7.1版本在windows上無法正常工作蕴忆，請注意避開這個版本颤芬！
choco install nodejs.install
choco install python2
3.npm是隨同Node.js一起安裝的包管理工具，能解決Node.js代碼部署上的很多問題套鹅。而Yarn是Facebook提供的替代npm的工具(Yarn vs npm: 功能上的差異)站蝠，可以加速node模塊的下載。React Native的命令行工具用于執(zhí)行創(chuàng)建卓鹿、初始化菱魔、更新項(xiàng)目、運(yùn)行打包服務(wù)（packager）等任務(wù)（自備梯子）吟孙。
npm install -g yarn react-native-cli
如果沒有合適的梯子澜倦，那就先設(shè)置下npm鏡像（如果不能識別npm命令，你可能需要重新開一個命令行窗口）
npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global
4.我們需要Java Development Kit [JDK] 1.8或更高版本杰妓。你可以在命令行中輸入以下來查看你當(dāng)前安裝的JDK版本(記得配置JAVA_HOME)肥隆。
javac -version
如果版本不合要求，則可以到 官網(wǎng)上下載稚失，或是使用包管理器來安裝栋艳。
choco install jdk8
5.安裝Android開發(fā)環(huán)境，基本功了句各，網(wǎng)上大把的教程吸占，這里就不準(zhǔn)備在介紹了晴叨。值得一提的是React Native對AndroidStudio的最低支持是2.0，并且確保ANDROID_HOME
環(huán)境變量正確地指向了你安裝的Android SDK的路徑矾屯。
6.進(jìn)行到現(xiàn)在基本已經(jīng)完成環(huán)境搭建了兼蕊，為了提升Java編譯速度，我還開啟了Gradle Daemon
(if not exist "%USERPROFILE%/.gradle" mkdir "%USERPROFILE%/.gradle") && (echo org.gradle.daemon=true >> "%USERPROFILE%/.gradle/gradle.properties")
自此我們的React Native環(huán)境搭建已經(jīng)完成件蚕，接下來可以新建一個項(xiàng)目來測試環(huán)境有沒有搭建成功孙技。
創(chuàng)建一個Hello RN
讓我們從Hello RN開始我們的React Native旅程：
react-native init HelloRN
漫長的等待結(jié)束后我們可以看到，如果項(xiàng)目創(chuàng)建完成排作，會自動執(zhí)行編譯和部署到手機(jī)上牵啦，需要在AndroidStudio打開并且模擬器或者真機(jī)的adb連接成功情況下才能查看。如果不會自動編譯部署就需要手動進(jìn)行如下命令進(jìn)行打開服務(wù)：
react-native start
默認(rèn)服務(wù)端口號是8081妄痪，如果想要修改端口號哈雏，有兩種方式：
- 開啟服務(wù)的時候直接指定端口號
react-native start --port XXXX
- 修改默認(rèn)端口配置文件，配置文件在項(xiàng)目根目錄下的node_modules\react-native\local-cli\server\server.js里面衫生，_server的default里面進(jìn)行端口號修改裳瘪。
如果忘了開AndroidStudio或者沒有連接模擬器 / 真機(jī)，沒關(guān)系罪针，我們可以手動進(jìn)行編譯部署：在AndroidStudio打開并且模擬器或者真機(jī)的adb連接成功情況下打開并編譯我們的Hello RN:
cd HelloRN
react-native run-android
如果你碰到了ERROR Watcher took too long to load的報(bào)錯彭羹，請嘗試將這個文件中的MAX_WAIT_TIME值改得更大一些 (文件在node_modules/react-native/目錄下)。
修改項(xiàng)目
如果你已經(jīng)成功運(yùn)行了項(xiàng)目泪酱，我們可以簡單嘗試玩一下：
- 使用你喜歡的文本編輯器打開index.android.js并隨便改上幾行
- 按兩下R鍵派殷，或是用Menu鍵打開開發(fā)者菜單，然后選擇 Reload JS 就可以看到你的最新修改西篓。
- 在終端下運(yùn)行以下命令可以看到你的應(yīng)用的日志愈腾。
adb logcat *:S ReactNative:V ReactNativeJS:V
開發(fā)IDE配置
雖然我們已經(jīng)成功跑起來了Hello RN但是開發(fā)沒有IDE怎么行憋活，我選擇的是AndroidStudio + WebStorm組合岂津。如果遇到gradle很久的問題，請直接移步問題三悦即。
AndroidStudio
直接Import項(xiàng)目根目錄下的android即可吮成。
WebStorm
WebStorm需要進(jìn)行一點(diǎn)點(diǎn)配置：
1.首先導(dǎo)入項(xiàng)目，直接Open整個根目錄：
2.WebStorm提示你需要切換JSX辜梳，直接切換Switch
3.進(jìn)行Edit Configurations粱甫，配置npm
4.運(yùn)行服務(wù)，然后通過WebStrom命令窗口部署即可
IDE環(huán)境裝載結(jié)束作瞄，可以開始無限火力了茶宵。
