React 为何赢得前端竞赛

React，前端框架之王——或者我应该说是“库”，因为 React 的纯粹主义者每隔 10 分钟就会提醒你，它不是一个框架。但我们先别纠结于技术细节。如果你在 2024 年还在进行任何严肃的前端开发，却还没有使用 React，那么恭喜你，你是个赶时髦的人。但对于我们这些普通人来说，React 已经成为了前端竞赛中无可争议的赢家，以下是你应该喜欢它（或者至少假装喜欢）的原因。

1.它得到了 Facebook 的支持——哦，我的意思是 Meta

让我们先从显而易见的真相说起：React 背后有 Meta 的支持。你知道，这家小公司只运营着 30 亿人的社交生活。如果你想在科技领域寻找稳妥的投资，那么由 Facebook 和 Instagram 背后的团队维护的产品或许是个不错的选择。没有什么比拥有一家最大的数据收集公司来确保你心爱的前端工具仍然适用更能体现“我们拥有互联网”了。

不过，嘿，别担心。这不是什么邪恶的公司垄断网络什么的。完全不是。放心，相信扎克伯格的追求，他会确保你的 React 应用能够顺利运行，直到永远（或者直到下一次隐私丑闻爆发）。

2.它是一个库，而不是一个框架（你终生都会听到这句话）

让我们澄清一下：React 不是一个框架。你会在开发者圈子里一遍又一遍地听到有人自豪地宣称这一点，仿佛它是一种荣誉勋章。“哦，你在用 Angular？真棒。我更喜欢 React，因为它给了我更大的灵活性。” 是的，React 开发者们喜欢提醒你，与那些“限制性”框架不同，React 允许你随心所欲地拼凑你的应用程序。你喜欢混乱，不是吗？

因为当你可以自由选择自己的路由、状态管理和项目结构时，谁会想要一个有凝聚力、固执己见的结构呢？这就像有人递给你一个没有任何说明的宜家平板包装，然后说：“你自己看着办吧。这样更有成就感。”

灵活性很棒——直到它变得不那么灵活，以至于你为了渲染一个按钮就需要 15 个依赖项。不过，至少 React 没有给你施加任何限制。这很值得，对吧？

3.基于组件的架构（一种在 JavaScript 中编写 HTML 的更优雅的说法）

创新！创造力！将 HTML 和 JavaScript 完美结合，形成名为 JSX 的混合体，这纯粹的天才之举。有了 React，你终于可以以前所未有的方式将结构与逻辑融合在一起。既然可以把所有内容都混杂到一个组件中，并称之为“进度”，为什么还要像过去那样将它们分开呢？因为过去我们清晰地区分了关注点。

等等，还有更多！你不仅可以用 JavaScript 编写 HTML，还可以像网页设计中的俄罗斯套娃一样，将组件嵌套在其他组件中。需要在模态框内的表单中添加按钮吗？没问题。只要不断嵌套，最终你会忘记组件的边界在哪里。React 似乎想同时挑战你的心理稳定性和对简洁代码的热爱。

不过，我觉得，想到用 React 写出来的前端代码很快就会看起来像一件前卫的现代艺术装置，还是挺有意思的。如果你的老板完全搞不懂你在干什么，还觉得你是个天才，能做出这么“复杂”的应用，那就更好了。

4.虚拟 DOM：太酷了，你甚至不需要理解它

啊，虚拟 DOM。React 的压轴大戏。它就是 React速度飞快的原因——至少，他们是这么跟你说的。我们大多数人只是点头附和，假装理解虚拟 DOM 到底做了什么，因为它听起来很复杂，也很厉害。这里有个专业小贴士：如果你措手不及，就说“它会对 DOM 进行 diff 检查，以找出最小更新”，人们就会认为你是个天才。相信我，这招很管用。

但虚拟 DOM 真正的美妙之处在于，你实际上并不需要了解它的工作原理。它就在那里，在后台运行，以可能很重要但几乎不可见的方式略微提升你的应用速度。可以把它想象成 React 在说：“别担心，我懂的。” 毕竟，你最不想遇到的就是在浏览表情包时被无聊的底层细节所困扰。

5.状态管理：因为单独的 Props 还不够让人困惑

如果你觉得状态管理很简单，那么显然你还没有真正了解 React 的各种状态管理方法。当然，React 自带了一个简单的useState钩子，但这只是入门级的入门。很快，你就会深入学习useReducer、useContext，或者更好的是，像 Redux、MobX 或 Recoil 这样的全新外部库。

为什么？因为 React 开发者天生就喜欢复杂的东西。仅仅通过几个组件传递 props 就太简单了。让我们来点不一样的！为什么不使用全局状态容器，让你的组件可以与代码中看似不相关的变量进行交互呢？这就像开发者玩扫雷游戏——一步走错，砰，一切都炸了。

当然，你可以把事情做得简单点，但那样还有什么乐趣呢？React 的乐趣有一半就在于看着初级开发者淹没在 state、props 和生命周期方法的海洋里，而你却给出诸如“你试过用 Redux Thunk 吗？”之类的明智建议。

6.挂钩：你现在离不开的闪亮玩具

React Hooks。还记得 React 是基于类的，生命周期方法风靡一时吗？哈，那已经是很久以前的事了——我记得是 2018 年吧？好吧，忘掉这些吧，因为 React Hooks 已经来了，它们绝对是革命性的。我说的革命性，是指它们让 React 解决了类组件带来的混乱。

有了钩子，你终于可以在几行代码中编写逻辑更复杂的组件了！想要在一个组件中获取数据、跟踪加载状态并触发副作用吗？没问题，只需添加几个useEffect钩子和useStatefor 循环，就搞定了。当然，如果你不理解依赖数组，可能会意外触发无限循环，但如果没有一点混乱，又何谈乐趣呢？

Hooks 是 React 的表达方式：“我们知道这已经很复杂了，所以这里有一个全新的范例让它变得更有趣。” 但你会继续使用它们，因为一旦你用上了 Hook，就再也回不去了。（抱歉，我有点儿想吐槽，实在忍不住。）

7.生态系统：数千个你可能不需要的软件包

React 生态系统非常庞大。我说的庞大，就像走进一家自助餐厅，却发现有 57 种不同的意大利面。需要路由器？React Router 可以满足你的需求。需要状态管理？Redux、MobX、Zustand、Recoil 或 GitHub 上任何新库，你都可以选择。JS 中的 CSS？Styled-components、Emotion，或者只是简单的 CSS 模块。选择无穷无尽。

你很快就会发现自己被 NPM 包淹没了。有些维护得很好，有些则像被遗忘的代码荒地，但这并不能阻止你加载package.json数十个依赖项。当然，你可以坚持使用最基本的依赖项，但既然你可以创建史上最臃肿的前端应用程序，为什么还要满足于原生的 React 呢？

毕竟，没有什么比花一整天时间在状态管理库之间进行选择而不是构建实际的应用程序更能体现“现代开发人员”的了。

8. React Native：一个代码库（几乎）统治一切

别忘了 React 的弟弟 React Native。编写一份代码库，就能同时部署到 Android 和 iOS 平台，这听起来很美好，对吧？React Native 确实做到了——某种程度上是这样。这就像一则精彩的电视广告。你能实现预期的 80%，但那剩下的 20% 呢？天哪，这得你付出努力。

“一次编写，随处运行”变成了“编写一次，然后花数周时间调试为什么你的 UI 在 Android 上看起来很好，但在 iOS 上却一团糟。”但是，至少你不需要编写单独的应用程序，而且谁还需要睡觉呢？

React Native 是 React 走向胜利的关键一环。它距离通用代码库的梦想足够近，足以让你欲罢不能，但又足够远，足以确保你永不停歇地调整和优化。完美的平衡。

结论：抵抗是徒劳的

那么，React 为何能赢得前端竞赛？因为它具备一切优势：企业支持、令人质疑人生选择的生态系统，以及让开发者时刻兴奋又沮丧的复杂性。你不必喜欢React，但说实话——你别无选择。

说到底，React 就像一部你不断看到广告的卖座电影系列。你不确定自己想不想看，但最终你会屈服，因为每个人都在谈论它。就这样，你现在成了我们中的一员，编写 JSX、管理状态，并向人们解释为什么“它不是一个框架”。

欢迎加入俱乐部。别担心，你会习惯的。