深度比较：Angular 与 React找到最适合开发者的框架

JS 2022 现状调查显示，虽然在过去几年中出现了许多新框架，但 React 和 Angular 仍然占据主导地位。

前端框架使用率随时间的变化。来源：2022 年 JS 现状

前者的立场似乎相当明确——虽然 React 的使用率一直在稳步攀升，但其竞争对手却在起伏不定。即使是 Angular，React 的“宿敌”，已经开发了近 3 年，也正在过时（而且说得相当快——它在 2022 年的使用率下降了 5%）。

然而，尽管如此，仍然有开发人员表示 Angular 几乎总是更适合前端 Web 应用程序开发。让我们更深入地研究一下，了解这个观点的来源，为什么它实际上是真的，以及为什么 React 可能不会很快完全驱逐 Angular。

深入了解 Frontend 的历史

为了更好地了解这些技术之间的差异以及使用它们的优缺点，我们需要更深入地了解它们的概念。尽管 React 和 Angular 本质上都是为了解决同一个问题而设计的——在尽可能短的时间内以尽可能低的成本为 Web 应用程序创建最好的前端——但它们之间存在显着差异。让我们首先看看这些技术创建背后的历史和动机。

Angular 是市场上出现的两个产品中的第一个，它迅速彻底改变了创建前端 Web 应用程序的方法。当 Google 团队于 2010 年 10 月首次将 AngularJS 推向市场时，它很快就获得了 JavaScript 框架中最受欢迎的地位。它提供的功能，例如双向数据绑定、依赖关系注入、路由包等，使前端开发人员很快就爱上了它。这些功能有助于解决程序员在创建新的动态 Web 应用程序时面临的许多问题。

随着这项技术的发展，其复杂程度逐渐增加，这在社区中引起了越来越多的不满。这最终导致决定重新设计整个框架。就这样，所谓的“Angular 2”诞生了。它引入了许多改进，例如：

• 对移动应用程序开发的支持： 专为构建移动应用程序量身定制的多项功能和优化。这包括对移动设备上的性能、响应能力和用户体验的增强。

• 改进的更改检测机制： 对变化检测机制进行了全面改进，以提高效率和性能。这种优化减少了在整个应用程序中检测和传播更改的开销，从而提高了整体性能，尤其是在大型和复杂的应用程序中。

• 对 TypeScript 的支持： Angular 将 TypeScript 作为其应用程序开发的主要语言。TypeScript 提供静态类型、增强的工具和比普通 JavaScript 更好的代码组织。这种集成为开发人员提供了更强大且可扩展的开发体验。

• 改进的编译系统： 引入了一个名为 Angular 编译器 （ngc） 的新编译器。此编译器将 Angular 模板转换为更高效的 JavaScript 代码，从而加快 Angular 应用程序的渲染速度并提高运行时性能。

• 应用程序开发的清晰结构： 更加强调用于构建应用程序代码的清晰一致的模式。这包括组织 Angular 应用程序的组件、服务、模块和其他构建块的指南。这种清晰的结构使开发人员能够更轻松地理解、维护和扩展其应用程序。

• 模块性： 通过 NgModule 等功能实现对模块化的改进支持，允许开发人员将他们的应用程序组织成有凝聚力的、可重用的模块。这种模块化方法简化了应用程序开发并鼓励代码重用。

• 增强路由： 全面改进其路由系统，以更好地支持单页应用程序 （SPA） 和复杂的路由场景。Angular 路由器的引入使定义和管理应用程序路由变得更加容易，包括延迟加载和路由守卫，从而提高了安全性。

• 国际化 （i18n） 和本地化 （l10n）： Angular 引入了对国际化和本地化的内置支持，使创建支持多种语言和地区的应用程序变得更加容易。这包括用于格式化日期、数字和货币的管道以及用于提取和管理翻译文件的工具等功能。

这些只是一些最明显的改进，但还有更多。结果是一种技术，它允许您创建新应用程序，但也显着简化了现有应用程序的管理，尤其是在大型项目的情况下。

不幸的是，由于上述更改，新的 Angular 与旧的 AngularJS 完全不兼容。此外，开发团队没有提供将 AngularJS 应用程序迁移到 Angular 2 的简单途径，这在社区中引起了极大的不满。正因为如此，许多前端开发人员决定放弃这个 JavaScript 框架并寻找替代解决方案。

Angular 再也没有恢复原来的地位，尽管它背后的团队再也没有犯过同样的错误。在后续版本中，开发人员始终确保向后兼容。此外，在 2016 年，为了避免对开发人员造成潜在混淆，该名称中的框架版本号已被放弃。现在，它只被称为 “Angular”，而旧框架被称为 “AngularJS”。

React

在 2013 年 5 月在美国举行的 JavaScript 会议期间，一个全新的 - 并且可能改变游戏规则 - 库进入了现场。React 是由 Facebook 的软件工程师 Jordan Walke 创建的。它在会议参与者中引起了深深的轰动。

该框架提供的可能性，例如虚拟 DOM、单向数据绑定和 Flux 架构，似乎彻底改变了前端技术领域。此外，世界上最大的公司之一 Facebook 推荐了这个解决方案，并谈到了它的引入如何帮助解决他们遇到的最大问题，进一步加强了信息并强调了这个解决方案的创新性。React 的受欢迎程度很快开始增长。

扩展 React 功能的库数量也随着它的普及而增长。今天，很难找不到一个满足最独特要求的库。即使是其他非常流行的解决方案（例如 Bootstrap）的创建者也创建了专门为 React 量身定制的第三方库版本。其中一个关键和最著名的库是 Redux，它由 Dan Abramov 和 Andrew Clarke 于 2015 年创建（受到 Facebook 推广的 Flux 架构的启发）。与 Flux 不同，Redux 提供的新架构只使用一个 store，这大大简化了应用程序状态管理。这种方法很快被公认为数据流架构的一场革命，并帮助 React 吸引了更多的开发人员。

目前，React 仍然是前端技术中无可争议的王者。它不仅是使用最常用和最受欢迎的库，也是社区接受度最高的库。许多信息都证明了这一点，其中之一是下图，它说明了对学习和使用各种前端框架的兴趣。

来源：2022 年 JS 现状

正如你所看到的，大多数 React 投票者已经知道这项技术，并愿意再次使用它。这与第二受欢迎的框架 Svelte 相反，很多人都有兴趣使用该框架，但实际使用过的人要少得多。Angular 也是一个有趣的案例——就像 React 的例子一样，正面评价主要来自已经了解这项技术的人。然而，它可能感兴趣的用户对它的兴趣最低，他们中的许多人在以前的体验之后似乎不喜欢它。因此，在了解这些技术的开发人员中，Angular 和 Ember 是仅有的负面看法多于正面看法的框架。

Angular 与 React：主要区别

图片来源： Pexels

要了解上述划分背后的原因，我们需要了解这些解决方案之间的主要区别。

在 Angular 等框架普及之前，Web 开发需要繁琐地处理交互式事件、应用程序状态管理或使用纯 JavaScript（所谓的“VanillaJS”）与服务器集成。此外，良好实践的标准化和代码可重用性非常低，这导致开发团队需要做额外的工作。我在本文中讨论的框架有助于标准化这些流程，并为这些问题提供了现成的解决方案，但它们使用不同的方法来实现。

Angular 主要特点

Angular 通常被称为“全面而固执己见的框架”。但这实际上意味着什么呢？让我们剖析这项技术的主要特征。

• 全面： Angular 提供了一套全面的工具和功能来构建高级 Web 应用程序，例如应用程序状态管理、路由、表单验证、事件处理、单元测试等等。Angular 开发人员可以使用一个工具执行许多任务，从而显著加快应用程序开发并简化现有应用程序的管理。这不仅是因为应用程序易于获得，而且 - 甚至可能特别 - 因为负责基于 Angular 的解决方案架构的人不必为每个单独的项目定制它们。Angular 提供了所有必要的工具和解决方案，大大简化了使用应用程序架构的过程。Angular 的应用程序开发方法已经经过多年的验证和改进，并且由于大型活跃社区的经验而丰富。这意味着我们可能遇到的大部分问题都已经有人解决了，或者会在后续版本中出现解决方案。

• 自以为是： 事实上，Angular 对创建应用程序施加了某些准则和标准。与其他框架（如 React 或 Vue.js）不同，Angular 具有明确定义的结构和开发人员应遵循的一组最佳实践。例如，Angular 鼓励使用 MVC（模型-视图-控制器）模式或其变体，例如基于组件的架构模型。这种方法背后的想法是迫使开发人员使用特定的、经过验证的应用程序开发方法。虽然这种方法对某些人来说似乎很糟糕，但它有很多优点——它有助于保持一致的结构并确保所创建代码的更大透明度。如果开发人员至少参与过一个 Angular 项目，他们很有可能在另一个类似的项目中找到自己的方法。

• 影子 DOM： Angular 使用 shadow DOM 技术来隔离组件的样式和行为。它允许开发人员使用自己的 DOM（文档对象模型）树和样式创建独立于应用程序其余部分的组件。这有助于避免不同组件之间的样式冲突，并确保代码的更大模块化和封装性。在实践中，这意味着组件内部定义的样式不会影响其他应用程序元素，而只影响组件的 / 内部结构。以这种方式分离的组件更容易在应用程序中管理和重用。

• 依赖注入 （DI）：一项基本功能，可促进应用程序内的模块化、可重用性和可测试性。通过将组件与其依赖项解耦并在外部提供它们，DI 确保组件始终专注于其特定任务，使其更易于理解、维护和重用。这种模块化方法简化了开发过程，并鼓励创建更小的可组合构建块，这些构建块可以组装成复杂的应用程序。DI 还通过促进组件的隔离以进行单元测试来增强可测试性，允许开发人员将实际依赖项替换为 mock 或 stub 实现。此外，Angular 的 DI 系统提供了灵活性和可配置性，使开发人员能够自定义依赖注入的行为以满足其应用程序的要求。

• 组件生命周期： 一系列方法，包含组件的整个生命周期（从创建到销毁）中发生的事件。这些事件包括初始化、内容投影、组件呈现和析构。了解 Angular 组件生命周期对于开发人员有效管理组件行为至关重要。通过利用生命周期钩子，如 ngOnInit、ngOnChanges、ngOnDestroy 等，开发人员可以在组件生命周期的特定阶段执行自定义逻辑。这允许执行初始化组件数据、响应输入更改以及在组件销毁时清理资源等任务。利用 Angular 组件生命周期，开发人员能够创建更高效、响应更快且可维护的应用程序，确保正确管理资源并增强整体用户体验

不幸的是，Angular 施加的规则也可能是有害的。它们要求开发人员创建大量所谓的 “样板代码”，这可能会导致性能变差、灵活性低、入门门槛高，并且需要具有高级知识才能理解更复杂的情况。尽管如此，Angular 仍然受到许多公司和开发团队的欢迎，尤其是对于代码结构、一致性和可读性是关键的大型复杂项目。当公司的程序员流动率很高或许多团队从事同一项目，并且需要可扩展、易于理解和长期维护的应用程序（如银行业）时，此解决方案特别有效。

React 主要特点

如果我说 React 不是为 Web 构建的，你会感到惊讶吗？您安装的 React 包（用于启动项目）不包含 Web 代码。那么，为什么它被认为是一种前端技术并且是市场上最好的此类解决方案之一呢？嗯，有一些很好的理由。

• 虚拟 DOM 实现： 首先要了解的是 React 库不负责渲染您的应用程序。它的任务是生成一个虚拟的 DOM shell，定义各个元素的层次结构，并实现与它们相关的逻辑，例如，管理它们的生命周期和应用程序状态（通过所谓的 “钩子”）。出于这个原因，当有人使用 React 时，他们通常会将其与 ReactDOM 等库一起使用，该库提供了允许根据对 VirtualDOM 所做的更改修改网站 DOM 树中的元素的函数。多亏了这一点，而不是在发生更改时重新渲染整个页面，而是可以只修改在渲染之间更改的元素。这意味着您可以更新元素以响应数据更改、处理用户交互事件，并显著加快和平滑应用程序的操作。

• 极简主义性质： 与 Angular 不同，React 是一个常规的 JavaScript 库，而不是一个成熟的框架。出于这个原因，这项技术没有强加任何解决方案，并允许 React 开发人员在做出架构决策时有更大的自由度。React 生态系统包括广泛的工具和解决方案，这些工具和解决方案可以在各种环境中灵活使用，以提高基于 React 的应用程序开发过程的生产力、能力和效率。

• 生命周期钩子： 在 React 16.8 中引入，它们通过提供简洁易读的类组件替代方案，彻底改变了函数式组件中的状态管理和生命周期方法。这些函数允许开发人员在功能组件中无缝集成状态、上下文和生命周期行为，从而促进代码重用和模块化。通过将逻辑封装在自定义 Hook 中，开发人员可以轻松地在组件之间共享功能，从而产生更易维护的代码库。Hook 还简化了复杂的场景，例如异步数据获取和事件处理，从而产生更清晰、更可预测的代码。

由于上述原因，重要的是要记住 React 只提供了一个编程接口，用于创建和管理用户界面的组件以及响应应用程序状态的变化。然而，这也是为什么这项技术允许几乎无限的实现可能性的原因。在某些情况下，它被用于创建移动应用程序 （React Native）、逐帧动画 （Remotion）、电子邮件 （React Email）、PDF （React PDF）、CLI 应用程序 （Ink）、图形，甚至 3D 游戏 （React Three Fiber）。由于这些功能，React 在 Web 应用程序开发中广受欢迎，尤其是在专注于新技术的公司和初创公司中。

Angular 与 React：详细比较

图片来源： Pexels

Angular 和 React 方法之间的主要区别现在应该非常清楚了。但是，它们之间还有更多差异。下面是一个快速摘要。

类别	角	反应
类型/性质	完整的框架	图书馆
程序设计语言	TypeScript（旧版 AngularJS 中的 JavaScript）	JSX（JavaScript 语法的扩展，允许您使用类似 XML 的语法）。但是，也可以使用 TSX（TypeScript 语法的扩展）来代替，这是更常用的
建筑	固执己见 – 强烈鼓励使用某些架构模式和最佳实践，尤其是基于组件的架构。	灵活 – 允许程序员选择适合项目需求的架构，例如 Flux 或 Redux
渲染	默认情况下，它使用客户端渲染 （CSR），但也提供实施 SSR（服务器端渲染）和 SSG（静态站点生成）的机制和工具	默认情况下，它使用客户端渲染 （CSR），但也可以使用实现其他方法（例如 SSR、ISR、SSG）的库，例如 Next.js
应用程序状态管理方法	依赖注入 （DI） 工具和服务（Angular Services，可以存储应用程序状态并使其可供其他组件使用）在本地用于管理应用程序状态。此外，RxJS 和 NgRx 等库也很受欢迎	应用程序状态使用 React Hooks 和 Context API 进行管理。但是，也可以使用 Redux 等库来扩展应用程序状态管理功能
与服务器通信	原生提供 HttpClient Module	没有强加的查询方式。您可以使用本机 JavaScript FetchAPI 或为此目的使用大量库。其中最受欢迎的是 Axios 和 React Query
表单支持	原生提供 Angular Forms 模块	没有默认解决方案。您可以使用任何外部库。最受欢迎的包括 Formik 和 React Hook Form
测试	默认情况下，Angular 提供了用于测试应用程序的工具，即用于创建测试的 Jasmine 框架和允许执行它们的 Karma。也可以使用其他解决方案，例如流行的 Jest 框架	没有原生解决方案。用户可以选择任何工具来创建测试。流行的包括 React Testing Library 和 Jest
热门组件库	Angular Material、PrimeNG 等等	Material-UI、Ant Design、Bootstrap 等等
支持	这两个框架都得到了周围活跃社区和大公司（Angular 的 Google，React 的 Facebook/Meta）的大力支持。此外，这两种技术都有非常广泛的文档
CSS 技术支持	在对 CSS、SCSS、SASS 和 LESS 等标准 CSS 技术的支持方面，Angular 和 React 都提供了类似的功能和灵活性。这两个框架都允许开发人员使用他们喜欢的样式方法和工具
易于代码维护	由于采用了全面的工具和标准集，应用程序代码更加透明和易于维护。此外，这种方法确保了所创建应用程序的高度稳定性	选择架构解决方案的灵活性和自由度使得维护基于 React 的应用程序的代码具有挑战性，尤其是在开发人员频繁流动的情况下。开发人员有责任保持适当的应用程序质量。否则，您可能会遇到 SEO 等问题。
应用程序性能	由于强加的应用程序开发方法，应用程序通常占用空间更大，运行速度更慢。开发人员在使用的解决方案方面灵活性较低，这也可能意味着他们没有那么多的优化可能性	虚拟 DOM 和库的较小尺寸转化为更快的操作。此外，该解决方案的高度灵活性使开发人员能够更轻松地优化应用程序性能。正因为如此，React 在许多使用场景中都优于 Angular
进入门槛	要在 Angular 环境中有效地工作，您必须学习它的概念，例如管理模块、服务、指令等。此外，Angular 的学习曲线更陡峭——它使用许多强加的解决方案，这可能需要更多的时间来掌握。但是，这有一个显着的好处是不必考虑创建新应用程序的最佳方法是什么 - 一切都已经由 Angular 提供和指定	无需学习新的应用程序开发架构。如果有人了解 JavaScript，那么掌握 JSX 概念归结为理解这种语法允许直接在 JavaScript 中编写类似 HTML 的代码。此外，在 React 中，应用程序的每个元素都可以被视为一个组件，其中包含相应的逻辑及其表示
易于项目管理	管理一个项目，即使是一个大项目，也要简单得多。强加的架构和对严格定义的解决方案的需求转化为代码及其结构的更高一致性。此外，许多可能存在问题的问题都有特定的本机解决方案，这减少了规划各个阶段所需的时间	React 非常适合员工流动率低和大量复杂需求的小型项目。尽管可以使用此技术创建更大的应用程序，但由于体系结构问题留给开发人员，因此有必要仔细分析后续阶段并选择合适的工具集

Angular 与 React：总结

图片来源： Pexels

那么，哪个更好呢？好吧，你可能已经注意到了，答案并不清楚，很大程度上取决于你的业务和项目的性质。

何时选择 React

React 试图为开发人员提供最广泛的可能性，仅受他们的想象力和技能的限制。这意味着图书馆数量不断增长和发展，扩展了其功能并吸引了更多的人。它不会将任何解决方案强加给程序员，不会强迫他们使用严格定义的工具，并允许使用最适合项目要求和编程团队技能的技术。

React 是一个很好的解决方案，特别是如果你的团队中有一位经验丰富的人可以有效地利用它的可能性。在您需要满足高度非标准要求或实现尽可能高效率的情况下，值得考虑。当您的目标是保持项目的灵活性并适应技术变化时，React 可能是一个不错的选择。它允许您在不与特定技术紧密耦合的情况下开发应用程序，从而允许您根据需要切换或升级技术，而不会对项目造成重大中断。它可能允许您的软件开发团队按照您（或他们）的意愿精确地完成项目，这可能是一个巨大的优势。

何时选择 Angular

然而，选择并不总是一件好事。想象一下，您有一个由 6 人组成的团队，每个人对解决给定问题的看法完全不同。他们每个人都可能更喜欢他们擅长的其他库，并且对其他人使用的库一无所知。此外，在项目期间，他们最初的决定可能会导致后期阶段的复杂情况。

使用 Angular 您不会遇到此类问题。它专注于做一件事 - 以最佳方式创建 Web 应用程序 - 并且在您没有明确选择路径的情况下占据主导地位。它为开发人员提供了所需的所有工具，并且不会强迫他们花时间规划他们应该使用的解决方案。如果你的目标是开发一个面向未来的、可扩展的应用程序，其代码将来不同的开发人员会很容易理解，那么 Angular 可能是最好的选择。