Angular和React，是前端开发中最受欢迎的两个 JavaScript 工具。他们都很强大，得到了很好的支持，并且由各自的社区积极发展。在这篇 Angular 与 React 的文章中，我们将仔细研究它们，看看它们在许多关键方面是如何比较的。
什么是Angular？
Angular是一个基于TypeScript的开源Web应用程序框架，由Google的Angular团队以及个人和公司社区领导。Angular是2016年的完整重写，由构建AngularJS的同一团队重写，该团队于2010年发布。
直到最近，Angular和AngularJS之间的区别仍然很重要，因为这两个框架在很大程度上是不兼容的。2022 年1月，谷歌终止了对 AngularJS 的长期支持，
Angular 框架由几个库组成，其中一些是核心库，一些是外部库。Angular 提供了内置功能，例如路由、表单验证、HTTP 处理等等。
关于 Angular 的有趣事实
- 它最初被称为“Angular 2”以区别于其前身，但在 2 年发布版本 4 时，“2017”被删除了。
- 最初的AngularJS是由Miško Hevery创建的。
- 它是用TypeScript编写的，TypeScript是JavaScript的超集。
什么是React ：基础知识
React 允许开发人员创建使用数据的大型 Web 应用程序，并且可以随着时间的推移而更改，而无需重新加载页面。它的主要目标是提供速度、简单性和可扩展性。
React 背后的核心原则是基于组件的架构、单向数据流和虚拟 DOM。React 还有一个强大的组合模型，它允许你使用其他组件中的组件。
关于 React 的有趣事实
- 它最初被称为“React.js”，但后来更名为“React”。
- 它是由Facebook的软件工程师乔丹·沃克（Jordan Walke）创建的。
- 它是用JavaScript编写的，而不是TypeScript。
Angular和React：比较
- 灵活性。我们对代码有多少控制权，以及根据我们的需求对其进行自定义有多容易？这在开发应用程序时提供了更多的自由度和创造力。
- 发展。设置项目并开始编码有多容易？这很重要，因为它将决定我们启动项目的速度。
- 工具。可用于开发和调试应用程序的工具有多好？这将决定我们启动和运行项目的速度，以及调试出现的任何问题的难易程度。
- 数据存储和状态管理。存储数据和管理应用程序状态有多容易？这将决定我们的应用程序的行为方式以及我们如何实时更新信息（理想情况下）。
- 性能。这非常重要，因为它可以确定应用在用户设备上的运行情况。这是我们不应该低估的，因为它可能意味着愉快的应用程序体验（用户会不断返回）和令人沮丧的应用程序体验（他们可能会放弃）之间的区别。
- 文档和社区支持。这将从根本上决定开发人员在遇到困难时获得帮助的速度，以及找到常见问题解决方案的难易程度。
Angular的灵活性
Angular 是一个固执己见的框架，并提供了许多开箱即用的内置功能。这使得它更容易上手，但这也意味着我们坚持使用 Angular 的做事方式。
Angular 还提供了广泛的选项来自定义代码并使其适应项目的需求。这些选项包括使用模板、自定义指令和组件等。
- 优点：我们可以专注于我们的项目，而不必担心做出艰难的决定。
- 缺点：如果我们想做一些不受支持或没有明确定义的事情，这可能会受到限制。
React 的灵活性
React 非常灵活，允许开发人员对代码做任何他们想做的事情。这为开发人员提供了很大的自由度来创建自定义组件并根据项目需求定制代码。
但是没有那么多功能既是祝福也是诅咒。
- 优点：它使我们能够完全控制我们的代码，并允许我们按照自己的方式做任何我们想做的事情。
- 缺点：这可能是压倒性的，因为有很多选择和决定要做。
Angular发展
Angular 是一个功能齐全的框架，带有自己的开发环境和用于设置和运行项目的工具。它还带有自己的TypeScript支持，这使得编写既干净又类型安全的代码变得容易。
Angular 还提供内置的路由和状态管理，这使得管理导航流和处理应用程序数据变得容易。通过集成 RxJS，Angular 为管理数据流和响应用户输入提供了一个强大的解决方案。
简而言之，Angular是一个强大的框架，我们可以做很多事情。但这也有其缺点。
- 优点：它是一个功能齐全的框架，有自己的架构;轻松创建具有大量组件的大型应用程序。
- 缺点： 可能很难学习;它有很多难以理解的样板代码。
在 React 中开发
React 基本上是一个 UI 库，我们可以在上面添加很多（部分支持）的东西。因此，虽然它可能开箱即用，但它的功能可以大大扩展。
例如，通过第三方插件，React 还提供路由和状态管理来管理导航流和处理应用程序数据。它的支柱之一JSX使得在JavaScript中编写类似HTML的语法变得容易，允许开发人员创建组件并快速将它们组合在一起。
React 还提供了一个虚拟 DOM，这使得更新 UI 变得容易，而无需重新渲染整个页面。借助 React Fiber，该框架也开始提供异步渲染等功能，这使得确定 UI 某些部分的优先级并确保为用户提供流畅的体验变得容易。
- 优点： 易于设置和入门;许多第三方附加组件;用于快速页面更新的虚拟 DOM;比Angular更柔和的学习曲线。
- 缺点：我们将经常使用的许多扩展都不是官方的，扩展 React 虽然完全可能 – 需要努力。
Angular中的工具
正如我们提到的，Angular 有一个强大的 CLI，可用于快速搭建项目、生成组件和服务以及构建和部署应用程序。
Angular还有Augury，这是一个强大的Chrome和Firefox开发工具扩展，由Angular团队开发，用于调试和分析Angular应用程序。
- 优点： 强大的 CLI 和 Augury，用于调试和检查组件。
- 缺点： 没有官方的 VS 代码扩展。
React 中的工具
React易于设置和开始开发，并且带有自己的Visual Studio Code扩展，用于开发和调试（由Microsoft开发）。
React 强大的 CLI 被称为 Create React App，它有很好的文档记录，使用起来非常简单。正如其网站所说，“要学的少，只有一个依赖，没有锁定”。
它还具有React Developer Tools（测试版），支持Chrome，Firefox和Edge。
- 优点： 强大的 CLI 和 React 开发人员工具，用于调试和检查组件;也是官方的VS代码扩展。
- 缺点： 开发人员工具自 2015 年以来一直处于测试阶段，并且评论适中。
Angular 中的数据存储和状态管理
Angular有一个名为NgRx的第三方状态管理解决方案，它在很大程度上受到Redux的启发，可以轻松管理应用程序的状态。
它还具有Google Firebase的官方绑定，其中包括对实时数据库Cloud Firestore的支持。
React 中的数据存储和状态管理
React 还有几个第三方库，如 Redux 和 MobX，可用于管理应用程序的状态。
可悲的是，Google Firebase 没有绑定——考虑到 React Native 有绑定，这很奇怪（我们将在另一篇文章中讨论）。
Angular性能
Angular通常被认为是相当快的，特别是与Ember或Knockout等其他框架相比。这部分是因为使用了 AoT（提前）编译器，它会在将代码发送到浏览器之前对其进行编译，从而加快加载和执行速度。来自 Angular 文档：
Angular 提前 （AoT） 编译器在浏览器下载并运行该代码之前的构建阶段将您的 Angular HTML 和 TypeScript 代码转换为高效的 JavaScript 代码。在生成过程中编译应用程序可在浏览器中更快地呈现。
在 React 中的表现
即使使用 Angular 的 AoT 编译器，React 通常也被认为比 Angular 快得多，这主要是因为它使用了虚拟 DOM（实际 DOM 的 JavaScript 表示）。
当应用程序的状态发生变化时，React 将更新虚拟 DOM，然后只更新实际更改的 DOM 部分，而不是重新渲染整个页面。
此外，React 被认为非常擅长处理大型数据集（参见如何在基于 React 的应用程序中处理大量数据）。
最后，React 还有一个有用的指南来进一步优化性能。
Angular 中的文档和社区支持
Angular 有一个广泛的官方文档，这对于我们需要检查参考文献非常有用，但它也可能非常压倒性。
你可能会说，“拜托，拥有大量文档怎么可能是一件坏事？当然不是！但是，对应该如何做事情过于固执己见可能是一个问题，因为除非我们有良好而简单的设计原则，否则我们将不得不花费大量时间来解释我们的基本原理是什么 – 以及如何实际做事。
例如，像 Django 和 Vue 这样不相关的全功能框架经常因其文档的简单性而受到称赞。Angular显然不是这种情况。
所以，是的，Angular 开发人员必须做大量的阅读才能真正掌握正在发生的事情。好消息是文档确实涵盖了这一点。
资源
有一件事是肯定的：我们永远不会耗尽Angular的教育资源。它应有尽有！它具有：
React 中的文档和社区支持
React 不那么固执己见，有更简洁的文档，这是我个人所重视的。但话又说回来，我们可以用 React 做得更少——至少是开箱即用的。
一个很好的入门入门是官方的教程：React入门，它不是那么长，介绍了在Act中达到“初级”级别所需的一切。
资源
流行的 React 论坛包括：
- DEV的React社区
- Hashnode’s React 社区
- Reactiflux的在线聊天
- Reddit 的 React 社区
当然，还有Stack Overflow和官方的React Blog。
Angular与React：摘要
总结一下这种比较，Angular 是一个强大的框架，它提供了许多内置功能，并且具有陡峭的学习曲线，但它也为我们的代码提供了很大的灵活性和控制。它具有强大的CLI，官方状态管理解决方案和不错的性能。
React 是一个更灵活、更轻量级的库，具有更温和的学习曲线，但它的内置功能也更少，需要更多的工作来添加新功能。它还具有良好的CLI，第三方状态管理解决方案和更好的性能。
这两个框架都有广泛的文档和大量的教育资源和社区支持。
| Angular | React | |
|---|---|---|
| 灵活性 | 具有内置功能的自以为是的框架 | 更灵活，但开箱即用的能力较差 |
| 发展 | 学习曲线陡峭，但功能强大 | 具有更温和的学习曲线，但需要更多的工作来添加功能 |
| 工具 | 有一个很好的CLI，Augury（Chrome / Firefox DevTools扩展） | 有一个好的CLI，React Developer Tools（测试版），一个VS Code扩展 |
| 数据存储和状态管理 | 拥有谷歌火力基地的官方绑定 | 拥有第三方库，如 Redux 和 MobX |
| 性能 | 快速，得益于 AoT（提前）编译器 | 更快，得益于虚拟 DOM |
| 文档和社区支持 | 广泛的官方文档，大量的教育资源和社区支持 | 简洁但有效的官方文档，大量的社区支持 |
人气
就受欢迎程度而言，React 无疑是两者中最受欢迎的框架。
仅凭这一点并不一定意味着一个比另一个更好，公平地说，React和Angular都有相当大的活跃社区，背后有巨大的技术 – 分别是Meta（Facebook）和Alphabet（谷歌）。
使用 Angular 和 React 创建的知名应用程序
React 已被用于创建一些世界上最受欢迎的 Web 和移动应用程序。其中一些包括Facebook，Instagram，Airbnb，Dropbox和Twitter。
Angular还被用于创建一些世界上最受欢迎的应用程序。其中包括YouTube，Netflix，PayPal，Upwork和The Guardian。
谷歌创建的产品将使用Angular，而Facebook创建的产品将使用React。但正如我们所看到的，Angular 和 React 也被与它们中的任何一个都没有关系的巨头广泛使用。
Angular与React：何时使用每个？
如果我们需要一个固执己见并提供许多内置功能的框架，Angular 可能是正确的选择。
另一方面，如果我们需要一个更灵活的库并允许我们创建自定义解决方案，那么 React 可能是正确的选择。
更具体地说，对于需要可扩展和可维护的项目来说，Angular 可能是一个很好的选择，这些用途可能很容易超出初始范围。
另一方面，对于需要处理大型数据集的项目以及需要高度交互的项目来说，React 可能是一个不错的选择。
只是为了陈述显而易见的事实：如果我们的团队已经熟悉两者中的任何一个，那么最好选择他们已经熟悉的那个。
10 常见问题
在本节中，我们将介绍关于 Angular 与 React 的十个有用注意事项。
1. Angular 和 React 之间的实际区别是什么？
Angular 是一个用于构建 Web 应用程序的综合 JavaScript 框架，而 React 是一个用于构建用户界面的 JavaScript 库。Angular 旨在提供开发全栈应用程序所需的所有工具，而 React 只专注于开发的前端方面。
这两种技术在结构方式和处理数据的方式上也有所不同。
Angular 是一个 MVC（模型-视图-控制器）框架，它允许开发人员通过分离逻辑和表示来创建交互式单页应用程序。
另一方面，React 遵循基于组件的方法，该方法允许开发人员将复杂的 UI 分解为可以在不同项目中重用的较小组件。
2. 为什么 React 比 Angular 快？
React 通常比 Angular 快，因为 React 使用虚拟 DOM 快速渲染对 UI 的更改，而无需重新渲染整个页面。另一方面，Angular有一个真正的DOM，每当有变化时都会更新整个页面。这意味着在渲染具有许多组件的大页面时，Angular 可能会变慢。
使 React 更快的另一个因素是它对服务器端渲染的支持。这允许开发人员在服务器上快速渲染其部分应用程序并将它们发送回客户端，使其在加载时间方面比 Angular 快得多。
最后，React 没有那么多内置功能，因此可以更轻松地进行优化，并且通常它还能够更有效地处理大型数据集。
3. 为什么 React 比 Angular 更受欢迎？
首先，对于大多数开发人员来说，React 是一种更简单、更容易学习的技术。它使用普通的JavaScript，并且还遵循基于组件的方法。
React也比Angular早几年出现，Angular已经在努力应对其前身AngularJS的难以置信的痛苦过渡。所有这些都只是让许多开发人员更容易选择 React，甚至促使许多人从 AngularJS 切换到 React。
4. Angular 比 React 更好吗？
不，不是。Angular 和 React 都是很棒的工具。对于需要处理大型数据集和高度交互的项目来说，React 似乎是一个更好的选择，在这些项目中，性能上的一些优势可能很重要，或者我们只需要快速有效地创建用户界面。
但是，如果我们需要一个更全面的框架，它高度可定制并且可以处理复杂的应用程序，并且/或者如果我们喜欢TypeScript（我当然喜欢！），那么Angular可能是更好的选择。
5. React比 Angular 更容易吗？
这是一个肯定的，因为 Angular 确实有一个陡峭的学习曲线并且可能很难学习。但是，嘿，您不可能同时拥有这么多内置功能并且非常容易上手，对吧？（“拿着我的啤酒，”Vue说。
此外，由于它使用纯JavaScript，已经熟悉该语言的开发人员可以轻松学习React，而无需学习像TypeScript这样的新语言。（“拿着我的JS或TS啤酒——随便你怎么想”，Vue带着厚颜无耻的笑容说。
6. 如果我们知道 React（反之亦然），我们能学习 Angular 吗？
是的，我们能。尽管这两种技术具有不同的开发方法，但基本原理仍然相同。我们需要学习一种新的语言/扩展（TypeScript for Angular 和 JSX for React）。但是，尽管存在所有差异，但两个框架都使用组件并具有相似的API，这使得在它们之间切换变得更加容易。
7. 我们应该从 React 切换到 Angular 吗？
如果我们的团队已经熟悉这两种技术，那就坚持下去吧。
如果我们事先做出决定，则不需要迁移项目和重构大量代码。在这种情况下，我们可能会开始考虑以下几点：
- 如果我们需要一个可以处理复杂应用程序的综合框架，或者我们正在寻找更多的自定义功能，那么 Angular 可能是更好的选择。
- 如果我们需要处理大型数据集，并且我们需要一些易于学习的东西，那么 React 可能是更好的选择。
8. 对于我们的职业生涯来说，Angular 比 React 更好吗？
这取决于我们的目标是什么。如果我们想专注于 JavaScript 开发，那么任何一个选项都是一个不错的选择;了解 TypeScript 可能会给我们带来优势。无论如何，Angular 和 React 都是广泛使用和需求量很大的技术，所以它实际上归结为我们更喜欢哪一种。
也就是说，React比Angular更受欢迎，如果我们也希望深入研究移动应用程序开发，那么React Native（也使用React）可以成为进入这个世界的完美切入点。
9. Angular 可以和 React 一起使用吗？
等等——什么？你为什么会…不，它不能。Angular 和 React 是完全不同的工具，彼此不兼容。
10. 那么，我们应该学习 Angular 还是 React ？
同样，这取决于：
- 如果我们需要一个固执己见并提供许多内置功能的框架，和/或我们更喜欢 TypeScript，那么 Angular 可能是正确的选择。
- 如果我们需要一个更灵活的框架，允许我们创建自定义解决方案，和/或者我们更喜欢普通的JavaScript，那么React可能是正确的选择。
Angular和React结语
自 2010 年和 2013 年首次发布以来，Angular 和 React 已经走了很长一段路，现在两者都是成熟且流行的工具，可用于各种项目。
他们都得到了很好的支持，积极开发，并且拥有庞大的开发人员社区，Angular得到了Google的支持，React得到了Facebook的支持（微软也得到了相当重要的支持）。
想一想，但要认真思考：
- 项目要求是什么？
- 团队目前的技能和已经在使用的技术是什么？
这些是一些值得问的进一步问题，这些问题将突出我们的偏见（是的，我们都有）：
- 我们喜欢Facebook的开发者支持吗？（React）
- 我们喜欢谷歌和他们的文档和软件开发方法吗？（Angular）
- 如果一个更简单的库有用且设计良好，我们可以接受吗？（React）
- 我们会使用一个解决我一切的框架，即使非常固执己见？（Angular）
如果我们需要更轻量级和易于使用的东西，React 是一个很好的选择，它也是最受欢迎的。它还允许开发人员快速创建动态用户界面，这以后可以成为使用 React Native 构建移动应用程序的基础块。相比之下，如果我们需要一些功能更丰富和固执己见的东西，Angular 是更好的选择，因为我们将能够开箱即用地做更多的事情（在阅读其冗长的文档之后）。
