十年前，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 框架也为前端开发者提供了越来越可行的替代方案。
在 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 提出批评。到了 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 的一些抱怨已经逐渐减少或得到了妥善解决。例如，学习曲线现在不再是一个大问题——自 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——以及像 next.js 这样的相关框架——仍然广受欢迎。但不可否认的是，开发者现在有了更多的选择。astro 和 svelte 都不使用虚拟 dom，所以开发者可以选择一个不依赖 react 的 web 框架（尽管 astro 仍然保留集成 react 的能力）。
微软的 edge 团队正在推动一种“html 优先”的方法，alex russell（他是那个团队的成员）将其描述为“现代 web components 加 html 优先的架构”。
不管怎样，前端开发不再像几年前那样与 react 紧密绑定。如果你是刚进入这个行业的 web 开发者，甚至可以考虑完全不使用 react——尽管这可能会在短期内影响你的就业机会。但至少这是一个值得认真考虑的选项，它或许能帮你吸引到那些具有前瞻性眼界的雇主，从而为你的职业生涯开辟新的道路。
声明：本文由 infoq 翻译，未经许可禁止转载。
