RN框架
框架
- js層 該層提供了各種供開(kāi)發(fā)者使用的組件以及一些工具庫（事件分發(fā)等）。
- C 層 主要處理java/OC與js的通信（JSBridge）以及執行JavaScript（JS腳本引擎）。
- Native層（Object C/Java層） 主要包括UI渲染器、網(wǎng)絡(luò )通信等工具庫。根據不同操作系統有不同的實(shí)現。
UI
基于react框架(虛擬dom)
- 首先Js層通過(guò)jsx編寫(xiě)的Virtual Dom來(lái)構建Component
- Native層將其轉成真實(shí)DOM插入到原生 App 的頁(yè)面中。
- 當有變更，通過(guò)diff算法生成差異對象
- 最終由 Native層將差異對象應用到原生App的頁(yè)面元素上。
通信
基于JSCore實(shí)現js與java/oc交互
- 把JSX代碼解析成javaScript代碼
- 返回一個(gè)數組，數組中會(huì )描述OC/Java對象，描述對象屬性和所需要執行的方法，這樣就能讓這個(gè)對象設置屬性，并且調用方法。
優(yōu)缺點(diǎn)
優(yōu)勢
- 原生渲染->native體驗
- react方便前端開(kāi)發(fā)
- hybrid技術(shù)跨平臺開(kāi)發(fā),成本及難度低于原生
- 熱更新方便迭代
劣勢
- 支持的樣式是 CSS 的子集，會(huì )滿(mǎn)足不了 Web 開(kāi)發(fā)者日漸增長(cháng)的需求；
- 現有能力下還存在的一些不穩定問(wèn)題，比如性能、Bug等。
- 把渲染工作全都交由客戶(hù)端原生渲染，會(huì )有更接近原生的體驗，但實(shí)際上一些簡(jiǎn)單的界面元素使用 Web 技術(shù)渲染完全能勝任
小程序底層框架
雙線(xiàn)程架構
- 渲染層使用WebView渲染W(wǎng)XML WXSS
- 邏輯層使用JsCore執行js腳本
- webview線(xiàn)程隔離,一個(gè)界面一個(gè)webview線(xiàn)程
- 線(xiàn)程通信經(jīng)由微信native
- 邏輯層網(wǎng)絡(luò )請求經(jīng)由微信native轉發(fā)
原因
- UI渲染跟 JavaScript 的腳本執行分別在兩個(gè)線(xiàn)程，從而避免一些邏輯任務(wù)搶占UI渲染的資源。
- 為了解決管控與安全問(wèn)題，提供一個(gè)沙箱環(huán)境來(lái)運行開(kāi)發(fā)者的JavaScript 代碼（邏輯層），從而阻止開(kāi)發(fā)者使用一些瀏覽器提供的，諸如跳轉頁(yè)面、操作DOM、動(dòng)態(tài)執行腳本的開(kāi)放性接口。
- 渲染層和邏輯層的分離也給在不同的環(huán)境下（小程序與小程序開(kāi)發(fā)者工具）運行提供了可能性
UI
1.頁(yè)面渲染
1.在渲染層，宿主環(huán)境會(huì )把WXML可以先轉成JS對象，然后再渲染出真正的Dom樹(shù)。
2.在邏輯層發(fā)生數據變更的時(shí)候，需要通過(guò)宿主環(huán)境提供的setData方法把數據從邏輯層傳遞到渲染層
3.對比前后差異，把差異應用在原來(lái)的Dom樹(shù)上，渲染出正確的UI界面
2.組件系統
Exparser組件框架 原生組件
原生組件渲染時(shí)
1.渲染層webview創(chuàng )建組件，插入到DOM樹(shù)中后計算布局(位置與寬高)
2.通過(guò)通信機制通知Native，Native會(huì )根據布局插入一塊原生區域并渲染
3.當webview得知位置或寬高發(fā)生變化時(shí)，通知Native做相應的調整
通信
視圖層<->客戶(hù)端(大部分原生組件涉及)
- iOS 利用WKWebView 的提供 messageHandlers 特性
- 安卓則是往 WebView 的 window 對象注入一個(gè)原生方法，最終會(huì )封裝成 WeiXinJSBridge 這樣一個(gè)兼容層
邏輯層<->客戶(hù)端
- iOS平臺可以往JavaScripCore框架注入一個(gè)全局的原生方法
- 安卓方面則是跟渲染層一致的
開(kāi)發(fā)者工具
- 開(kāi)發(fā)者工具中，邏輯層實(shí)際上是使用一個(gè)隱藏著(zhù)的標簽來(lái)模擬JSCore的。并通過(guò)將JSCore中不支持的BOM對象局部變量化，使得開(kāi)發(fā)者無(wú)法在小程序代碼中正常使用BOM，從而避免不必要的錯誤
- 開(kāi)發(fā)者工具底層維護著(zhù)一個(gè)WebSocket服務(wù)器，用于在WebView與開(kāi)發(fā)者工具之間建立可靠的消息通訊鏈路，使得接口調用，事件通知，數據交換能夠正常進(jìn)行，從而使小程序模擬器成為一個(gè)統一的整體
優(yōu)缺點(diǎn)
優(yōu)勢:渲染層和邏輯層分離->渲染快、加載快
劣勢:線(xiàn)程通信延時(shí),setData沒(méi)有diff操作,頻繁操作會(huì )有明顯性能問(wèn)題
總結
相同點(diǎn)
- 都具有hybrid技術(shù)的優(yōu)點(diǎn)
- 接近原生的體驗
- 跨平臺開(kāi)發(fā)
- 使用Web 相關(guān)技術(shù)框架來(lái)編寫(xiě)業(yè)務(wù)代碼
- 各自實(shí)現了跨語(yǔ)言通訊方案完成Native(Java/Objective-c/…)端與JavaScript(小程序中為渲染層和邏輯層)的通訊
不同點(diǎn)
渲染
- 小程序使用瀏覽器內核來(lái)渲染界面(小部分原生組件由客戶(hù)端參與渲染)，界面主要由成熟的Web技術(shù)渲染，輔之大量的接口提供豐富的客戶(hù)端原生能力
- RN是客戶(hù)端原生渲染
