React � Native � 探索與實踐 � 

About � me � 

梁宵 � 

搜狗 � 技術經理 � 

•  前端架構設計與優化 � •  移動技術研究與實踐 � 

銀彈技術 � 

•  提高生產力 � •  降低開發成本 � 

—— � Fred � Brooks � 

移動開發技術的發展 � 

2006 � 

Symbian � WML � 

2009 � iOS � 

Android � 

2014 � HTML5 � 

React � Native � 動態化 � 

2015 � 

Hybrid � PhoneGap � 

2011 � 

2012 � 插件化 � 

移動開發技術對比 � 

考量因素 �  Native �  H5 �  React � Native � 

開發成本 �  iOS、Android � 成本相對較高 �  前端技術，成本相對較低 � 

可復用性 �  iOS、Android � 兩套代碼 � 

iOS、Android、Web � 壹套代碼 � 

iOS、Android � 組件化可復用 � 

更新機制 �  受平臺審核的限制 �  自由掌控 � 

壹般或較差 � 性能體驗 �  最佳 �  較好 � 

發展狀況 �  Apple、Google � 耕耘近10年 � 

W3C � 制定 � 發展較緩慢 � 

Facebook � 力推 � 快速發展中 � 

我們使用 � React � Native � 取得的效果 � 

節約成本 � 

1名前端工程師 � = � 

1名 � iOS � 工程師 � + � 

1名 � Android � 工程師 � 

平臺复用 � 

•  React � 開發無縫遷移 � •  iOS/Android/Web � 

性能體驗 � 

•  性能提升 � •  原生體驗 � 

快速迭代 � 

•  及時響應 � •  隨時發布 � 

主要內容 � 

實戰 � •  解決安裝痛點 � •  組件化思路 � •  平臺復用原則 � •  調試踩坑 � •  熱更新方案 � 

總結 � •  研發成果 � •  技術選型 � •  未來展望 � 

原理 � •  技術棧 � •  通信機制 � 

01 �  02 �  03 � 

原理 � •  技術棧 � 

•  通信機制 � 

01 � 

V8                                          JavaScriptCore JavaScript � engine � 

React � Native � 技術棧 � 

Virtual � DOM �  objects � in � memory � 

Web �  iOS �  Andriod �  platform � 

Flexbox �  layout � React � 

UI � components � 

JS � Bridge �  OC � Bridge �  � config �  � config � 

� Native �  �  � JS � 

JavaScript � 与 � Native � 通信機制 � 

How � are � you? � 

Not � bad. � 

朕安好，汝乎？ � 

英漢 � 翻譯 � 

漢英 � 翻譯 � 

實戰 � •  解決安裝痛點 � 

•  組件化思路 � 

•  平臺復用原則 � •  調試踩坑 � 

•  熱更新方案 � 

02 � 

$ � npm � install � -g � react-native-cli � 

$ � react-native � init � AwesomeProject � 

解決安裝痛點 � 

registry.npm.sogou-inc.com � 

（cnpm � / � sinopia） � 

周末 � 

增量同步 � 

加快安裝速度 �  �  �  �  �  �  �  �  �  �  �  �  �  �  �  �  � 工程化基礎，發布私有模塊 � √ √

安裝緩慢 � 

registry.npmjs.org � RN � Project � 

組件化思路 � 

•  基礎組件（UIExplorer） � 

•  工具組件封裝 � 

<Empty> � 

<Loading> � 

<DBItem>

<ListView> �  <Text> <Text>

<Text>

<Text>

<Text>

<Text>

<Text>

•  業務組件封裝 � 

•  原生組件封裝 � 

A

B

C

D

•  開源社區（JSCoach） � E

Main  

U;l  

Home  

Contacts  

fetch  

pixel  

平臺復用原則 � 

Menu1 �  �  �  �  �  �  � Menu2 �  �  �  �  �  �  � Menu3 � 

Menu1 �  �  �  �  �  �  � Menu2 �  �  �  �  �  �  � Menu3 � 

iOS

Android � 

1.  復用組件邏輯，區分組件樣式 �  �  �  � Tab.js � 

2.  分離復雜組件差異 �  �  �  � Tab.ios.js �  �  � Tab.android.js �  � 不追求完全抹平差異 � 

iOS �  Android � 70%-85% � 

代碼復用率 � 

調試踩坑 � 

1.  恢复浏览器实现，关闭 � 

Chrome � 安全设置 � 

2.  使用 � Fiddler � 做代理 � 

方案 � 

Fetch � 請求是 � polyfill � 實現 � 

Network � 無法查看 � Fetch � 請求 �  � 01 � 

技巧 � 

1.  Reload � 

2.  Live � Reload � 

3.  Hot � Reload � 

調試深層次頁面，總是從啟動頁刷新？ � 02 � 

調試踩坑 � 

1.  Android：Dev � Setting � 

2.  iOS：react-native-

debug-server-host � 

方案 � 

開發 � mock � server � 

真機調試時要頻繁修改 � host � 03 � 

如何實現前後端分離開發 � 05 � 

1.  http-server � 

2.  mockjs � 方案 � 

依賴 � Window.atob，真機無瀏覽器環境 � 

啟示 � 

1.  JS � 庫無環境依賴 � 

2.  封裝 � Native � 庫 � 

第三方庫，Debug � OK，真機環境 � Crash � 04 � 

熱更新方案 � 

main.jsbundle � 

Native � 

Bundle � Server � 

How � to � Update？ � 

•  設計 � Bundle � Server � 

•  提供版本查詢服務 � 

•  設計客戶端交互 � 

•  制定更新策略（全量 � / � 增量） � 

方案 � 

CodePush � 

AppHub � 雲服務 � 

總結 � •  研發成果 � 

•  技術選型 � 

•  未來展望 � 

03 � 

移動CRM � 

跟蹤業務指標 � 

處理待辦事項 � 

數據分析 � 

KPI � 

移動DBA � 

數據庫信息檢索 � 

數據庫狀態監控 � 

數據庫授權操作 � 

移動項目技術選型 � 

Native � 遊戲，炫酷交互 � 

H5 � 展示型，分享型 � 

Hybrid � 復雜業務應用 � 

M � 站復用 � 

React � Native � 體驗和效率平衡 � 

創新型產品 � 

未來展望 � 

135  117   125   104  

213   203  172  

221   218  

266  

222  

5   6   7   8   9   10   11   12   1   2   3  

每月 � Pull � Request � 數量 � 

Android  Release

Microsoft � Windows � 生態系統 � PC � / � Phone � / � Xbox

Hybrid � 平台 � SmartTV � / � 可穿戴設備 � 

Samsung � 

Facebook � 

•  剛剛開始 � 1％，將持續投入 � •  性能提升 � •  開發性能工具：CPU � 與內存分析 � •  快速響應與修復缺陷 � •  開發新功能 � 

GitHub  Stars                                                      36000  +  GitHub  Most  Stars  Ranking    15  Third-­‐party  Components            8000+

截止 � 2016.8.15 � 

結束語 � 

About � React � Native � 向銀彈技術邁進的壹次成功嘗試 � 

For � FEer � 擁抱變化，不進則退 � 

For � All � 學點 � JavaScript � 總是不會錯的 � 

Thank � you �