尤雨溪向 React 推薦自己研發(fā)的 Vite，網(wǎng)友：用第三方工具沒有任何意義

近期， React 團(tuán)隊(duì)正在更新 React 文檔。期間，Vue.js 作者尤雨溪發(fā)布推特稱，新的 React 文檔應(yīng)該向初學(xué)者推薦 Vite 而不是 CRA——或者如果需要使用 ESLint 或測(cè)試，至少也該推薦一個(gè)基于 Vite 的自定義模板（也應(yīng)該使用 Vitest 而不是 Jest）。

Vite 是一個(gè)通用的構(gòu)建工具，旨在為 VanillaJS、Vue、React 和 Svelte 等現(xiàn)代 Web 項(xiàng)目提供更快、更精簡(jiǎn)的開發(fā)體驗(yàn)，它不依賴于任何特定的框架。值得注意的是，Vite 由 Vue 開發(fā)團(tuán)隊(duì)開發(fā)，尤雨溪也是 Vite 的核心開發(fā)者。



尤雨溪發(fā)布這樣的內(nèi)容引起了開發(fā)者的討論。

有開發(fā)者留言稱：React 圍繞自身創(chuàng)建了自己的工具（jest、CRA、測(cè)試庫）。許多項(xiàng)目仍在使用它們。推薦第三方工具沒有任何意義（不管是否為了初學(xué)者），無論其他看起來多好，都要維護(hù)自己的工具。

尤雨溪回應(yīng)稱：React 團(tuán)隊(duì)沒有創(chuàng)建 Jest/testing -library，也沒有維護(hù)它們。CRA 在某種程度上是第一方的，但一旦放棄它，他們可以為用戶提供更好的 DX 并減少自己的維護(hù)負(fù)擔(dān)。

面對(duì)開發(fā)者對(duì) Vite 的質(zhì)疑，尤雨溪表示，“我不認(rèn)為 Vite 的級(jí)別太低，它提供了幾乎 CRA 提供的所有配置?！庇扔晗€補(bǔ)充道，“我當(dāng)然有偏見，但我很想知道是否有任何的正當(dāng)理由來堅(jiān)持使用 CRA?！?br>
兩大主流框架之爭(zhēng)
作為 Web 前端的兩大主流框架，React 和 Vue 之間競(jìng)爭(zhēng)尤為激烈，雙方“戰(zhàn)爭(zhēng)”持續(xù)多年，分別擁有自己的堅(jiān)定支持者。

React 起源于 Meta（前 Facebook）的內(nèi)部項(xiàng)目，當(dāng)時(shí)公司對(duì)市場(chǎng)上所有 JavaScript MVC 框架都不滿意，便決定自行開發(fā)。2011 年，F(xiàn)acebook 首次將 React 部署在 News Feed 上，隨后在 2012 年部署到了 Instagram 上。2013 年 5 月，F(xiàn)acebook 宣布將項(xiàng)目開源。

目前，React 是很多大公司的首選，像 Atlassian (Jira, Trello)、Codecademy、Dropbox、Netflix、Airbnb、Twitter、Reddit 和阿里都使用的是 React。React 雖然一直被視為框架，但同樣適合構(gòu)建 Web 應(yīng)用程序的整個(gè)視圖。

而 Vue 最早是在 2014 年 2 月發(fā)布。尤雨溪表示，Vue 提取了 Angular 中自己喜歡的部分，然后構(gòu)建出了這款相當(dāng)輕量的框架。最早的版本發(fā)布在 Hacker News、Echo JS 與 Reddit 的 /r/javascript 版塊，一天之內(nèi)就登上了這三個(gè)網(wǎng)站的首頁?，F(xiàn)在，Vue 也是 Github 上最受歡迎的開源項(xiàng)目之一。

根據(jù)尤雨溪的說法，Vue 的主要用戶是中小型企業(yè)、自由職業(yè)開發(fā)者和小型 agency。現(xiàn)在使用 Vue 的企業(yè)包括 Behance、Dribbble、Adobe、GitLab、Namecheap、Grammarly、任天堂、Zoom、Louis Vuitton、Google Careers 等。

這不是尤雨溪第一次公開評(píng)價(jià) React。今年 5 月，React 核心團(tuán)隊(duì)成員 Dan Abramov 在推特上發(fā)布了 React 新文檔，有網(wǎng)友贊揚(yáng)該文檔在結(jié)構(gòu)、美觀和性能等方面都達(dá)到了非常高的標(biāo)準(zhǔn)。但尤雨溪表示，在對(duì) Vue 新文檔和 React Beta 文檔分別做了測(cè)試后認(rèn)為，Vue 新文檔在性能方面更有優(yōu)勢(shì)。

對(duì)此，Dan Abramov 表示，文檔還處于 Beta 版本，正式版上線前會(huì)優(yōu)化性能。然而有網(wǎng)友發(fā)現(xiàn)，Dan Abramov 在 5 月 26 日晚上熬夜對(duì) React 新文檔的性能做了優(yōu)化。React 與 Vue 的競(jìng)爭(zhēng)可見一斑。

到底用哪個(gè)？
業(yè)內(nèi)對(duì)“React 和 Vue 到底誰更厲害”、“React 和 Vue 選誰”的討論從未停止。開發(fā)者 Oleg Goncharenko 從 React 與 Vue.js 如何創(chuàng)建組件、各組件之間如何相互通信，以及組件如何影響瀏覽器 DOM 三個(gè)方面做了分析。

React 與 Vue.js 中的組件構(gòu)建原則
組件的作用是在網(wǎng)絡(luò)瀏覽器上呈現(xiàn)數(shù)據(jù)，包括向用戶展示的 UI 部分（HTML）與邏輯部分（JS）。這里的邏輯，負(fù)責(zé)描述瀏覽器中所傳遞數(shù)據(jù)的功能和方法。

React 使用 JavaScript Syntax Extension (JSX)，這種語法語言有助于編寫出與瀏覽器內(nèi)本地方法相對(duì)應(yīng)的函數(shù)。Safari、Chrome 和 Firefox 都基于 JS 引擎，所以可以直接與由 React 編寫的邏輯函數(shù)對(duì)話。但由于 JS 代碼中還包含大量 HTML 標(biāo)記，網(wǎng)絡(luò)瀏覽器無法直接識(shí)別。因此，React 需要使用 Babel Transpiler 將代碼轉(zhuǎn)換為純 JS。

JSX 允許在 JS 當(dāng)中返回 HTML 或者在 HTML 中執(zhí)行。而 JS 變量則可以用 HTML 標(biāo)記進(jìn)行分配，具體如下所示：

const message = <h1>React is cool!</h1>

動(dòng)態(tài)變量可以被放在JSX中的括號(hào)語法( { ... } )內(nèi)。

根據(jù)Stackshare的統(tǒng)計(jì)數(shù)據(jù)，React最受歡迎的特性一是組件（747票），二是便捷性（484票）。但JSX獲得的支持則非常有限，僅得到31票。

JSX最大的問題在于它不要求特定的代碼結(jié)構(gòu)，所以組件邏輯和UI都存放在單一文件內(nèi)，很可能導(dǎo)致代碼混亂。

這種將組件存放進(jìn)單一文件的思路跟Angular正好相反，后者要求將HTML、JS和CSS分別保存在不同的文件內(nèi)。除非Airbnb和Netflix加入React社區(qū)，并使用React構(gòu)建自己的MVP（最小可行產(chǎn)品），否則這種單文件組件實(shí)現(xiàn)形式肯定無法成為主流。

與React一樣，Vue.js也推薦將 UI 和邏輯保存在同一文件中。Vue.js 中的組件代碼則被包含在特定的HTML模板之內(nèi)。模板的存在為組件代碼勾勒出了清晰的輪廓。程序員可以借此觀察方法、屬性和渲染函數(shù)。

另外，Vue.js有自己的特定語法 ，使用雙括號(hào){{ }}作為數(shù)據(jù)占位符。HTML屬性則是VUe.js中的指令，包含前綴v-。同時(shí)，Vue.js還支持用JSX進(jìn)行編碼，這也擴(kuò)展了框架自身的編程能力。

總的來說，React 要求開發(fā)者擁有扎實(shí)的JS技能，而 Vue.js 對(duì)新手開發(fā)者更加友好。與React類似，Vue.js也支持使用JSX編寫，但其組件是用HTML模板編寫而成。

組件如何影響瀏覽器 DOM？
當(dāng)用戶打開網(wǎng)頁時(shí)，網(wǎng)絡(luò)瀏覽器會(huì)將其解析為樹狀結(jié)構(gòu)，并自上而下進(jìn)行讀取，這種樹狀結(jié)構(gòu)文件被稱為文檔對(duì)象模型（DOM）。如果用戶在頁面上執(zhí)行了某些操作，瀏覽器就需要重新創(chuàng)建頁面并讀取 DOM。這就會(huì)帶來更多負(fù)載，并占用掉瀏覽器資源。

React 避免了傳統(tǒng) DOM 渲染，轉(zhuǎn)而利用瀏覽器內(nèi)的數(shù)據(jù)渲染能力。React 設(shè)計(jì)了一種把內(nèi)容渲染到虛擬 DOM 的方法。運(yùn)作原理如下：

在網(wǎng)絡(luò)瀏覽器加載網(wǎng)頁之前，React會(huì)制作一份DOM副本，并把所有對(duì)象都放進(jìn)一個(gè)新組件內(nèi)。

當(dāng)用戶打開網(wǎng)頁時(shí)，React訪問的不是實(shí)際DOM，而是渲染DOM的副本——也就是虛擬DOM。

當(dāng)用戶瀏覽頁面的同時(shí)，React也在計(jì)算其中所有變更。如果用戶點(diǎn)擊了某個(gè)按鈕或執(zhí)行了其他操作，React就會(huì)創(chuàng)建一份新的DOM快照，再將其與之前的版本進(jìn)行比較。

如果再有其他節(jié)點(diǎn)元素發(fā)生了變化，React就會(huì)更新頁面以渲染實(shí)際DOM。









而 Vue.js 沒用 React 的虛擬 DOM 思想，處理方式也有所區(qū)別。尤雨溪對(duì)此曾評(píng)價(jià)道：在大多數(shù)情況下，這種方式確實(shí)資源成本低廉、速度更快。但是，如果需要重新創(chuàng)建大量 JS 對(duì)象，那操作成本仍然很高。虛擬 DOM 最大的問題是，無論模板中的動(dòng)態(tài)內(nèi)容是多還是少，總是需要遍歷整個(gè)樹才能弄清到底發(fā)生了哪些變化。

因此，Vue.js 現(xiàn)在只跟蹤 DOM 樹中每個(gè)對(duì)象之內(nèi)的依賴項(xiàng)。Vue 3.0.11 中的虛擬 DOM 只跟蹤動(dòng)態(tài)元素，也就是包含

的部分。遍歷 DOM 樹內(nèi)節(jié)點(diǎn)確實(shí)非常耗時(shí)，因此 Vue 做出了技術(shù)調(diào)整。但自從 16.0 版本開始，React 團(tuán)隊(duì)已經(jīng)完全重寫了工具包核心，改進(jìn)了渲染算法，也即現(xiàn)在的 React Fiber。

React 將函數(shù)分為影響瀏覽器 DOM 的函數(shù)，以及與 props、state 更新相關(guān)的函數(shù)。組件更新被歸入“functions”類別，而生命周期方法和 DOM 變更則被歸入“side-effects”。這樣程序員就可以優(yōu)先考慮渲染工作。為了讓動(dòng)畫能夠平滑過渡，生命周期操作等更為耗時(shí)的工作可以先行延后，同時(shí)也可以將高優(yōu)先級(jí)任務(wù)安排到同一隊(duì)列內(nèi)，之后再拆分成多個(gè)更小的任務(wù)或者增量。

由于工作單元，即 fiber nodes 的存在，上述解決方案也就有了實(shí)現(xiàn)的可能。每個(gè) fiber 對(duì)應(yīng)渲染流程中的特定步驟。它提出數(shù)據(jù)的線性表示，而非樹狀結(jié)構(gòu)。這樣尤雨溪提出的時(shí)間損失問題也就迎刃而解了。

React 因 Fiber 得到改進(jìn)，也吸引到更多初創(chuàng)公司。當(dāng)初使用 Vue.js 的阿里如今也選擇了 React。此處，總結(jié)下 React 和 Vue.js 在虛擬 DOM 處理方法上的不同：

Vue.js中的模板機(jī)制可將組件表示為迷你DOM。Vue.js并非跟蹤每個(gè)對(duì)象，而是遍歷模板中的動(dòng)態(tài)部分，因此能夠充分優(yōu)化虛擬DOM操作，并充分利用Vue.js項(xiàng)目中的客戶端渲染。

React利用Fiber技術(shù)，可以跳過或推遲較為耗時(shí)的任務(wù)以提升程序性能。如此一來，開發(fā)人員就能在動(dòng)畫過渡期間控制渲染過程、調(diào)整性能水平。

組件數(shù)據(jù)綁定
在數(shù)字綁定方面，大家往往持不同觀點(diǎn)。有些人說 React 只支持單向數(shù)據(jù)流，Vue.js 只提供 Angular 那樣的雙向綁定，其實(shí)并不是這樣。React 和 Vue.js 都支持單向和雙向數(shù)據(jù)流，而且也都優(yōu)先推薦使用單向數(shù)據(jù)流。

React 支持回調(diào)函數(shù)，因此子組件可以將 props 傳遞給相應(yīng)的父組件。例如當(dāng)用戶在子組件的輸入字段內(nèi)鍵入文本，這些變更也將被反映至父組件并執(zhí)行內(nèi)容更新。React 社區(qū)還提供 react-hook 庫，專門用于實(shí)現(xiàn)雙向數(shù)據(jù)綁定。

Vue 3.0.11 版本的說明文檔也解釋了其單向數(shù)據(jù)綁定的優(yōu)勢(shì)：所有 props 在子屬性與父屬性之間形成一個(gè)單向向下綁定。當(dāng)父屬性更新時(shí)，就會(huì)下流至子屬性，但子屬性更新不會(huì)上流至父屬性。這樣可以防止子組件意外改變父組件狀態(tài)，避免提高應(yīng)用程序數(shù)據(jù)流的理解難度。

此外，每當(dāng)父組件更新時(shí)，子組件內(nèi)的所有 props 都會(huì)被刷新為最新值。因此開發(fā)者不應(yīng)嘗試改變子組件內(nèi)的 prop。在檢測(cè)到這類操作時(shí)，Vue 會(huì)在控制臺(tái)內(nèi)發(fā)出警告。

總    結(jié)
總的來說，React 的優(yōu)勢(shì)在于客戶端渲染極快、對(duì)數(shù)據(jù)流的良好控制、具有輕量級(jí)架構(gòu)，可擴(kuò)展性與可伸縮性好，并擁有大型社區(qū)支持。但是，React 在缺少 Redux、routing 等庫和服務(wù)的情況下無法運(yùn)行、無結(jié)構(gòu)代碼極易陷入混亂。同時(shí)學(xué)習(xí)曲線較為陡峭，要求開發(fā)人員對(duì) JS 擁有深入了解，并具有單頁應(yīng)用程序（SPA）設(shè)計(jì)經(jīng)驗(yàn)。另外，更多的選項(xiàng)也對(duì)應(yīng)著一定的實(shí)施成本。

因此，以下類型的企業(yè)可能更適合使用 React：

需要在市場(chǎng)上快速開發(fā)功能并驗(yàn)證項(xiàng)目的早期初創(chuàng)企業(yè)。

尋求外包開發(fā)的企業(yè)。與Vue.js相比，React專業(yè)開發(fā)人員的勞動(dòng)力供應(yīng)更為充足。

基于產(chǎn)品且需要跨平臺(tái)應(yīng)用開發(fā)的企業(yè)（強(qiáng)烈推薦基于React技術(shù)的React Native）。

Vue.js 將 React 與 Angular 的優(yōu)勢(shì)屬性結(jié)合為一，最大的亮點(diǎn)就是完美的用戶體驗(yàn)。此外，它還提供虛擬 DOM 功能和經(jīng)過優(yōu)化的代碼結(jié)構(gòu)。Vue.js 對(duì)開發(fā)者友好，有精細(xì)的用戶文檔。但 Vue.js 較難獲得經(jīng)驗(yàn)豐富的開發(fā)人才，社區(qū)規(guī)模相比之下不如 React。

因此，以下類型的企業(yè)可能更適合使用 Vue.js：

以 Web 類產(chǎn)品為核心的企業(yè)。

希望在開發(fā)過程中實(shí)施單一流程的企業(yè)。

缺乏在構(gòu)建過程中使用框架的經(jīng)驗(yàn)，或希望充分利用原有 JS 開發(fā)人才的企業(yè)。

參考鏈接：

https://brocoders.com/blog/react-vs-vue-comparison-2021/

作者：前端民工


歡迎關(guān)注微信公眾號(hào) ：前端民工