這篇文章將為大家詳細(xì)講解有關(guān)React Native For Android 架構(gòu)的示例分析，文章內(nèi)容質(zhì)量較高，因此小編分享給大家做個(gè)參考，希望大家閱讀完這篇文章后對(duì)相關(guān)知識(shí)有一定的了解。

讓客戶滿意是我們工作的目標(biāo)，不斷超越客戶的期望值來(lái)自于我們對(duì)這個(gè)行業(yè)的熱愛(ài)。我們立志把好的技術(shù)通過(guò)有效、簡(jiǎn)單的方式提供給客戶，將通過(guò)不懈努力成為客戶在信息化領(lǐng)域值得信任、有價(jià)值的長(zhǎng)期合作伙伴，公司提供的服務(wù)項(xiàng)目有：空間域名、虛擬主機(jī)、營(yíng)銷軟件、網(wǎng)站建設(shè)、宜良網(wǎng)站維護(hù)、網(wǎng)站推廣。

Facebook 在2015.9.15發(fā)布了 React Native for Android，把JavaScript 開(kāi)發(fā)技術(shù)擴(kuò)展到了Android平臺(tái)。React Native 讓開(kāi)發(fā)者使用 JavaScript 和 React 編寫應(yīng)用，利用相同的核心代碼就可以創(chuàng)建 基于Web，iOS 和 Android 平臺(tái)的原生應(yīng)用。下面將淺析Android React的架構(gòu)及相關(guān)基礎(chǔ)知識(shí)。

一.React架構(gòu)分析

1.層次架構(gòu)：

Java層：java層為邏輯入口，啟動(dòng)C++層的javascript解析器，執(zhí)行js通過(guò)c++傳遞來(lái)的渲染指令，從而構(gòu)建NativeUI等。java層依賴于眾多優(yōu)秀開(kāi)源庫(kù)，在圖片處理使用的是Fresco，網(wǎng)絡(luò)通信使用的是okhttp，當(dāng)然還有眾多工具類，如Json解析工具jackson，Animation知名開(kāi)源庫(kù)NineOldAndroids，小而全的底層工具類bolts等，在java層均封裝為Module。java層核心jar包是react-native.jar，封裝了眾多上層的interface，如Module，Registry，bridge等，下面會(huì)以App的啟用過(guò)程，完整分析java層的架構(gòu)。

C++層：c++層最主要是封裝了JavaScriptCore，執(zhí)行對(duì)js的解析。基于JavaScriptCore，Web開(kāi)發(fā)者可以盡情使用ES6的新特性，如class、箭頭操作符等，而且 React Native運(yùn)行在JavaScriptCore中的，完全不存在瀏覽器兼容的情況。Bridge橋接了java <> js 通信的核心接口。JSLoader主要是將來(lái)自assets目錄的或本地file加載到j(luò)avascriptCore，再通過(guò)JSCExectutor解析js文件。

Js層：主要處理事件分發(fā)及UI Layout，主要有以下幾個(gè)部件：

• Component：Js層通js/jsx編寫的Virtual Dom來(lái)構(gòu)建Component或Module，Virtual DOM是DOM在內(nèi)存中的一種輕量級(jí)表達(dá)方式，可以通過(guò)不同的渲染引擎生成不同平臺(tái)下的UI。component的使用在 React 里極為重要, 因?yàn)閏omponent的存在讓計(jì)算 DOM diff 更高效。

• Lifecycle&Data：React 組件通過(guò)內(nèi)部的 state 變量控制生命周期及事件回調(diào)。如getInitialState方法用于定義組件初始狀態(tài)，后續(xù)組件可通過(guò) this.state 屬性讀取該狀態(tài)。當(dāng)事件觸發(fā)（或者主動(dòng)調(diào)用setState方法更新數(shù)據(jù)）導(dǎo)致?tīng)顟B(tài)變化，this.setState 方法就修改狀態(tài)值，每次修改以后，自動(dòng)調(diào)用 this.render 方法，重新渲染組件。

• Layout：React使用css-layout，css-layout使用javascript實(shí)現(xiàn)了flexbox ，不依賴于DOM，能編譯成Object-C或者Java，最終達(dá)到跨平臺(tái)的展示目的，但暫時(shí)不支持css3，暫時(shí)只能支持簡(jiǎn)單的布局和普通的動(dòng)畫。

2.Js與Java通信機(jī)制：

在Java層與Js層的bridge分別存有相同一份模塊配置表，Java與Js互相通信時(shí)，通過(guò)bridge里的配置表將所調(diào)用模塊方法轉(zhuǎn)為{moduleID,methodID,args}的形式傳遞給處理層，處理層通過(guò)bridge的模塊配置表找到對(duì)應(yīng)的方法執(zhí)行，如果有callback，則回傳給調(diào)用層。在了解ReactAndroid APP啟動(dòng)后，第三部分會(huì)詳細(xì)講這套機(jī)制。

二.從應(yīng)用啟動(dòng)到頁(yè)面加載完成分析

上圖為 Android React 加載過(guò)程的解析，下面先概要描述上層核心類及原理，再梳理核心的啟用步驟。
Core Class：
1.ReactInstanceManager：主要是用來(lái)創(chuàng)建及管理Catalyst的實(shí)例的上層接口，控制開(kāi)發(fā)調(diào)試，生命周期與ReactRootView所在activity保持一致。

2.ReactRootView：為啟動(dòng)入口核心類，負(fù)責(zé)監(jiān)聽(tīng)及分發(fā)事件并重新渲染元素，App啟動(dòng)后，其將作為App的root view。

3.CatalystInstance：頂級(jí)異步JSCAPI封裝類，提供Java與Js互通的環(huán)境，通過(guò)ReactBridge將Svr的Js Bundle傳送到Js引擎。

4.NativeModuleRegistry：Java層模塊注冊(cè)表，即暴露給Js的API集合。

5.JavascriptModuleRegistry：Js層模塊注冊(cè)表，負(fù)責(zé)將所有JavaScriptModule注冊(cè)到CatalystInstance，通過(guò)Java動(dòng)態(tài)代理調(diào)用到Js。

6.CoreModulePackage：定義核心框架模塊，創(chuàng)建NativeModules&JsModules。

啟動(dòng)過(guò)程的解析：

1.在ReactInstanceManager時(shí)會(huì)配置應(yīng)用所需的java模塊與js模塊之后，通過(guò)ReactRootView的startReactApplication啟動(dòng)APP。

2.在創(chuàng)建ReactInstanceManager同時(shí)會(huì)創(chuàng)建用于加載JsBundle的JSBundlerLoader，并傳遞給CatalystInstance。

3.CatalystInstance會(huì)創(chuàng)建Java模塊注冊(cè)表及Javascript模塊注冊(cè)表，并遍歷實(shí)例化模塊。

4.CatalystInstance通過(guò)JSBundlerLoader向Node Svr請(qǐng)求Js Bundle，并傳遞給JSCJavaScriptExectutor，最后傳遞給javascriptCore，再通過(guò)ReactBridge通知ReactRootView完成渲染。

三.Js與Java通信機(jī)制

Java與Js之間的調(diào)用，是以兩邊存在兩邊存在同一份模塊配置表，最終均是將調(diào)用轉(zhuǎn)化為{moduleID, methodID，callbackID，args}，處理端在模塊配置表里查找注冊(cè)的模塊與方法并調(diào)用。
Java -> Js ：Java通過(guò)注冊(cè)表調(diào)用到CatalystInstance實(shí)例，透過(guò)ReactBridge的jni，調(diào)用到Onload.cpp中的callFunction，最后通過(guò)javascriptCore，調(diào)用BatchedBridge.js，根據(jù)參數(shù)｛moduleID,methodID｝require相應(yīng)Js模塊執(zhí)行。詳細(xì)流程如下圖。

Js -> Java：JS不主動(dòng)傳遞數(shù)據(jù)調(diào)用Java。在需要調(diào)用調(diào)Java模塊方法時(shí)，會(huì)把參數(shù)｛moduleID,methodID｝等數(shù)據(jù)存在MessageQueue中，等待Java的事件觸發(fā)，再把MessageQueue中的｛moduleID,methodID｝返回給Java，再根據(jù)模塊注冊(cè)表找到相應(yīng)模塊處理。

React將UI分解成組件，廢棄了模板，統(tǒng)一視圖邏輯標(biāo)簽，使構(gòu)建的視圖更容易擴(kuò)展和維護(hù)，Vitual Dom更是其提高性能的亮點(diǎn)，React 中的Dom并不保證馬上影響真實(shí)的Dom，React會(huì)等到事件循環(huán)結(jié)束，利用diff算法，通過(guò)當(dāng)前新Dom樹(shù)與之前的Dom樹(shù)作比較，計(jì)算出最小的步驟更新真實(shí)的DOM。
Android React的推出更使得利用相同的核心代碼就可以創(chuàng)建 Web，iOS 和 Android 平臺(tái)的原生應(yīng)用，但目前Android React的HelloWorld基礎(chǔ)庫(kù)將近7m，落地項(xiàng)目仍需要精簡(jiǎn)，目前我們正在精簡(jiǎn)中。當(dāng)然，對(duì)于Andriod版本也有考驗(yàn)，僅支持 Android 4.1 (API 16) 以上的版本（iOS 7.0），當(dāng)然，在系統(tǒng)不支持情況下，H5可以作為后備方案。

關(guān)于React Native For Android 架構(gòu)的示例分析就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到。

網(wǎng)站題目：ReactNativeForAndroid架構(gòu)的示例分析
網(wǎng)站地址：http://aaarwkj.com/article40/iipjho.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供ChatGPT、軟件開(kāi)發(fā)、品牌網(wǎng)站建設(shè)、做網(wǎng)站、響應(yīng)式網(wǎng)站、虛擬主機(jī)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)