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

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

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



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

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

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

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

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

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

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

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

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

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

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

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)本地方法相對應(yīng)的函數(shù)。Safari、Chrome 和 Firefox 都基于 JS 引擎,所以可以直接與由 React 編寫的邏輯函數(shù)對話。但由于 JS 代碼中還包含大量 HTML 標(biāo)記,網(wǎng)絡(luò)瀏覽器無法直接識別。因此,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>

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

根據(jù)Stackshare的統(tǒng)計數(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)品),否則這種單文件組件實現(xiàn)形式肯定無法成為主流。

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

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

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

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

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

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

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

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

如果再有其他節(jié)點元素發(fā)生了變化,React就會更新頁面以渲染實際DOM。









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

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

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

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

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

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

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

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

組件數(shù)據(jù)綁定
在數(shù)字綁定方面,大家往往持不同觀點。有些人說 React 只支持單向數(shù)據(jù)流,Vue.js 只提供 Angular 那樣的雙向綁定,其實并不是這樣。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 庫,專門用于實現(xiàn)雙向數(shù)據(jù)綁定。

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

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

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

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

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

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

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

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

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

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

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

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

參考鏈接:

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

作者:前端民工


歡迎關(guān)注微信公眾號 :前端民工