尤雨溪向 React 推薦自己研發(fā)的 Vite。。。
大家好，我是魚皮。
近期， React 團隊正在更新 React 文檔。期間，Vue.js 作者尤雨溪發(fā)布推特稱，新的 React 文檔應(yīng)該向初學(xué)者推薦 Vite 而不是 CRA ——或者如果需要使用 ESLint 或測試，至少也該推薦一個基于 Vite 的自定義模板（也應(yīng)該使用 Vitest 而不是 Jest）。
是的，Vue 的作者在向其競爭對手 React 推薦自己開發(fā)的工具！
Vite 是一個通用的構(gòu)建工具，旨在為 VanillaJS、Vue、React 和 Svelte 等現(xiàn)代 Web 項目提供更快、更精簡的開發(fā)體驗，它不依賴于任何特定的框架。值得注意的是，Vite 由 Vue 開發(fā)團隊開發(fā)，尤雨溪也是 Vite 的核心開發(fā)者。
尤雨溪發(fā)布這樣的內(nèi)容引起了開發(fā)者的討論。
有開發(fā)者留言稱：React 圍繞自身創(chuàng)建了自己的工具（jest、CRA、測試庫）。許多項目仍在使用它們。推薦第三方工具沒有任何意義（不管是否為了初學(xué)者），無論其他看起來多好，都要維護自己的工具。
尤雨溪回應(yīng)稱：React 團隊沒有創(chuàng)建 Jest/testing -library，也沒有維護它們。CRA 在某種程度上是第一方的，但一旦放棄它，他們可以為用戶提供更好的 DX 并減少自己的維護負擔。
面對開發(fā)者對 Vite 的質(zhì)疑，尤雨溪表示，“我不認為 Vite 的級別太低，它提供了幾乎 CRA 提供的所有配置。”尤雨溪還補充道，“我當然有偏見，但我很想知道是否有任何的正當理由來堅持使用 CRA。”
作為 Web 前端的兩大主流框架，React 和 Vue 之間競爭尤為激烈，雙方“戰(zhàn)爭”持續(xù)多年，分別擁有自己的堅定支持者。
React 起源于 Meta（前 Facebook）的內(nèi)部項目，當時公司對市場上所有 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)建出了這款相當輕量的框架。最早的版本發(fā)布在 Hacker News、Echo JS 與 Reddit 的 /r/javascript 版塊，一天之內(nèi)就登上了這三個網(wǎng)站的首頁。現(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 核心團隊成員 Dan Abramov 在推特上發(fā)布了 React 新文檔，有網(wǎng)友贊揚該文檔在結(jié)構(gòu)、美觀和性能等方面都達到了非常高的標準。但尤雨溪表示，在對 Vue 新文檔和 React Beta 文檔分別做了測試后認為，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 三個方面做了分析。
組件的作用是在網(wǎng)絡(luò)瀏覽器上呈現(xiàn)數(shù)據(jù)，包括向用戶展示的 UI 部分（HTML）與邏輯部分（JS）。這里的邏輯，負責描述瀏覽器中所傳遞數(shù)據(jù)的功能和方法。
React 使用 JavaScript Syntax Extension (JSX)，這種語法語言有助于編寫出與瀏覽器內(nèi)本地方法相對應(yīng)的函數(shù)。Safari、Chrome 和 Firefox 都基于 JS 引擎，所以可以直接與由 React 編寫的邏輯函數(shù)對話。但由于 JS 代碼中還包含大量 HTML 標記，網(wǎng)絡(luò)瀏覽器無法直接識別。因此，React 需要使用 Babel Transpiler 將代碼轉(zhuǎn)換為純 JS。
JSX 允許在 JS 當中返回 HTML 或者在 HTML 中執(zhí)行。而 JS 變量則可以用 HTML 標記進行分配，具體如下所示：
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)致代碼混亂。
這種將組件存放進單一文件的思路跟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進行編碼，這也擴展了框架自身的編程能力。
總的來說，React 要求開發(fā)者擁有扎實的JS技能，而 Vue.js 對新手開發(fā)者更加友好。與React類似，Vue.js也支持使用JSX編寫，但其組件是用HTML模板編寫而成。
當用戶打開網(wǎng)頁時，網(wǎng)絡(luò)瀏覽器會將其解析為樹狀結(jié)構(gòu)，并自上而下進行讀取，這種樹狀結(jié)構(gòu)文件被稱為文檔對象模型（DOM）。如果用戶在頁面上執(zhí)行了某些操作，瀏覽器就需要重新創(chuàng)建頁面并讀取 DOM。這就會帶來更多負載，并占用掉瀏覽器資源。
React 避免了傳統(tǒng) DOM 渲染，轉(zhuǎn)而利用瀏覽器內(nèi)的數(shù)據(jù)渲染能力。React 設(shè)計了一種把內(nèi)容渲染到虛擬 DOM 的方法。運作原理如下：
在網(wǎng)絡(luò)瀏覽器加載網(wǎng)頁之前，React會制作一份DOM副本，并把所有對象都放進一個新組件內(nèi)。
當用戶打開網(wǎng)頁時，React訪問的不是實際DOM，而是渲染DOM的副本——也就是虛擬DOM。
當用戶瀏覽頁面的同時，React也在計算其中所有變更。如果用戶點擊了某個按鈕或執(zhí)行了其他操作，React就會創(chuàng)建一份新的DOM快照，再將其與之前的版本進行比較。
如果再有其他節(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 團隊已經(jīng)完全重寫了工具包核心，改進了渲染算法，也即現(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 得到改進，也吸引到更多初創(chuàng)公司。當初使用 Vue.js 的阿里如今也選擇了 React。此處，總結(jié)下 React 和 Vue.js 在虛擬 DOM 處理方法上的不同：
Vue.js中的模板機制可將組件表示為迷你DOM。Vue.js并非跟蹤每個對象，而是遍歷模板中的動態(tài)部分，因此能夠充分優(yōu)化虛擬DOM操作，并充分利用Vue.js項目中的客戶端渲染。
React利用Fiber技術(shù)，可以跳過或推遲較為耗時的任務(wù)以提升程序性能。如此一來，開發(fā)人員就能在動畫過渡期間控制渲染過程、調(diào)整性能水平。
在數(shù)字綁定方面，大家往往持不同觀點。有些人說 React 只支持單向數(shù)據(jù)流，Vue.js 只提供 Angular 那樣的雙向綁定，其實并不是這樣。React 和 Vue.js 都支持單向和雙向數(shù)據(jù)流，而且也都優(yōu)先推薦使用單向數(shù)據(jù)流。
React 支持回調(diào)函數(shù)，因此子組件可以將 props 傳遞給相應(yīng)的父組件。例如當用戶在子組件的輸入字段內(nèi)鍵入文本，這些變更也將被反映至父組件并執(zhí)行內(nèi)容更新。React 社區(qū)還提供 react-hook 庫，專門用于實現(xiàn)雙向數(shù)據(jù)綁定。
Vue 3.0.11 版本的說明文檔也解釋了其單向數(shù)據(jù)綁定的優(yōu)勢：所有 props 在子屬性與父屬性之間形成一個單向向下綁定。當父屬性更新時，就會下流至子屬性，但子屬性更新不會上流至父屬性。這樣可以防止子組件意外改變父組件狀態(tài)，避免提高應(yīng)用程序數(shù)據(jù)流的理解難度。
此外，每當父組件更新時，子組件內(nèi)的所有 props 都會被刷新為最新值。因此開發(fā)者不應(yīng)嘗試改變子組件內(nèi)的 prop。在檢測到這類操作時，Vue 會在控制臺內(nèi)發(fā)出警告。
總的來說，React 的優(yōu)勢在于客戶端渲染極快、對數(shù)據(jù)流的良好控制、具有輕量級架構(gòu)，可擴展性與可伸縮性好，并擁有大型社區(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è)（強烈推薦基于React技術(shù)的React Native）。
Vue.js 將 React 與 Angular 的優(yōu)勢屬性結(jié)合為一，最大的亮點就是完美的用戶體驗。此外，它還提供虛擬 DOM 功能和經(jīng)過優(yōu)化的代碼結(jié)構(gòu)。Vue.js 對開發(fā)者友好，有精細的用戶文檔。但 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://www.infoq.cn/article/Y3ZHkP7MLrE2MHPVJeQH
作者 : 褚杏娟 核子可樂
以上就是本期分享了。
最后,歡迎加入 魚皮的編程知識星球（點擊了解詳情），和大家一起交流學(xué)習(xí)編程，向魚皮和大廠同學(xué) 1 對 1 提問、幫你制定學(xué)習(xí)計劃不迷茫、跟著魚皮直播做項目（往期項目可無限回看）、領(lǐng)取魚皮原創(chuàng)編程學(xué)習(xí)/求職資料等。最近秋招開始了，星球內(nèi)也會幫大家規(guī)劃求職進度、完善簡歷和項目。
往期推薦