摘要：官方規(guī)范估計(jì)很難出現(xiàn)現(xiàn)代框架的設(shè)計(jì)了，因?yàn)楣俜皆O(shè)計(jì)中前端三劍客是相互分離的方案，為了解決現(xiàn)階段前端框架的問題，必須由完全接管，這幾乎就是，或者支持語法的，可這與最初網(wǎng)頁設(shè)計(jì)思路是違背的。現(xiàn)代前端框架正在告訴我們新的三劍客虛擬虛擬。

深入思考為何前端需要框架，以及 web components 是否可以代替前端框架？

原文地址，建議先閱讀原文，或者閱讀概述。

現(xiàn)在前端框架非常多了，如果讓我們回答 “為什么要用前端框架” 這個(gè)問題，你覺得是下面這些原因嗎？

組件化。

擁有強(qiáng)大的開源社區(qū)。

擁有大量第三方庫解決大部分問題。

擁有大量現(xiàn)成的第三方組件。

擁有瀏覽器拓展/工具幫助快速 debug。

友好的支持單頁應(yīng)用。

不，這些都不是根本原因，最多算前端框架的營銷手段。作者給出的最根本原因是：

解決 UI 與狀態(tài)同步的難題。

作者假設(shè)了一個(gè)沒有前端框架的項(xiàng)目，就像 Jquery 時(shí)代，我們需要手動(dòng)同步狀態(tài)與 UI。就像下面的代碼：

addAddress(address) {
  // state logic
  const id = String(Dat.now())
  this.state = this.state.concat({ address, id })

  // UI logic
  this.updateHelp()

  const li = document.createElement("li")
  const span = document.createElement("span")
  const del = document.createElement("a")
  span.innerText = address
  del.innerText = "delete"
  del.setAttribute("data-delete-id", id)

  this.ul.appendChild(li)
  li.appendChild(del)
  li.appendChild(span)
  this.items[id] = li
}

首先更新效率是個(gè)問題，最大問題還是同步問題。試想多次與服務(wù)器交互，在同步過程中漏執(zhí)行了一步，會(huì)導(dǎo)致之后的 UI 與狀態(tài)逐漸脫節(jié)。

因?yàn)槲覀冎荒芤徊讲酵綘顟B(tài)與 UI，卻無法保證每個(gè)瞬間 UI 與狀態(tài)是完全同步的，任何一個(gè)疏忽都會(huì)導(dǎo)致 UI 與狀態(tài)脫節(jié)，而我們除了不斷檢查 UI 與數(shù)據(jù)是否對(duì)應(yīng)，毫無辦法。

所以現(xiàn)代框架最重要的幫助是保持 UI 與狀態(tài)的同步。

有兩種思路：

組件級(jí)重渲染：比如 React，當(dāng)狀態(tài)改版后，映射出改變后的虛擬 DOM，最終改變當(dāng)前組件映射的真實(shí) DOM，這個(gè)過程被稱為 reconciliation。

監(jiān)聽修改：比如 Angluar 和 Vue.js，狀態(tài)改變直接觸發(fā)對(duì)應(yīng) DOM 節(jié)點(diǎn)中 value 值的變化。

這里稍微說明下，React 雖然是整體渲染，但在虛擬 DOM 作用下，效率不比 observable 低。observable 在值不能完整映射 UI 時(shí)，也需要做更大范圍的 rerender。另外，Vue.js 與 Angluar 也早已采用了虛擬 DOM。

這三個(gè)框架已經(jīng)融會(huì)貫通，作者提到的兩種思路現(xiàn)在已經(jīng)是一種混合技術(shù)了。

大家經(jīng)常會(huì)拿 React, Angluar, Vue.js 與 web components 做比較，可 web components 最大的問題就是，沒有解決 UI 與狀態(tài)同步。

web components 只提供了模版語法，自定義標(biāo)簽解決 html 的問題，并沒有給出一套狀態(tài)與 UI 同步的方法。

所以就算使用 web components，我們可能還需要一個(gè)框架做 UI 同步，比如 Vue.js 或者 stenciljs。

作者還提供了一段簡短的 UI 狀態(tài)同步實(shí)例，這里略過。

最后給出了四點(diǎn)總結(jié)：

現(xiàn)代 js 框架主要在解決 UI 與狀態(tài)同步的問題。

僅使用原生 js 難以寫出復(fù)雜、高效、又容易維護(hù)的 UI 代碼。

Web components 沒有解決這個(gè)主要問題。

雖然使用虛擬 DOM 庫很容易造一個(gè)解決問題的框架，但不建議你真的這么做！

作者的核心觀點(diǎn)是，現(xiàn)代前端框架主要解決 UI 與狀態(tài)同步的問題，這是毫無疑問的，也提到了包括 web components 也依然沒有解決這個(gè)問題。

這可能是 web 開發(fā)最核心的問題了。

最初開發(fā)者的精力都在前端標(biāo)準(zhǔn)化上，誕生了一系列解決標(biāo)準(zhǔn)化問題的庫，最有知名度的是 jquery。當(dāng)前端進(jìn)入 react 時(shí)代后，可以看到精力從解決標(biāo)準(zhǔn)化到解決 web 規(guī)范與實(shí)踐的沖突，這個(gè)沖突正是作者說的問題。

問題就出現(xiàn)在 html、js、css 三者分離上。

html、css、js 各是一套獨(dú)立的體系，但 js 又能同時(shí)控制 html 與 css，那為了解決同步問題，最好將控制權(quán)全部交給 js。

這樣 web components 的問題也就好理解了，web components 解決的是 html 問題，注定與 js 無關(guān)。

html 官方規(guī)范估計(jì)很難出現(xiàn)現(xiàn)代框架的設(shè)計(jì)了，因?yàn)楣俜皆O(shè)計(jì)中前端三劍客是相互分離的方案，為了解決現(xiàn)階段前端框架的問題，html 必須由 js 完全接管，這幾乎就是 jsx，或者支持 template 語法的 html，可這與最初網(wǎng)頁設(shè)計(jì)思路是違背的。

html 是獨(dú)立的，甚至可以不依賴 js 運(yùn)行，這天然導(dǎo)致了 UI 與狀態(tài)同步這個(gè)難題。

html 不依賴 js 的設(shè)計(jì)可能已經(jīng)跟不上前端發(fā)展步伐了，也許 jsx 或者 template 才是真正的未來。

誠然，html 現(xiàn)在的設(shè)計(jì)可以在不支持 js 的瀏覽器執(zhí)行，但就在最近，所有現(xiàn)代瀏覽器都支持了 service worker，它是凌駕于 html 執(zhí)行時(shí)機(jī)之上的 js 腳本，甚至可以攔截 html 請(qǐng)求。一個(gè)不支持 js 的瀏覽器，可能也無法支持 service worker，禁用 js 的堅(jiān)持可能只剩下安全性保護(hù)。

而實(shí)際上現(xiàn)代 web 頁面都使用了 js 完全主導(dǎo)網(wǎng)頁渲染，所以這已經(jīng)從技術(shù)問題上升到了社會(huì)問題，如今禁用 js 的瀏覽器還有多少網(wǎng)頁可以正常訪問？除了某些超大型網(wǎng)站對(duì)禁用 js 狀態(tài)做了特殊優(yōu)化以外，現(xiàn)在幾乎沒有前端項(xiàng)目會(huì)考慮禁用 js 的情況了，因?yàn)槲覀儾粫?huì)假設(shè) React、Angluar、Vue.js 框架代碼無法運(yùn)行。

既然事實(shí)上 UI 已經(jīng)與 js 綁定了，那 w3c 為何不將 jsx 或者 template 列為標(biāo)準(zhǔn)呢？也許為了向前兼容，規(guī)范永遠(yuǎn)也邁不出這一步吧。

幸運(yùn)的是，這并不妨礙現(xiàn)代前端框架的大量普及，而且勢(shì)不可擋。

也許 UI 與狀態(tài)同步的問題是前端發(fā)展的最大阻力，雖然現(xiàn)代化框架已經(jīng)解決了這個(gè)問題，但 w3c 標(biāo)準(zhǔn)卻一直無法往這個(gè)方向發(fā)力，導(dǎo)致 web 的下一個(gè)發(fā)展方向難以依靠標(biāo)準(zhǔn)規(guī)范來推動(dòng)。前端日新月異的發(fā)展，很大一部分是規(guī)范的發(fā)展帶來的，而現(xiàn)在我們進(jìn)入了一個(gè)由工業(yè)化領(lǐng)導(dǎo)的時(shí)代，規(guī)范很可能永遠(yuǎn)也跟不上來，隨之而來的是工業(yè)化社區(qū)也難以做進(jìn)一步突破。

前端不僅是 web，或者也許下一個(gè)突破并不在 web，而是 ar/vr 或者下一個(gè)人機(jī)交互場(chǎng)景。同樣，web 也不僅是前端三劍客，如果認(rèn)為 React、Angluar、Vue.js 帶來的工業(yè)化規(guī)范就是新的規(guī)范，前端才有動(dòng)力向后發(fā)展，比如基于虛擬 DOM 的新框架、新語言。

所以筆者推導(dǎo)出現(xiàn)代前端開發(fā)的本質(zhì)，是將 js、html 的平行關(guān)系變成了 js 包含 html 的關(guān)系，正如上面所說，這可能背離了 w3c 的初衷，但這就是現(xiàn)在的潮流。

最后總結(jié)一下觀點(diǎn)：

也是原作者的，現(xiàn)代 js 框架主要在解決 UI 與狀態(tài)同步的問題。

傳統(tǒng)的前端三劍客正面臨著進(jìn)一步發(fā)展乏力的危機(jī)。

現(xiàn)代前端框架正在告訴我們新的三劍客：js（虛擬 dom、虛擬 css）。

討論地址是：精讀《現(xiàn)代 js 框架存在的根本原因》 · Issue #84 · dt-fe/weekly

如果你想?yún)⑴c討論，請(qǐng)點(diǎn)擊這里，每周都有新的主題，周末或周一發(fā)布。