作者丨Richard MacManus

译者丨明知山

策划丨杜小芳

2014年OSCON大会上的一次关于React的演讲产生了深远的影响。十年后的今天，我们再次审视React背后的理念，并探讨它在2024年的适用性。

十年前，Facebook开发者Christopher Chedeau在O'Reilly开源大会上发表演讲，介绍了当时新兴的JavaScript框架React。正如The New Stack的Chris Dawson当时所评论的，这次演讲引人入胜，因为它深入阐释了React的核心理念——不仅解释了工作原理，还说明了为什么要开发这个框架。

自2014年OSCON大会以来，React在前端开发领域确立了其领导地位，在本文中，我将重新审视React的核心理念，并评估它在当今技术环境中的是否仍然经久不衰。这在2024年尤其重要，因为一些主流的软件产品，例如微软的Edge，开始探索一种我称之为后React方法的Web开发方法，即微软Edge团队所谓的“HTML优先”策略。此外，像Svelte和Solid这样的非React框架也为前端开发者提供了越来越可行的替代方案。

为什么React在2014年席卷了Web开发领域

在2014年的演讲中，Chedeau阐释了React的起源，也就是Facebook在2010年2月作为开源软件发布的PHP扩展XHP。Chedeau说：“我们扩展了PHP语法，使其能够嵌入XML”。这主要是出于提高安全性的考虑，同时也带来了“非常快速的迭代周期”。

然而，因为PHP是一种服务器端语言，每次有变化时，页面都需要进行完整的重新渲染。为了避免服务器与客户端之间频繁的往返，Facebook团队决定将XHP的很多应用程序逻辑迁移到JavaScript中，毕竟JavaScript这是浏览器的本地脚本语言。然后，他们开始探索如何进一步优化JavaScript来提升性能和体验。

“我倾向于将React视为对DOM的版本控制”

—— Christopher Chedeau，2014年

他们最终开发出了一个叫作React的JavaScript库：关键创新是引入了“虚拟DOM”的概念。DOM，即文档对象模型，正如Wikipedia所解释的，是“HTML文档的对象化表示，充当了JavaScript和文档之间的桥梁。”

正如Chedeau所解释的，React提供了两个“虚拟”的DOM副本（交互前和交互后各一个），通过一个“差异”比较过程就可以识别出实际发生的变化。然后，React将这些变化应用到实际的DOM中——这意味着只有DOM的一部分发生更新，其余部分保持不变。这也意味着只有网页的一部分需要重新渲染。

Facebook开发者Christopher Chedeau在2014年的OSCON大会上介绍React

Chedeau使用了一个巧妙的比喻来总结React的好处：“我倾向于将React视为对DOM的版本控制”。因此我们可以说React有点像前端的Git。

另一个创新是JSX（JavaScript XML，即JavaScript语法扩展），这是一种XML风格的JavaScript语法扩展。早在2013年，Facebook的Pete Hunt就对JSX进行过描述，并将其定位为一种“可选的语法扩展，旨在为那些更偏爱HTML的可读性而非纯JavaScript的开发者提供便利。”

React背后的一个核心理念是，它不基于模板，这与之前流行的框架（如Ruby on Rails和Django）不同。正如Hunt所指出的，“React采用了一种不同的方法来构建用户界面——将界面分解为独立的组件，这意味着React使用了一个真正的、全功能的编程语言来渲染视图。”

React确实提供了一种革命性的Web应用开发方法——特别适合那些数据频繁变化的大型应用程序。这引起越来越多开发者的注意，React在2014年的采用率开始显著增长。2014年5月，Mozilla的开发者James Long在一篇题为“去除用户界面复杂性——为什么说React很棒”的文章中表达了对React的乐观情绪。

React的批评者

尽管广受好评，但不久之后，开始有人对React提出批评。到了2015年底，一些开发者因为陡峭的学习曲线而感到“疲惫”。2015年12月，Eric Clemmons在他的文章)中写道：

“最终的问题在于，当你选择了React（及其固有的JSX语法），实际上是在开始开发之前无意中跳入了一个由构建工具、样板文件、代码检查器和时间黑洞构成的陷阱。”

开发者还对React管理状态的处理方式提出了质疑。2016年8月，Charlie Crawford在The New Stack上发表了观点：

“当组件树变得庞大，且存在一些位置相距较远的组件时，如果这些组件并非直接的父子关系，并且两个组件都依赖于同一部分状态，那么问题就开始出现了。”

到2017年，一些有影响力的开发者开始频繁表达他们对React的不满。2017年8月，当时在谷歌Chrome团队工作的Alex Russell反驳了虚拟DOM速度快的观点：

“从来没有任何确凿的事实基础可以证明虚拟DOM的速度“快”，现在同样如此。它实际上是以牺牲空间为代价来换取便利性，而非速度。”

浏览器开发者Alex Russell一直是React的批评者，经常在社交媒体上表达他的不同意见

2019年6月，Russell再次发声，指出React的“diffing”算法实际上比其它框架慢：

“结果表明diffing确实慢！其他框架通过采取不同的方法实现了更快的速度（如Svelte、Lit、Vue等），而且它们在提供相似的表面语法的同时具有更小的体积。

React的捍卫者

在过去的十年里，开发者对React的一些抱怨已经逐渐减少或得到了妥善解决。例如，学习曲线现在不再是一个大问题——自2014年以来，许多新的前端开发者涌入，许多人的起点便是学习React。对于状态管理问题，也有了好的解决方案，比如Redux或React的Context API。

即使可能面临性能方面的挑战，React依然拥有坚定的支持者，Vercel公司便是其中之一，它运行着行业领先的React框架Next.js。2023年7月，Vercel发表了一篇关于React 18的长博文，这是React的当前稳定版本。文章概述了“如何利用并发特性，如Transitions、Suspense和React Server Components，来提升应用程序性能。”

然而，即使这些特性确实提升了性能，但是否是以复杂性为代价？包括Netlify CEO Matt Biilmann在内的一些人对此持有疑问。今年1月，Biilmann巧妙利用Vercel CEO Guillermo Rauch的一条推文，以讽刺的方式提出了Vercel（以及间接地涉及React）的复杂性问题。

值得注意的是，Netlify实际上是Vercel的直接竞争对手！在那次演讲中，Biilmann推荐Astro作为一个更简洁的框架来替代Next.js。虽然Astro允许用户集成React，但他们也可以选择其他UI框架，比如Vue、Svelte和Solid。

最近，Netlify和Astro宣布了一项正式的合作伙伴关系——所以我们可以期待Netlify在推广“保持简洁”的理念上发挥更大作用。

结论：真的要进入后React时代了吗？

现在就宣称我们已经迈入后React时代可能还为时尚早，因为React——以及像Next.js这样的相关框架——仍然广受欢迎。但不可否认的是，开发者现在有了更多的选择。Astro和Svelte都不使用虚拟DOM，所以开发者可以选择一个不依赖React的Web框架（尽管Astro仍然保留集成React的能力）。

微软的Edge团队正在推动一种“HTML优先”的方法，Alex Russell（他是那个团队的成员）将其描述为“现代Web Components加HTML优先的架构”。

不管怎样，前端开发不再像几年前那样与React紧密绑定。如果你是刚进入这个行业的Web开发者，甚至可以考虑完全不使用React——尽管这可能会在短期内影响你的就业机会。但至少这是一个值得认真考虑的选项，它或许能帮你吸引到那些具有前瞻性眼界的雇主，从而为你的职业生涯开辟新的道路。

【声明：本文由InfoQ翻译，未经许可禁止转载。】

原文链接：https://thenewstack.io/after-a-decade-of-react-is-frontend-a-post-react-world-now/