React Native For Android 架構初探

版權聲明：本文由王少鳴原創文章，轉載請註明出處: 
文章原文連接：https://www.qcloud.com/community/article/171

來源：騰雲閣 https://www.qcloud.com/community

 

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全部類庫的描述）