尤雨溪向 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

你也许感兴趣的:

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注