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