Facebook 在2015.9.15釋出了 React Native for Android，把JavaScript 開發技術擴充到了Android平台。React Native 讓開發者使用 JavaScript 和 React 編寫應用，利用相同的核心代碼就可以建立 基于Web，iOS 和 Android 平台的原生應用。本文将淺析Android React的架構及相關基礎知識。
環境搭建及調試相關知識參考官網文檔即可，本文不再贅述。
一.React架構分析
1.層次架構：
Java層：java層為邏輯入口，啟動C++層的javascript解析器，執行js通過c++傳遞來的渲染指令，進而建構NativeUI等。java層依賴于衆多優秀開源庫，在圖檔處理使用的是Fresco，網絡通信使用的是okhttp，當然還有衆多工具類，如Json解析工具jackson，Animation知名開源庫NineOldAndroids，小而全的底層工具類bolts等，在java層均封裝為Module。java層核心jar包是react-native.jar，封裝了衆多上層的interface，如Module，Registry，bridge等，下面會以App的啟用過程，完整分析java層的架構。
C++層：c++層最主要是封裝了JavaScriptCore，執行對js的解析。基于JavaScriptCore，Web開發者可以盡情使用ES6的新特性，如class、箭頭操作符等，而且 React Native運作在JavaScriptCore中的，完全不存在浏覽器相容的情況。Bridge橋接了java <> js 通信的核心接口。JSLoader主要是将來自assets目錄的或本地file加載到javascriptCore，再通過JSCExectutor解析js檔案。
Js層：主要處理事件分發及UI Layout，主要有以下幾個部件：
- Component：Js層通js/jsx編寫的Virtual Dom來建構Component或Module，Virtual DOM是DOM在記憶體中的一種輕量級表達方式，可以通過不同的渲染引擎生成不同平台下的UI。component的使用在 React 裡極為重要, 因為component的存在讓計算 DOM diff 更高效。
- Lifecycle&Data：React 元件通過内部的 state 變量控制生命周期及事件回調。如getInitialState方法用于定義元件初始狀态，後續元件可通過 this.state 屬性讀取該狀态。當事件觸發（或者主動調用setState方法更新資料）導緻狀态變化，this.setState 方法就修改狀态值，每次修改以後，自動調用 this.render 方法，重新渲染元件。
- Layout：React使用css-layout，css-layout使用javascript實作了flexbox ，不依賴于DOM，能編譯成Object-C或者Java，最終達到跨平台的展示目的，但暫時不支援css3，暫時隻能支援簡單的布局和普通的動畫。
2.Js與Java通信機制：
在Java層與Js層的bridge分别存有相同一份子產品配置表，Java與Js互相通信時，通過bridge裡的配置表将所調用子產品方法轉為{moduleID,methodID,args}的形式傳遞給處理層，處理層通過bridge的子產品配置表找到對應的方法執行，如果有callback，則回傳給調用層。在了解ReactAndroid APP啟動後，第三部分會詳細講這套機制。
二.從應用啟動到頁面加載完成分析
上圖為 Android React 加載過程的解析，下面先概要描述上層核心類及原理，再梳理核心的啟用步驟。
Core Class：
1.ReactInstanceManager：主要是用來建立及管理Catalyst的執行個體的上層接口，控制開發調試，生命周期與ReactRootView所在activity保持一緻。
2.ReactRootView：為啟動入口核心類，負責監聽及分發事件并重新渲染元素，App啟動後，其将作為App的root view。
3.CatalystInstance：頂級異步JSCAPI封裝類，提供Java與Js互通的環境，通過ReactBridge将Svr的Js Bundle傳送到Js引擎。
4.NativeModuleRegistry：Java層子產品系統資料庫，即暴露給Js的API集合。
5.JavascriptModuleRegistry：Js層子產品系統資料庫，負責将所有JavaScriptModule注冊到CatalystInstance，通過Java動态代理調用到Js。
6.CoreModulePackage：定義核心架構子產品，建立NativeModules&JsModules。
啟動過程的解析：
1.在ReactInstanceManager時會配置應用所需的java子產品與js子產品之後，通過ReactRootView的startReactApplication啟動APP。
2.在建立ReactInstanceManager同時會建立用于加載JsBundle的JSBundlerLoader，并傳遞給CatalystInstance。
3.CatalystInstance會建立Java子產品系統資料庫及Javascript子產品系統資料庫，并周遊執行個體化子產品。
4.CatalystInstance通過JSBundlerLoader向Node Svr請求Js Bundle，并傳遞給JSCJavaScriptExectutor，最後傳遞給javascriptCore，再通過ReactBridge通知ReactRootView完成渲染。
三.Js與Java通信機制
Java與Js之間的調用，是以兩邊存在兩邊存在同一份子產品配置表，最終均是将調用轉化為{moduleID, methodID，callbackID，args}，處理端在子產品配置表裡查找注冊的子產品與方法并調用。
Java -> Js ：Java通過系統資料庫調用到CatalystInstance執行個體，透過ReactBridge的jni，調用到Onload.cpp中的callFunction，最後通過javascriptCore，調用BatchedBridge.js，根據參數｛moduleID,methodID｝require相應Js子產品執行。詳細流程如下圖。
Js -> Java：JS不主動傳遞資料調用Java。在需要調用調Java子產品方法時，會把參數｛moduleID,methodID｝等資料存在MessageQueue中，等待Java的事件觸發，再把MessageQueue中的｛moduleID,methodID｝傳回給Java，再根據子產品系統資料庫找到相應子產品處理。詳細流程如下圖。
四.總結
React将UI分解成元件，廢棄了模闆，統一視圖邏輯标簽，使建構的視圖更容易擴充和維護，Vitual Dom更是其提高性能的亮點，React 中的Dom并不保證馬上影響真實的Dom，React會等到事件循環結束，利用diff算法，通過目前新Dom樹與之前的Dom樹作比較，計算出最小的步驟更新真實的DOM。
Android React的推出更使得利用相同的核心代碼就可以建立 Web，iOS 和 Android 平台的原生應用，但目前Android React的HelloWorld基礎庫将近7m，落地項目仍需要精簡，目前我們正在精簡中。當然，對于Andriod版本也有考驗，僅支援 Android 4.1 (API 16) 以上的版本（iOS 7.0），當然，在系統不支援情況下，H5可以作為後備方案。
我們後續會持續關注Android React的動态，向大家繼續推送更多關于Android React的文章。（底部有關于Android React所有類庫的描述）
文章來源公衆号:qq空間終端開發團隊(qzonemobiledev)
推薦閱讀
ReactNative For Android 項目實戰總結
ReactNative For Android 架構啟動核心路徑剖析
深刻了解 React (1) ——JSX和虛拟DOM
深入了解React(2) —— 資料流和事件原理
此文已由作者授權騰訊雲技術社群釋出，轉載請注明文章出處，擷取更多雲計算技術幹貨，可請前往騰訊雲技術社群
歡迎大家關注騰訊雲技術社群-部落格園官方首頁，我們将持續在部落格園為大家推薦技術精品文章哦~
傳播騰訊海量技術實踐經驗，www.qcloud.com
海量技術實踐經驗，盡在雲加社群！
https://cloud.tencent.com/developer