RN框架

框架

js層 該層提供了各種供開發者使用的元件以及一些工具庫（事件分發等）。C++層 主要處理java/OC與js的通訊（JSBridge）以及執行JavaScript（JS指令碼引擎）。Native層（Object C/Java層） 主要包括UI渲染器、網路通訊等工具庫。根據不同作業系統有不同的實現。

UI

基於react框架(虛擬dom)

首先Js層通過jsx編寫的Virtual Dom來構建ComponentNative層將其轉成真實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是客戶端原生渲染