尤雨溪向 React 推荐自己研发的 Vite，网友：用第三方工具没有任何意义

作者 ｜ 褚杏娟 核子可乐

近期， React 团队正在更新 React 文档。期间，Vue.js 作者尤雨溪发布推特称，新的 React 文档应该向初学者推荐 Vite 而不是 CRA——或者如果需要使用 ESLint 或测试，至少也该推荐一个基于 Vite 的自定义模板（也应该使用 Vitest 而不是 Jest）。

Vite 是一个通用的构建工具，旨在为 VanillaJS、Vue、React 和 Svelte 等现代 Web 项目提供更快、更精简的开发体验，它不依赖于任何特定的框架。值得注意的是，Vite 由 Vue 开发团队开发，尤雨溪也是 Vite 的核心开发者。

尤雨溪发布这样的内容引起了开发者的讨论。

有开发者留言称：React 围绕自身创建了自己的工具（jest、CRA、测试库）。许多项目仍在使用它们。推荐第三方工具没有任何意义（不管是否为了初学者），无论其他看起来多好，都要维护自己的工具。

尤雨溪回应称：React 团队没有创建 Jest/testing -library，也没有维护它们。CRA 在某种程度上是第一方的，但一旦放弃它，他们可以为用户提供更好的 DX 并减少自己的维护负担。

面对开发者对 Vite 的质疑，尤雨溪表示，“我不认为 Vite 的级别太低，它提供了几乎 CRA 提供的所有配置。”尤雨溪还补充道，“我当然有偏见，但我很想知道是否有任何的正当理由来坚持使用 CRA。”

两大主流框架之争

作为 Web 前端的两大主流框架，React 和 Vue 之间竞争尤为激烈，双方“战争”持续多年，分别拥有自己的坚定支持者。

React 起源于 Meta（前 Facebook）的内部项目，当时公司对市场上所有 JavaScript MVC 框架都不满意，便决定自行开发。2011 年，Facebook 首次将 React 部署在 News Feed 上，随后在 2012 年部署到了 Instagram 上。2013 年 5 月，Facebook 宣布将项目开源。

目前，React 是很多大公司的首选，像 Atlassian (Jira, Trello)、Codecademy、Dropbox、Netflix、Airbnb、Twitter、Reddit 和阿里都使用的是 React。React 虽然一直被视为框架，但同样适合构建 Web 应用程序的整个视图。

而 Vue 最早是在 2014 年 2 月发布。尤雨溪表示，Vue 提取了 Angular 中自己喜欢的部分，然后构建出了这款相当轻量的框架。最早的版本发布在 Hacker News、Echo JS 与 Reddit 的 /r/javascript 版块，一天之内就登上了这三个网站的首页。现在，Vue 也是 Github 上最受欢迎的开源项目之一。

根据尤雨溪的说法，Vue 的主要用户是中小型企业、自由职业开发者和小型 agency。现在使用 Vue 的企业包括 Behance、Dribbble、Adobe、GitLab、Namecheap、Grammarly、任天堂、Zoom、Louis Vuitton、Google Careers 等。

这不是尤雨溪第一次公开评价 React。今年 5 月，React 核心团队成员 Dan Abramov 在推特上发布了 React 新文档，有网友赞扬该文档在结构、美观和性能等方面都达到了非常高的标准。但尤雨溪表示，在对 Vue 新文档和 React Beta 文档分别做了测试后认为，Vue 新文档在性能方面更有优势。

对此，Dan Abramov 表示，文档还处于 Beta 版本，正式版上线前会优化性能。然而有网友发现，Dan Abramov 在 5 月 26 日晚上熬夜对 React 新文档的性能做了优化。React 与 Vue 的竞争可见一斑。

到底用哪个？

业内对“React 和 Vue 到底谁更厉害”、“React 和 Vue 选谁”的讨论从未停止。开发者 Oleg Goncharenko 从 React 与 Vue.js 如何创建组件、各组件之间如何相互通信，以及组件如何影响浏览器 DOM 三个方面做了分析。

React 与 Vue.js 中的组件构建原则

组件的作用是在网络浏览器上呈现数据，包括向用户展示的 UI 部分（HTML）与逻辑部分（JS）。这里的逻辑，负责描述浏览器中所传递数据的功能和方法。

React 使用 JavaScript Syntax Extension (JSX)，这种语法语言有助于编写出与浏览器内本地方法相对应的函数。Safari、Chrome 和 Firefox 都基于 JS 引擎，所以可以直接与由 React 编写的逻辑函数对话。但由于 JS 代码中还包含大量 HTML 标记，网络浏览器无法直接识别。因此，React 需要使用 Babel Transpiler 将代码转换为纯 JS。

JSX 允许在 JS 当中返回 HTML 或者在 HTML 中执行。而 JS 变量则可以用 HTML 标记进行分配，具体如下所示：

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

动态变量可以被放在JSX中的括号语法( { … } )内。

根据Stackshare的统计数据，React最受欢迎的特性一是组件（747票），二是便捷性（484票）。但JSX获得的支持则非常有限，仅得到31票。

JSX最大的问题在于它不要求特定的代码结构，所以组件逻辑和UI都存放在单一文件内，很可能导致代码混乱。

这种将组件存放进单一文件的思路跟Angular正好相反，后者要求将HTML、JS和CSS分别保存在不同的文件内。除非Airbnb和Netflix加入React社区，并使用React构建自己的MVP（最小可行产品），否则这种单文件组件实现形式肯定无法成为主流。

与React一样，Vue.js也推荐将 UI 和逻辑保存在同一文件中。Vue.js 中的组件代码则被包含在特定的HTML模板之内。模板的存在为组件代码勾勒出了清晰的轮廓。程序员可以借此观察方法、属性和渲染函数。

另外，Vue.js有自己的特定语法 ，使用双括号{{ }}作为数据占位符。HTML属性则是VUe.js中的指令，包含前缀v-。同时，Vue.js还支持用JSX进行编码，这也扩展了框架自身的编程能力。

总的来说，React 要求开发者拥有扎实的JS技能，而 Vue.js 对新手开发者更加友好。与React类似，Vue.js也支持使用JSX编写，但其组件是用HTML模板编写而成。

组件如何影响浏览器 DOM？

当用户打开网页时，网络浏览器会将其解析为树状结构，并自上而下进行读取，这种树状结构文件被称为文档对象模型（DOM）。如果用户在页面上执行了某些操作，浏览器就需要重新创建页面并读取 DOM。这就会带来更多负载，并占用掉浏览器资源。

React 避免了传统 DOM 渲染，转而利用浏览器内的数据渲染能力。React 设计了一种把内容渲染到虚拟 DOM 的方法。运作原理如下：

1. 在网络浏览器加载网页之前，React会制作一份DOM副本，并把所有对象都放进一个新组件内。

2. 当用户打开网页时，React访问的不是实际DOM，而是渲染DOM的副本——也就是虚拟DOM。

3. 当用户浏览页面的同时，React也在计算其中所有变更。如果用户点击了某个按钮或执行了其他操作，React就会创建一份新的DOM快照，再将其与之前的版本进行比较。

4. 如果再有其他节点元素发生了变化，React就会更新页面以渲染实际DOM。

本文文字及图片出自 InfoQ