删除 React 只是离开你的代码库的一个弱点

2025-06-04

删除 React 只是离开你的代码库的一个弱点

向Chesty Puller致歉，因为我盗用了他的名言“疼痛是身体的虚弱”。

2024年了，你即将开始一个新项目。你会选择熟悉且喜爱的React框架吗？还是会考虑其他热门的新框架，比如Astro、Enhance、11ty、SvelteKit或普通的 Web Components？

在这篇文章中，我将列举为什么我不再使用 React，并且在与该库斗争了 7 年之后，过去两年我都没有再使用过它。

附言：这篇文章是我在休假前写的。嗯，肯定是时代潮流起了作用，因为我们看到一大堆文章都在表达开发者对 React 的不满。

正如Zach Leatherman在他的文章《React 批评的历史参考》中详述的那样，并不是说 React 一直没有受到批评，但看起来我们确实已经到达了一个临界点。

闪亮物体综合症

React 充分利用了闪亮物体综合症的优势。

闪亮物体综合症是指人们过度关注某个新潮的想法，但一旦有新的东西可以取代它，人们就会完全放弃它。

乌鸦

那么，React 是如何与“闪亮物体综合症”相提并论的呢？显然，当 React 最初由 Facebook 的 Meta 库发布时，引起了很大的轰动，开发者们蜂拥而至。

无论有意还是无意，React 都充分利用了这种情况，持续交付或承诺交付库的变更，每 12 到 18 个月就会发布一个全新的 API。这些新的 API 及其带来的重大变更，正是你忍不住追逐的闪亮新事物。你会花费多个周期来学习新的 API 并升级你的应用程序。这感觉就像你在做一些事情，但实际上，你只是在原地踏步。

就在我编写 React 应用程序的时候，该库经历了一些重大变化。

  • 2013年：JSX
  • 2014：React createElement API
  • 2015：班级组件
  • 2018：函数组件
  • 2018：Hooks
  • 2023：React 服务器组件

据我估计，如果您在过去十年中一直维护 React 代码库，那么您至少重写了应用程序三次，甚至四次。

先把 React 排除在外，想象一下你得向老板解释，你需要每 2.5 年彻底重写你的应用程序。你可能第一次重写获批，第二次重写也可能获批，但你绝对不可能第三次和第四次重写获批。

选择 React，我们就承担了很多计划外的工作。想想看，如果我们不被那些“酷小子”们在 React 上所做的一切所左右，我们能为用户和公司创造多少价值。

停止签署重大变更！

最小权力规则

在构建 Web 应用程序时，我们应该记住最小功率规则。

在设计计算机系统时，人们常常面临选择：是使用功能更强大的语言来发布信息、表达约束条件，还是解决某些问题。本研究探讨了语言选择与信息可重用性之间的权衡。“最小功率规则”建议根据特定目的选择功能最弱的语言。

W3C - https://www.w3.org/2001/tag/doc/leastPower.html

最小功率规则

在 Web 开发中，我们可以理解为应该以 HTML 为基础构建内容，在必要时添加 CSS 进行呈现，最后再加入 JavaScript 来添加交互性以及其他 HTML 和 CSS 无法处理的功能。React 则完全颠覆了这一思路，它首先使用 JavaScript 生成 HTML 内容，然后添加 JavaScript 进行 CSS 呈现，最后再添加更多 JavaScript 来实现交互性。

这违反了最小权力规则。

推介会

这是一个简单的 React 标题组件。

function MyHeading({ children }) {
  return (
      <h2>{children}</h2>
  );
}
Enter fullscreen mode Exit fullscreen mode

看起来你正在编写 HTML，但实际上并非如此。你编写的是 JSX（JavaScript 语法扩展）。本质上，JSX 只是为 提供了语法糖React.createElement(component, props, ...children) function。因此，JSX<MyHeading>My Heading</MyHeading>代码编译后为：

React.createElement(
  MyHeading,
  {},
  'My Heading'
)
Enter fullscreen mode Exit fullscreen mode

虽然您可能认为自己正在编写 HTML，但实际上您正在向应用程序添加许多不必要的（可能是意外的）JavaScript。

造型

JS 库中的 CSS 在 React 应用程序中非常流行，因为它们允许你 避免学习 CSS采用基于组件的样式方法。最初的 CSS in JS 库是由Meta 的 React 团队的前端工程师Christopher Chedeau开发的。

让我们使用 JSS 作为示例：

import React from 'react'
import {createUseStyles} from 'react-jss'

const useStyles = createUseStyles({
  myButton: {
    color: 'green',
    margin: {
      top: 5,
      right: 0,
      bottom: 0,
      left: '1rem'
    },
    '& span': {
      fontWeight: 'bold'
    }
  },
  myLabel: {
    fontStyle: 'italic'
  }
})

const Button = ({children}) => {
  const classes = useStyles()
  return (
    <button className={classes.myButton}>
      <span className={classes.myLabel}>{children}</span>
    </button>
  )
}
Enter fullscreen mode Exit fullscreen mode

这很棒，因为我们能够将我们的样式与我们的组件放在一起，但这是有代价的：性能。

快速回顾一下浏览器的工作原理：首先，它会下载 HTML。然后，它会下载head标签中的 CSS 并将其应用于 DOM。最后，它会下载、解析并执行 JavaScript 代码。由于您已在所有组件中添加了 CSS 声明，因此 JavaScript 包会比非 CSS in JS 解决方案的包更大。由于包体积较大，解析代码所需的时间也会增加，此外，由于需要额外调用函数来序列化 CSS，执行时间也会增加。

淹没在 js 中

我们正被 JavaScript 淹没。

少用一点。

这并不是什么新建议。

现在谁在运行 React？

真的没有。谁在运行 React？React 的最后一个官方版本（截至本文撰写时）是 18.2.0，发布于 2022 年 6 月 14 日。那是 19 个月前的事了。对我来说，这意味着 Facebook呃，Meta，不再对推动库的发展感兴趣，相反，在我看来，已经将React 的领导地位拱手让给了框架。

使用框架

这是好事吗？我不太确定。这种安排的一个问题是，Vercel 是一家风险投资支持的初创公司，他们需要向投资者展示投资回报。正如我们过去一年在行业中看到的那样，风险投资正在枯竭。但愿 Vercel 不会出什么问题，但如果 Vercel 消失了，Next.js——以及更大程度上 React——会怎样？

此外，人们对 Vercel 目前对 React 的管理也存在担忧。例如，Next.js 使用 React 的 Canary 版本，因为这些版本“被认为是稳定的库”。 这在我看来相当奇怪。此外，Next.js 覆盖了 node fetch 的全局实现，这会导致一些问题——Next.js 团队似乎正在重新考虑这个决定。

我不是唯一一个担心这个问题的人，因为 Remix 团队已经将 React 分叉到他们的组织中了。虽然还没有提交任何代码，但这确实让人感到疑惑。

我们接下来要去哪里？

这篇文章可能让你感觉很负面，在我看来，它源于我作为开发者和最终用户处理 React 应用程序时的挫败感。更别提我之前提到的 GitHub 重写，看起来进展不太 顺利。

需要明确的是，你之前的项目选择 React 并没有错。它曾经非常受欢迎。很多公司都在招聘 React 开发人员，而你也需要一份工作。这里没有人说你用 React 来发展事业是错误的。

不过，这是我主动提出的建议：

  • 如果您今天要开始一个新项目，请评估其他选项，如 Enhance、Astro、11ty、SvelteKit 和 vanilla Web Components。
  • 如果您目前正在维护现有的 React 应用程序，请研究如何将 Web 组件添加到项目中。Web 组件与库无关，因此您可以着手打造面向未来的应用程序。（Angular、React、Vue）
  • 询问如何使用 HTML 和 CSS 来替代当前在 JavaScript 中所做的一些事情。

结论

说 React 是你代码库中潜伏的负担，可能有点夸张，但事实真的如此吗？你即将迎来 React 19.0 的最终版本，它将引入许多重大更改，迫使你再次重写应用程序。

为什么？

是 React 引以为豪的开发者体验优势吗？还是更好的用户体验？都不是！

我的建议是开始研究如何从代码库中移除这个弱点。想想如何降低再次重写的风险。

然后通过学习网络基础知识进一步提升水平。

Web 是向前向后兼容的。你所学习的 HTML、CSS 和浏览器 API 知识将在未来 25 年对你大有裨益，而 JavaScript 库的流行程度却并非如此。摆脱 React 和其他笨重框架的束缚，加倍精进 Web 基础知识，你将确保你的职业生涯和代码库都面向未来。

文章来源：https://dev.to/begin/removing-react-is-just-weakness-leaving-your-codebase-4pin
Devto 翻译
PREV
CSS中的步进进度条
NEXT
如何在 5 分钟内与 Google Sheets API 集成设置你的 Pizzly 🐻返回代码👩‍💻👨‍💻结论