React Native在特讚的應用與實踐

基於React技術棧構建開發前端項目，並使用React Native開發特贊移動APP

目前正在使用Node.js開發和維護特贊服務網關，但願Node.js可以在更輕量級的微服務架構中發揮重要做用

課程介紹：

React Native在特讚的應用與實踐

課程摘要：

APP開發技術的選型

React Native開發過程當中的主要問題

異常監控、熱更新與RN性能優化

距離過年還有一個月不到，產品忽然提出一個需求說，我們要不作一個IOS應用吧，快過年了，給設計師一個新禮物吧。當時個人心裏其它是拒絕的，因而我面帶微笑着說：「好啊，咱們儘可能吧。。。。。。」

IOS工程師是不期望了。

因而，開始調研蘋果應用的審覈發佈流程，熱更新，具體的實現細節。爲了遇上蘋果的審覈，兩週的時候，咱們發佈了咱們的第一個初始版本，在接下來的2周時間，咱們完成了剩餘全部功能的開發，並經過熱更新發布到了線上。咱們用了不到1個月的時間完成了特贊原生IOS的開發

使用React的話，咱們是經過聲明式的方式定義組件，然後經過虛擬DOM在瀏覽器環境下，進行UI的渲染和數據的加載。

而React的使用已經應用到了PC頁面，移動頁面，甚至服務端渲染等場景下。

隨着React Native的推出，咱們甚至經過React更是擁有了開發IOS和Android應用的能力。記住，這是真的，真的原生應用！！

Learn once,write anywhere. React官方的slogan

爲何選擇RN：

首先呢，剛纔提到過，經過 RN開發的應用，只要優化得當，是能夠得到無限接近Native應用的交互操做體驗的，因此說，手感很是絲滑，讓人愛不釋手

而後就是，RN開發出來的應用，它的功能和性能都是很不錯的。

還有一點，對前端開發人員來講，真的是一個福音，那就是，RN能夠直接經過Chrome進行調試，分分鐘讓你欲罷不能

另外一方面，由於咱們團隊自己就是React技術棧，因此選擇RN是一個很天然的過程。適應的過程也很是的短暫。最後，也是影響咱們抉擇的一個因素就是，RN除了能夠像WEB同樣進行開發，還能夠擁有WEB同樣的發佈能力，只要經過熱更新就能夠簡單作到。

使用前：調試、路由、數據管理、組件選型

使用中：動畫、緩存、手勢、支付

使用後：推送、異常監控、熱更新、性能優化

本次的分享，主要圍繞RN開發先後咱們涉及的方方面面進行探討。包括開發前咱們會重點考慮的調試、路由、數據管理組件選型等問題；

開發過程當中，咱們則是要解決動畫、緩存、手勢、支付等問題

業務功能開發完畢以後，則要關注消息推送、異常監控、熱更新、性能優化這樣更加劇要的問題

調試過程當中遇到的坑：

坑1：必須在第一次reload以後 才能進行斷點調試

坑2：必須把chrome調試控制檯所在 tab放在最前面，不然操做模擬器內的界面將會嚴重卡頓

當調試工做可以經過Chrome的DevTools進行時，一切都彷佛變得簡單起來了。

咱們能夠進行熟悉的斷點調試，變量審查；

咱們還能夠結合React、Redux的Chrome插件直觀的查看組件結構和整個工程的數據變化

 

路由：push-->project-->chatDetail-->chatList-->home(Top)-->pop

好比最初的咱們處於home頁，接着咱們push到對話列表頁，再push到對話詳情、項目列表頁，而後咱們又能夠pop回聖誕詳情頁。

固然實際狀況能夠還要複雜一點，好比往回跳多個頁面，跳回到指定頁面等等。這一切都是一個堆棧來進行操做的

因此這一切咱們均可以用相似下面的一千代碼來實現：
this.props.navigator.push({

name:'chat',
params:{

  projectId,designerId,projectName

}

});//是的，開發使用的是JS，底層仍然是基於具體的平臺

經過Navigator組件對象的引用，咱們能夠跳轉到對話列表（chat）頁面，與此同時，咱們帶上項目ID，設計師ID等參數，這些參數咱們在chat頁面中很容易得到。

React在WEB上能夠經過React-router來管理路由，不過在RN中，路由管理變得更簡單。經過Navigatro(或者最新的react-navigation)組件，咱們把全部的Scene、場景、或者頁面經過一個堆棧管理起來，頁面的操做就是簡單的出棧入棧操做

 

Redux+AysncStorage