React 正在杀死 Angular 吗？

作者｜Hassan Trabelsi

译者 | 张卫滨

策划 | 张卫滨

这是一个老生常谈的争论（在技术时代，这是在所难免的）：Angular 对战 React。这就像“先有鸡还是先有蛋”的难题，不过这个问题是针对 Web 开发人员的。在过去的几年间，如果你曾经出现在开发人员的咖啡机旁或者参加过技术论坛，那么你可能会听到关于哪个框架才是霸主的窃窃私语、争论，甚至是偶尔出现的键盘对决。

现在，我们明确一下对战的双方。一边是经验丰富的战士 Angular。它经历过风雨，见证了潮流的起起落落，并拥有炫酷的特性。而另一边则是 React，它是年轻的神童。它来到这个世界，惊艳了所有人。随着它的迅速走红，有人开始怀疑 React 是否就是那个让老将 Angular 望尘莫及的后起之秀。有传言说，React 花哨的行为正在侵蚀 Angular 稳扎稳打的基石。

但是，对于 Angular 来说，React 真的是歌利亚的大卫吗（按照传说，歌利亚是身材巨大，拥有无穷力量的巨人，最后牧童大卫用投石弹弓打中歌利亚的脑袋，并将其杀死，日后这个牧童成为了著名的大卫王——译者注）？或者这只是一个技术神话，就像“重启能够解决 99% 的 IT 问题一样”？（好吧，这个说法也许就是真的）请继续关注我们对这场争论的深入探讨，一起揭开炒作背后的真相！

简 史

Angular：从默默无闻到技术王者

我们将时光拨回到 2010 年，当时，jQuery 是最酷的东西，世界各地的开发人员都在与臭名昭著的意大利面条式代码抗争。就像超级英雄突然从阴影中现身一样，谷歌为我们引入了 AngularJS。AngularJS 拥有双向数据绑定和依赖注入等有趣的功能，许多开发人员自己都没有意识到这就是他们需要的英雄。将时间快进一些，AngularJS 长大了，也去掉了“JS”，变成了威严的“Angular”。就像我们最喜欢的电影系列一样，它会不断推出续集（也就是技术术语中的版本），让我们目不暇接！

React：酷炫的新浪潮

现在，我们把时间推移到 2013 年。就在 Angular 掀起热潮的时候，一个新的玩家进入了这个领域。从 Facebook 天才实验室直接走出来的 React 突然登上了舞台。但 React 并不是普通的初出茅庐者，它就像一个新生，第一天就在才艺表演上让所有人惊叹不已。凭借其创新性的虚拟 DOM 和基于组件架构的全新用户界面，React 很快成为整个领域的焦点。它简单易用的特性和灵活性使其备受青睐，很快就从新生儿变成了舞会之王！

React 的优势

基于组件的架构

还记得小时候玩过的乐高积木吗？只要把五颜六色的积木拼接在一起，你就能搭建出任何东西，从城堡到宇宙飞船。React 基于组件的架构就像是 Web 开发中的乐高积木。它允许开发人员将 UI 分解成可重用的组件，使得构建和维护复杂的应用程序就像是玩儿心爱的积木一样有趣和简单。最棒的一点是什么呢？那就是如果你需要更换一个组件，你不必拆除整个城堡。

虚拟 DOM

在 Web 开发领域，速度是最重要的。React 的虚拟 DOM 就像是这个领域的超级英雄。React 不会更新整个页面，而是聪明地只更新发生变化的部分，因此它的速度非常快。这就好比你有一个私人助理，他知道你把钥匙落到了什么地方，这样你就不用把整个房子翻个底朝天了。

灵活性

React 就像是一把方便的瑞士军刀，你希望每次露营都带上它。如果你需要与不同的库集成？React 会助你一臂之力。无论你是将它与 Redux 搭配进行状态管理，还是与 Axios 搭配进行 HTTP 请求，React 都能很好地与其他库配合，确保你具备探险所需的所有工具。

强大的社区支持

每个优秀的工具背后都有一个更强大的社区。React 也不例外。React 社区拥有一支由开发者、爱好者和向导组成的大军，这可以说是一座金矿。从教程到第三方库，如果你有问题，很可能早就已经有人回答过了。这就像拥有一个全天候的技术支持团队，不过这要比它酷得多。

Angular 的优势

综合的框架

想象一下，如果你入住一个度假胜地，从 SPA 中心到美食餐厅，一切都触手可及。这就是 Angular，它不仅仅是一个框架，还是一个完整的生态系统，具备大量可开箱即用的工具。无需寻找任何第三方库，Angular 为你提供了开发过程中可能需要的一切。

双向数据绑定

还记得在童话故事里那些能够同时显示现在和未来的魔镜吗？Angular 的双向数据绑定与之颇有几分神似。它在模板（视图）和组件（模型）之间搭起了一座桥梁，确保其中的任何一项发生变化都能反映到另外一项中。这就像有一个私人神仙教母，能够确保你的舞会礼服（在本例中，也就是用户界面）始终保持完好无损。

依赖注入

你可以将 Angular 的依赖注入视为代码中的近藤麻理惠（《怦然心动的人生整理魔法》一书的作者，以整理家庭内务而著名——译者注）。它能确保每段代码都处在自己恰当的位置上，从而增强模块化和可重新性。有了 Angular 的依赖注入，组件就能轻松获取它们所需的服务，让你的代码库变得整洁且令人愉悦。

TypeScript

我们都有一个对语法很挑剔的朋友，对吧？对于 Angular 来说，TypeScript 就是这位朋友。通过提供强类型，TypeScript 可以确保你在编译时就能捕获到那些讨厌的错误，而不是在用户试图查看购物车的时候。这就像为你的代码配备了一个内置校对员，确保一切都处于最佳状态。

Angular CLI

如果你曾经希望有一根魔法棒可以简化你的开发过程，那就来看看 Angular CLI 吧。借助其强大的命令，你可以创建项目、添加特性，甚至只需挥挥手（或者更确切地说，一个简单的命令）就能运行测试。这就像在终端里有一个精灵，随时准备实现你的开发愿望。

React 和 Angular 的主要区别

理念

就其本质而言，React 就像一位信奉极简主义的朋友。他只有五件衣服，但是每件衣服的搭配都非常漂亮。它是一个库，只关注视图层，在项目的其他方面，允许你去自由探险。

而 Angular 则像是一位拥有复式衣帽间和各种小玩意儿的朋友。它是一个完整的框架，提供了开箱即用的路由、状态管理、HTTP 客户端等解决方案。它包罗万象，能够为你带来连贯的开发体验。

学习曲线

React 因其简单易用而受到广泛称赞。它采用了基于组件的方式，就像在初学者赛道上练习滑雪，因此深受希望涉足 web 开发的初学者的喜爱。

Angular 的综合性更像是挑战顶级难度的滑雪道。一开始，它可能令人望而生畏，尤其是其独特的术语和理念，但是一旦你掌握了窍门，你就能像专业人士那样应对 web 开发的挑战了。

社区和生态系统

随着 React 的广泛采用，它成为了一个热闹的社区，就像乡村中的集市那样。每个需求都有一个摊位，无论是使用 Redux 进行状态管理，还是使用 React-Router 进行路由选择。社区充满了活力，拥有大量的资源、插件和第三方库。

有谷歌强大支持的 Angular 则像一个盛大的狂欢节。它拥有庞大的官方库、丰富的工具和经受了考验的社区，为成熟而广阔的生态系统做出了贡献。

性能

在性能方面，React 和 Angular 就像精英速滑运动员，各有千秋。React 采用虚拟 DOM，确保了高效更新，使其能够快速高效。而 Angular 则通过预先编译（AOT）和变更探测，确保始终能够领先一步，提供一流的性能。

真实现状：采用趋势

React 与 Angular 的采用数据对比

首先，我们看一下统计数据。虽然受欢迎程度并不代表一切 (只要问问流量电影的主角就知道了)，但它确实能够让我们了解开发者领域的趋势。

• React：自诞生以来，React 便迅速崛起。在 npm 上每周有数百万的下载量，很明显这个库已经打动了全世界的开发者。这不仅仅是数量的问题，用 React 构建的项目和应用程序的质量也令人印象深刻。

• Angular：Angular 在受欢迎程度方面也不逊色，一直保持着自己的地位。凭借稳定的下载量和庞大的社区，Angular 的综合性显然引起了许多人的共鸣。它就像一个可靠的朋友，当你需要搬家时，尽可以打电话给他，它可能并不新颖夺目，但它能完成任务。

大联盟：知名代言人

现在，我们来谈谈代言人。就像运动员有自己的赞助商一样，框架和库也有自己的知名用户。在这个领域，React 和 Angular 都有一些重量级的用户。

• React：从社交媒体巨头 Facebook（毕竟是他们创造了 React）到流媒体巨头 Netflix，许多科技大公司都因 React 的灵活性和性能而采用了它。不仅是科技界，各行各业的公司，无论是酒店业的 Airbnb 还是媒体业的《纽约时报》，都搭上了 React 的列车。

• Angular：Angular 背后的策划者谷歌在其多个平台上都使用了 Angular，这充分说明了 Angular 的可靠性。但它的粉丝俱乐部并不止于此。像福布斯、宝马，甚至美国国家航空航天局（NASA，没错，就是太空人！）等公司都在其数字领域中使用了 Angular。

影响选择 React 和 Angular 的因素

这是一个古老的难题，到底是该选择 React 还是 Angular？这就像在巧克力和香草、海滩度假和登山度假之间做出选择一样。两者各有其长处，但最佳选择往往取决于具体的情况。让我们来分析一下哪些因素可能会促使我们倾向于选择其中的某一个。

项目需求

• React：我们可以把 React 想象成时髦的定制西装。它非常适合需要特定功能而不需要额外装饰的项目。基于组件的特性使其支持高度定制，因此非常适合需要量身定制的独特项目。

• Angular：而 Angular 就像一套成衣。它配备了你所需要的一切。对于需要内置功能的综合解决方案的项目，Angular 可能是你的首选。

团队专长

团队的专业知识会在很大程度上影响你的选择。如果你的团队精通 React 并已使用多年，那么坚持使用自己熟悉的产品可能会更有合理。反之，如果你的团队中有 Angular 专家，又何必冒险进入陌生的领域呢？

长期维护

在可维护性方面来看，React 和 Angular 都有各自的特点。请考虑项目的长期目标。你需要易于扩展的产品吗？是否需要定期更新？React 的库方式提供了灵活性，而 Angular 包罗万象的特性可能会简化更新和扩展。

总 结

在结束这次启蒙之旅的时候，让我们来澄清一下。React 并没有“杀死”Angular，而 Angular 也没有将 React 推向被遗忘的境地。它们就像两位才华横溢的艺术家，各有其风格和天赋。

在 React 和 Angular 之间做出选择，并不是要追赶最新的潮流或选择“哪一个更好”。而是了解自己的需求，评估自己的资源，然后做出明智的决定。毕竟，最好的工具是能完成工作的工具，而不是炒作最多的工具。

https://blog.stackademic.com/is-react-killing-angular-the-truth-behind-the-hype-6294e2cf6688

从新 React 文档看未来 Web 的开发趋势 (https://www.infoq.cn/article/Tv3SyqoivXMWUoj8qSMT)

我被 React 劫持了，很痛苦又离不开 (https://www.infoq.cn/article/CZKMjHaxbf1Z7xcSzisX)

2023 重学 Angular(https://xie.infoq.cn/article/7baec545b8202471064494a69)

Angular v15 发布：可以脱离 NgModules 构建组件了 (https://www.infoq.cn/article/oONc5r5opJF64kBCtzIv)

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