React Native For Android 架構初探

来源:http://www.cnblogs.com/qcloud1001/archive/2017/03/24/6601622.html
-Advertisement-
Play Games

Facebook 在2015.9.15發佈了 React Native for Android,把JavaScript 開發技術擴展到了Android平臺。React Native 讓開發者使用 JavaScript 和 React 編寫應用,利用相同的核心代碼就可以創建 基於Web,iOS 和 A... ...


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

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • (一)Eclipse中的快捷鍵: ctrl+shift+f自動整理選擇的java代碼 alt+/ 生成無參構造器或者提升信息 alt+shift+s+o 生成帶參構造 ctrl+shift+o快速導入包 alt+shift+s+r tab+enter-->shift+tab+enter 快速生成ge ...
  • http://jingyan.baidu.com/article/e8cdb32b420ce737052badc4.html ...
  • JAVA 類總結 最近看了遍java內部類相關的一些內容,做一些總結。與個人博客 zhiheng.me 同步發佈,標題: JAVA 類總結。 頂級類與嵌套類 定義在某個類(或介面,下同)內部的類,稱為嵌套類(nested class),相應的,其所在的類稱之為該類的外圍類(enclosing cla ...
  • 一、環境搭建: 1、需要用的包: JUnit4.7:http://files.cnblogs.com/files/ShawnYang/junit4.7.zip hamcrest-1.2:http://files.cnblogs.com/files/ShawnYang/hamcrest-1.2.zip ...
  • 當你開發一個客戶端應用程式的時候,往往一個單頁會包含很多子模塊,在不同的平臺下,這些子模塊又被叫成子View(視圖),或者子Component(組件)。越是複雜的頁面,被切割出來的子模塊就越多,子模塊越多,彼此之間需要同步的數據和狀態就越頻繁,即易產生耦合。那麼如何保證在複雜業務情況下,各個子模塊之 ...
  • 一、基本概述 單件模式:確保一個類只有一個實例,並提供一個全局訪問點。 解析如下: 1)首先,該Singleton的構造函數必須是私有的,以保證客戶程式不會通過new()操作產生一個實例,達到實現單例的目的; 2)因為靜態變數的生命周期跟整個應用程式的生命周期是一樣的,所以可以定義一個私有的靜態全局 ...
  • 系統可用率 多級緩存 動態分組切換 DB物理隔離 服務分組隔離 跨機房隔離 漏斗模型 DB限流 系統一般可以分為前端應用系統和後端資料庫系統,前端應用系統實施分散式集群部署技術上是... ...
  • MVVM回顧 經過上一篇文章的介紹,相信你對MVVM的設計思想有所瞭解。MVVM的核心思想就是解耦,View與ViewModel應該感受不到彼此的存在。 View只關心怎樣渲染,而ViewModel只關心怎麼處理邏輯,整個架構由數據進行驅動。不僅View與ViewModel彼此解耦,ViewMode ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...