Vue template 對(duì)比 JSX

我認(rèn)為這只是「解決同一個(gè)問(wèn)題的不同實(shí)現(xiàn)思路」，完全可以由開發(fā)者的個(gè)人偏好來(lái)決定。退一步講，Vue 中也不是不可以使用 JSX;同樣，JSX 也不是無(wú)法實(shí)現(xiàn) Vue template 的特性，比如模版指令，我們完全可以從工程化的角度實(shí)現(xiàn)：

當(dāng)然，這需要我們基于抽象語(yǔ)法樹 AST，實(shí)現(xiàn)解析模版指令的插件，思路也很簡(jiǎn)單：

Vue 和 React 實(shí)現(xiàn)復(fù)用

這個(gè)方面我覺得也沒有復(fù)述的必要，因?yàn)樵趯?shí)現(xiàn)復(fù)用的道路上，Vue 和 React 都是經(jīng)歷了：Mixin -> Hoc(Vue 比較少用，模版套模版，有點(diǎn)奇怪了)-> render prop(Vue 有類似思想的實(shí)現(xiàn)為 slot) -> hooks(Vue3.0 function based API)

在這方面，UI 層面的復(fù)用本身不是問(wèn)題：因?yàn)榻M件化本身就是天然可組合的。重要的是邏輯復(fù)用：hooks 和 Vue3.0 function based API 的設(shè)計(jì)無(wú)疑是***進(jìn)的，它將邏輯復(fù)用和組件表達(dá)在一定程度上解耦，避免了“面向生命周期編程”的困擾。順便達(dá)到了更好的組合性和 TS 友好性。

真正想深入的是這些方面：

• Vue 和 React 的核心差異，以及核心差異對(duì)后續(xù)設(shè)計(jì)產(chǎn)生的“不可逆”影響
• Vue 和 React 在 API 設(shè)計(jì)風(fēng)格和哲學(xué)理念(甚至作者個(gè)人魅力)上的不同
• Vue 和 React 在工程化預(yù)編譯構(gòu)建階段，AOT 和 JIT 優(yōu)化的本質(zhì)差異和設(shè)計(jì)

***點(diǎn)

首先我想明確一下：用 Evan you 的話說(shuō)：雙向綁定是對(duì)表單來(lái)說(shuō)的，表單的雙向綁定，說(shuō)到底不過(guò)是 value 的單向綁定 + onChange 事件偵聽的一個(gè)語(yǔ)法糖。這個(gè)并不是 React 和 Vue 在理念上真正的差別體現(xiàn)。同時(shí)，單向數(shù)據(jù)流不是 Vue 或者 React 的差別，而是 Vue 和 React 的共同默契選擇。單向數(shù)據(jù)流核心是在于避免組件的自身(未來(lái)可復(fù)用)狀態(tài)設(shè)計(jì)，它強(qiáng)調(diào)把 state hoist 出來(lái)進(jìn)行集中管理。

而真正我認(rèn)為 React 和 Vue 在理念上的差別，且對(duì)后續(xù)設(shè)計(jì)實(shí)現(xiàn)產(chǎn)生不可逆影響的是：Vue 進(jìn)行數(shù)據(jù)攔截/代理，它對(duì)偵測(cè)數(shù)據(jù)的變化更敏感、更精確，也間接對(duì)一些后續(xù)實(shí)現(xiàn)(比如 hooks，function based API)提供了很大的便利。這個(gè)我們后面會(huì)提到;React 推崇函數(shù)式，它直接進(jìn)行局部重新刷新(或者重新渲染)，這樣更粗暴，但是更簡(jiǎn)單，讓我們的開發(fā)回到了上古時(shí)代，就是刷新唄，前端開發(fā)非常簡(jiǎn)單。但是 React 并不知道什么時(shí)候“應(yīng)該去刷新”，觸發(fā)局部重新變化是由開發(fā)者手動(dòng)調(diào)用 setState 完成。

React setState 引起局部重新刷新。為了達(dá)到更好的性能，React 暴漏給開發(fā)者 shouldComponentUpdate 這個(gè)生命周期 hook，來(lái)避免不需要的重新渲染(相比之下，Vue 由于采用依賴追蹤，默認(rèn)就是優(yōu)化狀態(tài)：你動(dòng)了多少數(shù)據(jù)，就觸發(fā)多少更新，不多也不少，而 React 對(duì)數(shù)據(jù)變化毫無(wú)感知，它就提供 React.createElement 調(diào)用已生成 virtual dom)。

另外 React 為了彌補(bǔ)不必要的更新，會(huì)對(duì) setState 的行為進(jìn)行合并操作。因此 setState 有時(shí)候會(huì)是異步更新，但并不是總是“異步”:

在設(shè)計(jì)上，這給開發(fā)者帶來(lái)了額外的“心智負(fù)擔(dān)”，也引出了一些潛在問(wèn)題。再次贅述，Vue 的響應(yīng)式理念，進(jìn)行數(shù)據(jù)攔截和代理中不存在類似問(wèn)題(當(dāng)然也有 batch 的操作)。

這個(gè)設(shè)計(jì)上的差別，直接影響了 hooks 的實(shí)現(xiàn)和表現(xiàn)。

React hook 底層是基于鏈表(Array)實(shí)現(xiàn)，每次組件被 render 的時(shí)候都會(huì)順序執(zhí)行所有的 hooks，因?yàn)榈讓邮擎湵?，每一個(gè) hook 的 next 是指向下一個(gè) hook 的，所以要求開發(fā)者不能在不同 hooks 調(diào)用中使用判斷條件，因?yàn)?if 會(huì)導(dǎo)致順序不正確，從而導(dǎo)致報(bào)錯(cuò)。如下代碼會(huì)報(bào)錯(cuò)：

相反，Vue hook 只會(huì)被注冊(cè)調(diào)用一次，Vue之所以能避開這些麻煩的問(wèn)題，根本原因在于它對(duì)數(shù)據(jù)的響應(yīng)是基于響應(yīng)式的，是對(duì)數(shù)據(jù)進(jìn)行了代理的。不需要鏈表進(jìn)行 hooks 記錄，它對(duì)數(shù)據(jù)直接代理觀察。

但是 Vue 這種響應(yīng)式的方案，也有自己的困擾。比如 useState() (實(shí)際上 evan 命名為 value())返回的是一個(gè) value wrapper (包裝對(duì)象)。一個(gè)包裝對(duì)象只有一個(gè)屬性：.value ，該屬性指向內(nèi)部被包裝的值。我們知道在 JavaScript 中，原始值類型如 string 和 number 是只有值，沒有引用的。不管是使用 Object.defineProperty 還是 Proxy，我們無(wú)法追蹤原始變量后續(xù)的變化。因此 Vue 不得不返回一個(gè)包裝對(duì)象，不然對(duì)于基本類型，它無(wú)法做到數(shù)據(jù)的代理和攔截。這算是因?yàn)樵O(shè)計(jì)理念帶來(lái)的一個(gè)非常非常微小的 side effect。從 Evan you 的截圖中，我圈了出來(lái)：

簡(jiǎn)單說(shuō)一下我個(gè)人的看法：事實(shí)上，Mobx 在 React 社區(qū)很流行，Mobx 采用了響應(yīng)式的思想，實(shí)際上 Vue 也采用了幾乎相同的反應(yīng)系統(tǒng)。在一定程度上，React + Mobx 也可以被認(rèn)為是更繁瑣的 Vue。所以開發(fā)者習(xí)慣組合使用它們，那么(也許)選擇 Vue 會(huì)更合理。

再來(lái)思考，Mobx 的流行也許也從側(cè)面說(shuō)明到底什么樣的設(shè)計(jì)可能是更現(xiàn)代化的設(shè)計(jì)。

第二點(diǎn)

在設(shè)計(jì)哲學(xué)上。我認(rèn)為 Evan you 很好地體現(xiàn)了中國(guó)人 humble 和 modest 的優(yōu)良品質(zhì),我選取了比較具有代表性的事件系統(tǒng)：

1.React 事件系統(tǒng)龐大而復(fù)雜。

其中，它暴漏給開發(fā)者的事件不是原生事件，是 React 包裝過(guò)合成事件，并且非常重要的一點(diǎn)是，合成事件是池化的。也就是說(shuō)不同的事件，可能會(huì)共享一個(gè)合成事件對(duì)象。另外一個(gè)細(xì)節(jié)是，React 對(duì)所有事件都進(jìn)行了代理，將所有事件都綁定 document 上。請(qǐng)讀者仔細(xì)體會(huì)下面的代碼：

你告訴我他們的輸出值好不好?

2.React 中事件處理函數(shù)中的 this 默認(rèn)不指向組件實(shí)例。

3.Vue 事件系統(tǒng).

Vue不多講，大家看圖：

當(dāng)然 Vue 事件處理函數(shù)中的 this 默認(rèn)指向組件實(shí)例。連源碼都寫的那么“清晰易懂”

簡(jiǎn)單說(shuō)一下我個(gè)人的看法，從事件 API 上我們就能看出前端框架在設(shè)計(jì)的一個(gè)不同思路： React 設(shè)計(jì)是改變開發(fā)者，提供強(qiáng)大而復(fù)雜的機(jī)制，開發(fā)者按照我的來(lái);Vue 是適應(yīng)開發(fā)者，讓開發(fā)者怎么爽怎么來(lái)。

第三點(diǎn)

預(yù)編譯優(yōu)化問(wèn)題。

Vue3.0 提出的動(dòng)靜結(jié)合的 DOM diff 思想，我個(gè)人認(rèn)為是 Vue 近幾年在“創(chuàng)新”上的一個(gè)很好體現(xiàn)。之所以能夠做到動(dòng)靜結(jié)合的 DOM diff，或者把這個(gè)問(wèn)題放的更大：之所以能夠做到預(yù)編譯優(yōu)化，是因?yàn)?Vue core 可以靜態(tài)分析 template，在解析模版時(shí)，整個(gè) parse 的過(guò)程是利用正則表達(dá)式順序解析模板，當(dāng)解析到開始標(biāo)簽、閉合標(biāo)簽、文本的時(shí)候都會(huì)分別執(zhí)行對(duì)應(yīng)的回調(diào)函數(shù)，來(lái)達(dá)到構(gòu)造 AST 樹的目的。

我關(guān)心的是：React 能否像 Vue 那樣進(jìn)行預(yù)編譯優(yōu)化??

Vue 需要做數(shù)據(jù)雙向綁定，需要進(jìn)行數(shù)據(jù)攔截或代理，那它就需要在預(yù)編譯階段靜態(tài)分析模版，分析出視圖依賴了哪些數(shù)據(jù)，進(jìn)行響應(yīng)式處理。而 React 就是局部重新渲染，React 拿到的或者說(shuō)掌管的，所負(fù)責(zé)的就是一堆遞歸 React.createElement 的執(zhí)行調(diào)用，它無(wú)法從模版層面進(jìn)行靜態(tài)分析。

因此 React JSX 過(guò)度的靈活性導(dǎo)致運(yùn)行時(shí)可以用于優(yōu)化的信息不足。

但是，在 React 框架之外，我們作為開發(fā)者還是可以通過(guò)工程化手段達(dá)到類似的目的，因?yàn)槲覀兡軌蚪佑|到 JSX 編譯成 React.createElement 的整個(gè)過(guò)程。開發(fā)者在項(xiàng)目中開發(fā) babel 插件，實(shí)現(xiàn) JSX 編譯成 React.createElement，那么優(yōu)化手段就是是從編寫 babel 插件開始：

當(dāng)然 React 并不是沒有意識(shí)到這個(gè)問(wèn)題，他們?cè)诜e極的同 prepack 合作。力求彌補(bǔ)構(gòu)建優(yōu)化的先天不足。

Prepack 同樣是 FaceBook 團(tuán)隊(duì)的作品。它讓你編寫普通的 JavaScript 代碼，它在構(gòu)建階段就試圖了解代碼將做什么，然后生成等價(jià)的代碼，減少了運(yùn)行時(shí)的計(jì)算量，就相當(dāng)于 JavaScript 的部分求值器。

我就用 Prepack 結(jié)合 React 嘗了個(gè)鮮：

對(duì)比：

這不正是 React 夢(mèng)寐以求的嗎?

另外一個(gè) React 的方向就是 fiber 時(shí)間分片了， 尤雨溪說(shuō)過(guò)：“React 是傷害已經(jīng)造成，無(wú)法自身在預(yù)編譯階段做到更多，時(shí)間分片這樣的優(yōu)化只是在彌補(bǔ)傷害”。其實(shí)作為 React 的粉絲，這里吹了這么久 Vue，我發(fā)表一下我的想法：這反倒算是 React 多管齊下的一個(gè)做法。***，上一個(gè)借助 Babel plugin AST 實(shí)現(xiàn)一個(gè)類似預(yù)編譯優(yōu)化：remove inline functions 的小例子。

預(yù)編譯后：