基於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

React Native在特贊的應用與實踐