小程序

已知，網(wǎng)頁(yè)是單線程工作的，即是渲染進(jìn)程在工作時(shí)，假如 JavaScript 引擎 執(zhí)行 JavaScript 代碼時(shí)，渲染進(jìn)程會(huì)將控制權(quán)交予 JavaScript 引擎，不會(huì)兩個(gè)進(jìn)程同時(shí)在工作。因?yàn)椋?code>JavaScript 引擎 可能會(huì)操作DOM，所以，為了排除沖突，確保渲染正確，網(wǎng)頁(yè)是單線程工作的。

但是，小程序，是雙線程工作的。它分為邏輯層跟視圖層。他們通過(guò)線程通信，共同完成視圖的完整呈現(xiàn)和交互。此外，小程序不提供操作視圖層的元素的方法，所以它無(wú)法像網(wǎng)頁(yè)那樣用 JavaScript 去操作 DOM 元素去實(shí)現(xiàn)更新。

引自：小程序的運(yùn)行環(huán)境

各平臺(tái)腳本執(zhí)行環(huán)境以及用于渲染非原生組件的環(huán)境是各不相同的：

• 在 iOS 上，小程序邏輯層的 javascript 代碼運(yùn)行在 JavaScriptCore 中，視圖層是由 WKWebView 來(lái)渲染的，環(huán)境有 iOS 12、iOS 13 等；

• 在 Android 上，小程序邏輯層的 javascript 代碼運(yùn)行在 V8 中，視圖層是由自研 XWeb 引擎基于 Mobile Chrome 內(nèi)核來(lái)渲染的；

• 在 開(kāi)發(fā)工具上，小程序邏輯層的 javascript 代碼是運(yùn)行在 NW.js 中，視圖層是由 Chromium Webview 來(lái)渲染的。

視圖層的實(shí)現(xiàn)是 webView ，但這是一個(gè)定制 webView ，它不能運(yùn)行 JavaScript ，且內(nèi)容也不是 html 。

那么，小程序?yàn)槭裁匆獙?shí)現(xiàn)雙線程工作呢？官方回答如下：

• 快速的加載
• 更強(qiáng)大的能力
• 原生的體驗(yàn)
• 易用且安全的微信數(shù)據(jù)開(kāi)放
• 高效和簡(jiǎn)單的開(kāi)發(fā)

但，這個(gè)見(jiàn)仁見(jiàn)智吧。

Mpvue

在小程序整出一套 wxml wxss wxs 的組合拳時(shí)，其實(shí)是在給開(kāi)發(fā)者增加負(fù)擔(dān)。那有沒(méi)有一種方案，是用自己熟悉的框架的語(yǔ)法去寫，但是產(chǎn)出卻是小程序呢？辦法總是有的，Mpvue 先行一步。其實(shí) vue runtime 并不涉及 DOM 的修改，它就是一整套的 JavaScript 方法，可以愉快地運(yùn)行在小程序的邏輯層。所以 Mpvue 復(fù)制了一套 Vue 庫(kù)出來(lái)改造一下去實(shí)現(xiàn)這個(gè)偉大的目標(biāo)。

實(shí)現(xiàn)原理如下：

// 這是 Vue 的實(shí)現(xiàn)
// template -> AST -> render -> vnode -> patch -> DOM
//                      ^					
//                     /
//                    /
// js ---------> new Vue()

// 這是 Mpvue
// template -> AST -> render -> vnode -> patch -/-> DOM
//                      ^		   |
//                     /		   |
//                    /			   V
// js ---------> new Vue()	    ---> setData
//                   \		   /
//                    \-> page() /
// 												
復(fù)制代碼

在創(chuàng)建 Vue 示例的時(shí)候，調(diào)用 page 方法，經(jīng)過(guò) Vue 處理后并不patch到DOM去渲染，而是通過(guò) setData 去更新小程序?qū)嵗系臄?shù)據(jù)，從而更新小程序的視圖（因?yàn)樾〕绦蚍至诉壿媽雍鸵晥D層，所以小程序并沒(méi)有提供操作小程序節(jié)點(diǎn)的 API 方法）。

引自：【2萬(wàn)字長(zhǎng)文】深入淺出主流的幾款小程序跨端框架原理

小程序平臺(tái)還規(guī)定，要在小程序頁(yè)面中調(diào)用 Page() 方法生成一個(gè) page 實(shí)例， Page() 方法是小程序官方提供的 API。（解答為什么需要調(diào)用 page 方法）

此外，Vue模板轉(zhuǎn)小程序模板，生命周期對(duì)齊，事件處理等暫且不說(shuō)。大體的實(shí)現(xiàn)原理就這些。

總結(jié)：

類Vue的小程序框架實(shí)現(xiàn)原理關(guān)鍵點(diǎn)：

1. 實(shí)例化時(shí)，調(diào)用 page 方法
2. 更改Vue流程，使用 setData 來(lái)替代 DOM 操作
3. Vue模板轉(zhuǎn)小程序模板，生命周期對(duì)齊，事件處理等

Taro 1 & 2

React 比 Vue 難處理的點(diǎn)在于，React 開(kāi)發(fā)是非模板化的，使用了 jsx ，導(dǎo)致它太靈活了，不好圈定范圍去轉(zhuǎn)化為小程序的模板（我們知道模板轉(zhuǎn)化主要是靠AST來(lái)完成的，有限的范圍可以更好地處理）。

但 Taro 還是啃下了這塊硬骨頭，當(dāng)然，不是那么容易和愉快。限制很多，開(kāi)發(fā)只是類 React 。

Taro 通過(guò)窮舉法將類 React 的組件和元素，通過(guò)AST轉(zhuǎn)化為小程序的模板，加上不管是類Vue還是類React的小程序框架都要做的事情：生命周期對(duì)齊，事件處理等，就這樣，啃下了這塊硬骨頭。

總結(jié)：

主要是靠 AST 窮舉完成模板轉(zhuǎn)化（核心），除了擁有了 React 開(kāi)發(fā)時(shí)的爽度外，React 的其他優(yōu)勢(shì)無(wú)法利用。但無(wú)論如何也是值得鼓勵(lì)和稱贊。

Remax & Taro Next

如同 Mpvue 先行者，Remax 在 React 類小程序框架也邁出了重要的一步。

Remax 的口號(hào)是，使用真正的、完整的 React 來(lái)開(kāi)發(fā)小程序 。

它是怎么達(dá)成這個(gè)目標(biāo)的呢？請(qǐng)看下面的流程分析：

// Remax 分析
// ----------------------------------------------------
// --------------| react reconciliation |--------------
// -------------------------|--------------------------
// -------------------------V--------------------------
// ---------------| vNode and Effect List |------------
// -------------------------|--------------------------
// -------------------------V--------------------------
// ----------------| Remax vNode (json) |--------------
// -------------------------|--------------------------
// -------------------------V--------------------------
// --------------| miniProgrom setData |---------------
// -------------------------|--------------------------
// -------------------------V--------------------------
// ----------------| miniProgrom data |----------------
// -------------------------|--------------------------
// -------------------------V--------------------------
// -------------------| base.wxml |--------------------
// -------------------------|--------------------------
// ---------------------( 遞歸遍歷 )---------------------
// -------------------------|--------------------------
// -------------------------V--------------------------
// --------------------| 頁(yè)面 / 組件 |-------------------
復(fù)制代碼

Remax 可以分為兩個(gè)部分，一個(gè)是 react runtime ，包含 react 的除 render 之外的核心內(nèi)容；另一部分就是 Remax 實(shí)現(xiàn)的渲染器。

引自：Remax 實(shí)現(xiàn)原理

Remax 的運(yùn)行時(shí)本質(zhì)是一個(gè)通過(guò) react-reconciler 實(shí)現(xiàn)的一個(gè)小程序端的渲染器。

直白點(diǎn)，**Remax的核心大約是 React reconciliation + Remax 渲染器 + base.wxml **。

解釋一下這：

1. React reconciliation 負(fù)責(zé)更新節(jié)點(diǎn)和更新時(shí)機(jī)，產(chǎn)出是 vnode；
2. Remax 渲染器，將以上產(chǎn)出的 vnode 從原本應(yīng)該渲染為DOM 的操作改為生成/更新自身 vnode 樹(shù)（此 vnode 跟 react 的vnode 不同，是 Remax 創(chuàng)建的 vnode），產(chǎn)出是 Remax vnode ；
3. 調(diào)用 setData 方法，讓小程序更新數(shù)據(jù)，從而將 Remax vnode 傳遞到小程序中，然后小程序根據(jù) data 和base.wxml遞歸渲染出頁(yè)面來(lái)。

總結(jié)：

Remax 和 Taro Next 實(shí)現(xiàn)思路是一致的，真正地讓 React 運(yùn)行時(shí)在小程序的邏輯層跑起來(lái)了，從而擁有比較完整的React開(kāi)發(fā)體驗(yàn)。

實(shí)現(xiàn)的基礎(chǔ)條件是，小程序的 template 支持動(dòng)態(tài)遞歸渲染。

實(shí)現(xiàn)核心在于，Remax 渲染器將 React 運(yùn)行時(shí)產(chǎn)出的 vnode 轉(zhuǎn)化為 Remax vnode，從而擁有一顆完整的節(jié)點(diǎn)樹(shù)。然后數(shù)據(jù) + template 動(dòng)態(tài)遞歸渲染，渲染出頁(yè)面來(lái)。

類 Vue 小程序框架和擁有完整體驗(yàn)的類 React 小程序框架的實(shí)現(xiàn)思路對(duì)比

從上文可以看到，類 Vue 小程序框架的實(shí)現(xiàn)思路是 **Vue 運(yùn)行時(shí) + AST 轉(zhuǎn)化小程序模板 **。

而擁有完整體驗(yàn)的類 React 小程序框架實(shí)現(xiàn)的思路是 React 運(yùn)行時(shí) + 運(yùn)行在內(nèi)存中的由各個(gè)框架維護(hù)的 vnode 樹(shù)（非 VDOM 的 vnode） + 靜態(tài)模板。

看起來(lái)，類 Vue 小程序框架的實(shí)現(xiàn)思路更勝一層，但其需要對(duì)Vue框架進(jìn)行一定的改造，所以會(huì)比較依賴 Vue。

而擁有完整體驗(yàn)的類 React 小程序框架，有 React 的完整開(kāi)發(fā)體驗(yàn)（這也很重要），但無(wú)法利用 React 的調(diào)度，是遞歸地渲染（這和 React 以前無(wú)調(diào)度版本很相似）。且有一個(gè)必要的基礎(chǔ)條件，就是微信小程序的 template 支持動(dòng)態(tài)遞歸（這是 Remax 的地基）。