层和 native_React-Native与小程序的底层框架比较
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)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: core和node开发小程序_成都小程序
- 下一篇: 文本编辑器_国外程序员最爱的5种文本编辑