react

RN框架

框架

• js層 該層提供了各種供開發(fā)者使用的組件以及一些工具庫(事件分發(fā)等)。
• C++層 主要處理java/OC與js的通信(JSBridge)以及執(zhí)行JavaScript(JS腳本引擎)。
• Native層(Object C/Java層) 主要包括UI渲染器、網(wǎng)絡通信等工具庫。根據(jù)不同操作系統(tǒng)有不同的實現(xiàn)。

UI

基于react框架(虛擬dom)

• 首先Js層通過jsx編寫的Virtual Dom來構(gòu)建Component
• Native層將其轉(zhuǎn)成真實DOM插入到原生 App 的頁面中。
• 當有變更，通過diff算法生成差異對象
• 最終由 Native層將差異對象應用到原生App的頁面元素上。

通信

基于JSCore實現(xiàn)js與java/oc交互

• 把JSX代碼解析成javaScript代碼
• 讀取JS文件，并利用利用JS腳本引擎執(zhí)行
• 返回一個數(shù)組，數(shù)組中會描述OC/Java對象，描述對象屬性和所需要執(zhí)行的方法，這樣就能讓這個對象設置屬性，并且調(diào)用方法。

優(yōu)缺點

優(yōu)勢

• 原生渲染->native體驗
• react方便前端開發(fā)
• hybrid技術(shù)跨平臺開發(fā),成本及難度低于原生
• 熱更新方便迭代

劣勢

• 支持的樣式是 CSS 的子集，會滿足不了 Web 開發(fā)者日漸增長的需求；
• 現(xiàn)有能力下還存在的一些不穩(wěn)定問題，比如性能、Bug等。
• 把渲染工作全都交由客戶端原生渲染，會有更接近原生的體驗，但實際上一些簡單的界面元素使用 Web 技術(shù)渲染完全能勝任

---

小程序底層框架

雙線程架構(gòu)

• 渲染層使用WebView渲染W(wǎng)XML+WXSS
• 邏輯層使用JsCore執(zhí)行js腳本
• webview線程隔離,一個界面一個webview線程
• 線程通信經(jīng)由微信native
• 邏輯層網(wǎng)絡請求經(jīng)由微信native轉(zhuǎn)發(fā)

原因

• UI渲染跟 JavaScript 的腳本執(zhí)行分別在兩個線程，從而避免一些邏輯任務搶占UI渲染的資源。
• 為了解決管控與安全問題，提供一個沙箱環(huán)境來運行開發(fā)者的JavaScript 代碼(邏輯層)，從而阻止開發(fā)者使用一些瀏覽器提供的，諸如跳轉(zhuǎn)頁面、操作DOM、動態(tài)執(zhí)行腳本的開放性接口。
• 渲染層和邏輯層的分離也給在不同的環(huán)境下(小程序與小程序開發(fā)者工具)運行提供了可能性

UI

1.頁面渲染

1.在渲染層，宿主環(huán)境會把WXML可以先轉(zhuǎn)成JS對象，然后再渲染出真正的Dom樹。

2.在邏輯層發(fā)生數(shù)據(jù)變更的時候，需要通過宿主環(huán)境提供的setData方法把數(shù)據(jù)從邏輯層傳遞到渲染層

3.對比前后差異，把差異應用在原來的Dom樹上，渲染出正確的UI界面

2.組件系統(tǒng)

Exparser組件框架+原生組件

原生組件渲染時

1.渲染層webview創(chuàng)建組件，插入到DOM樹中后計算布局(位置與寬高)

2.通過通信機制通知Native，Native會根據(jù)布局插入一塊原生區(qū)域并渲染

3.當webview得知位置或?qū)捀甙l(fā)生變化時，通知Native做相應的調(diào)整

通信

視圖層客戶端(大部分原生組件涉及)

• iOS 利用WKWebView 的提供 messageHandlers 特性
• 安卓則是往 WebView 的 window 對象注入一個原生方法，最終會封裝成 WeiXinJSBridge 這樣一個兼容層

邏輯層客戶端

• iOS平臺可以往JavaScripCore框架注入一個全局的原生方法
• 安卓方面則是跟渲染層一致的

開發(fā)者工具

• 開發(fā)者工具中，邏輯層實際上是使用一個隱藏著的標簽來模擬JSCore的。并通過將JSCore中不支持的BOM對象局部變量化，使得開發(fā)者無法在小程序代碼中正常使用BOM，從而避免不必要的錯誤
• 開發(fā)者工具底層維護著一個WebSocket服務器，用于在WebView與開發(fā)者工具之間建立可靠的消息通訊鏈路，使得接口調(diào)用，事件通知，數(shù)據(jù)交換能夠正常進行，從而使小程序模擬器成為一個統(tǒng)一的整體

優(yōu)缺點

優(yōu)勢:渲染層和邏輯層分離->渲染快、加載快

劣勢:線程通信延時,setData沒有diff操作,頻繁操作會有明顯性能問題

總結(jié)

相同點

• 都具有hybrid技術(shù)的優(yōu)點
• 接近原生的體驗
• 跨平臺開發(fā)
• 使用Web 相關(guān)技術(shù)框架來編寫業(yè)務代碼
• 各自實現(xiàn)了跨語言通訊方案完成Native(Java/Objective-c/…)端與JavaScript(小程序中為渲染層和邏輯層)的通訊

不同點

渲染

• 小程序使用瀏覽器內(nèi)核來渲染界面(小部分原生組件由客戶端參與渲染)，界面主要由成熟的Web技術(shù)渲染，輔之大量的接口提供豐富的客戶端原生能力
• RN是客戶端原生渲染

總結(jié)

以上是生活随笔為你收集整理的层和 native_React-Native与小程序的底层框架比较的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。