终极 JavaScript 框架的比较：Angular 与 React

我几乎每天都会被问到的一个问题是我应该从 ReactJS 还是 Angular 开始？ 但是，在我继续之前，让我给你一个免责声明。

这不是一个我要抨击其中一个或另一个的博客，或者说你应该总是使用一个而不是另一个。 每个开发人员和每个项目都是完全不同的，他们有不同的要求，所以说你应该总是使用 ReactJS 或总是使用 Angular 是非常愚蠢的。

逻辑论证

你可能会争辩说 Angular 是一个框架，而 React 在技术上本身就是一个库。 我不否认这个事实，但这是我现在不想讨论的论点。 你可以添加一些包到 React 中，将它变成一个直接与 Angular 竞争的框架。 我们正在比较两个生态系统，而不是确切的框架与确切的库。

学习曲线

让我们从 Angular 开始。 还有一个免责声明：当我说 Angular 时，我指的是 Angular 4 而不是 AngularJS。

Angular 是一个大框架，这意味着它功能强大并且包含很多内容。 有很多东西要学。 你会听到很多新的令人生畏的词汇，比如依赖注入、指令装饰器、管道等。然后你必须处理 Typescript，它是 JavaScript 加上一堆其他特性，包括静态类型。

Angular 比 React 更有主见，这是我认为的优势之一，因为使用 React，你可以用一百万种不同的方式做同样的事情。 使用 Angular，通常有一种或两种方法来做某些事情，这使得它更容易遵循，给你更清晰的指示，告诉你应该做什么。

但话又说回来，它归结为偏好。 您可能喜欢以不同方式做事的灵活性。 就像我提到的，如果我们只讨论核心库，ReactJS 就是一个库，它比 Angular 框架更小，更容易学习。 你可以说你会在更短的时间内学习 React。 React 本身就是一个很棒的视图库，但对于大型应用程序来说它甚至没有那么强大。 如果你想在 React 中路由、验证、HTTP 请求，你将不得不安装其他包，这增加了学习曲线。

如果您查看来自两个不同开发人员的 React 代码，他们可能会看起来完全不同，无论他们是在发出 HTTP 请求还是在处理状态和属性。 所有这些东西都可以以非常不同的方式处理，而且很多时候它可能以错误的方式处理。

您找到了最佳实践，所有问题都消失了，但这确实增加了学习曲线。

不像 Angular React 不使用模板。 它使用称为 JSX 或 JavaScript 扩展或 JavaScript 语法扩展的东西，它允许我们在 JavaScript 中嵌入 HTML。 起初，这似乎有点古怪。 尤其是当您可能被教导将标记和 JavaScript 分开时。

可以把它想象成将 HTML 放入 JavaScript 中并进行了一些不同的更改：您不能使用类属性，而必须使用类名。

最后，我们有 Redux。 React 通常与作为应用程序级别状态管理器的 Redux 或 Flux 一起使用。 在我看来，Redux 只是设置它并且学习它的概念很难。

我认为它被过度使用了。 我认为很多开发人员在不需要的地方使用 redux。 较小的应用程序不需要它，但许多开发人员确实坚持使用它。 这又归结为偏好。 Redux 非常强大，我不想把它拿走。 在谈论学习曲线时，很难掌握。

获胜者：这是平局

表现

直接比较 Angular 和 React 的性能是不公平的。 Angular 是一个完整的从前到后的框架，它包括路由、表单工具、HTTP 库、响应式扩展等。所有这些特性使框架膨胀并使其变慢。 然而，React 本身只是一个视图库，它更小更快。

一旦你开始添加像路由器、HTTP 客户端或任何你要添加到你的 React 应用程序的包，那么它就会开始出现在 Angular 的位置上，然后你可以开始公平地比较它们，但即使在那之后 React 仍然赢得表演部门。 总的来说，这是一项非常快速的技术。

在引擎盖下从 Angular 2 到 Angular 4 的变化他们做了很多来提高性能。 Angular 4 的性能优于 Angular 2。尽管如此，React 仍然在性能部门获胜。

角度与反应。 资料来源：Academind.com

获胜者：反应

特征

这两个框架有很多相同的一般特性和优势：它们组织你的代码，它们是基于组件的，它们提供动态标记等。它们习惯于做很多相同的事情，并且它们共享一个很多相同的功能。

我们将看看一些单独的功能。 Angular 的核心功能显然比 React 多得多。 让我提醒您，我们正在谈论与 React 一起使用的两个生态系统和通用包。

Angular 是一个包罗万象的框架。 它带有组件路由器、可观察的响应式扩展、HTTP 客户端、用于验证的表单模块等等。 此外，它以一种其他框架没有真正做到的方式提供双向数据绑定。 使用 ng model 指令将数据从视图绑定到模型非常容易。

Angular 还支持 MVC（模型视图控制器）或至少与该设计模式不同的方面。 它还具有允许您轻松实施测试的功能：单元测试和端到端测试。 Angular 包含构建企业级前端应用程序的功能。 另一方面，React 的核心内容并不多。 但是，可以添加一些东西来赋予它 Angular 包含的开箱即用的功能以及一些额外的功能。

React 使用了一个非常强大的虚拟 DOM。 它创建自己的实际 Dom 的轻量级版本，并且只包含和更新需要的内容，而不是刷新整个内容。 虚拟 DOM 是 React 速度极快的一个主要原因。

React 使用比标准模板更强大的 JSX，因为你可以在其中放入任何类型的 JavaScript。 JSX 不需要使用 React，但它让事情变得容易多了。 我想不出你为什么不将 JSX 与 Angular 一起使用的任何原因。 React 在管理组件状态和属性方面也做得非常好。 它使数据非常易于使用并在组件之间传递。 在组件之间传递数据，Angular 比在 React 中要困难得多。

Core React 很难维护应用级别的状态。 组件状态很简单，但如果你想要真正的应用级状态管理，那么你将需要 Redux 或 Flux，我之前说过，学习起来非常混乱。 经常使用的外部包，如新的 React 路由器版本 4，有点难以掌握，但一旦学会运行和设置它，它也非常强大。 也有很多不同的方式来使用它。 React 没有像 Angular 那样的核心 HTTP 组件，但你可以使用 Fetch 或 Axios，它是一个外部 HTTP 客户端，然后 Enzyme 很流行用于证明 React。 有一些不同的包通常与 React 一起使用，即使它们不是实际库的一部分。

虽然这两种技术共享大量的特性，但如果您只是比较核心技术，那么 Angular 是赢家。

获胜者：角

工装

Angular 和 React 有一些非常不错的命令行界面。 Angular CLI 和 Create React App 都非常棒，它们确实让我们能够简化开发。 Angular CLI 更强大一些，因为我们可以快速生成组件和服务之类的东西。 Create React 无法做到这一点。 就文件和基本结构而言，您必须自己创建所有内容。 两个系统都使用 web pack，有自己的自动加载开发服务器，并有编译和构建工具。 显然，Angular 有转译 Typescript 的额外任务。 当我们运行 ng serve 时，CLI 有一个脚本。 这一切都发生在幕后。 它为此使用了称为 TSC 或 Typescript Compiler 的东西，并且两者都具有测试工具。 Create React App 使用 Jest 进行测试，然后这些工具的其中一个部分是能够将您的应用程序构建到生产环境中，生成静态资产，您可以简单地将其上传到服务器，也可以将其放入后端客户端文件夹中。

如果它是一个完整的堆栈应用程序，那么这些非常重要。 你不需要使用它们。 你可以使用 webpack 从头开始​​构建一个 React 应用程序。 这些使得不仅构建应用程序而且编译和构建它以用于生产变得更加容易。

即使在那个部门，他们也很漂亮。

获胜者：角

生态系统

正如我所说，这两种技术都有自己的生态系统，现在已经远远超出了网络浏览器。

Ionic 是一个流行的混合框架，它是一个 Angular 应用程序，在移动应用程序的本机包装器中运行。 您可以使用 Angular 创建移动应用程序。 与原生应用程序相比，混合应用程序可能有点笨拙。 用户体验有时可能不是那么好——没有那么快和反应灵敏。 在各种混合框架中，Ionic 3 是最好的一个。 还有 NativeScript，它允许我们使用 Angular 和 JavaScript 构建真正的原生应用程序 iOS 和 Android 应用程序。

尽管如此，NativeScript 至少在这一点上似乎不如 Facebook 的 React Native 好。 如果您是材料设计的粉丝，Angular 也有一个材料设计组件库。 Angular Universal 是一个种子项目，可用于在服务器端渲染 Angular。 还有 NgRx 商店，它是一个受 Reax redux 启发的状态管理库。 它基于对等减速器改变的状态。 它还与 Reactive 扩展集成。

你会注意到的。 有一次，他们中的一个以不同的方式做另一件事。 React 和 Angular 已经成为微软和苹果的 JavaScript 框架。

React 有相当的生态系统。 它具有流行的 React Native。 这是使用 Web 技术构建移动应用程序的最佳方式。 React Native 速度很快，如果构建正确，许多应用程序都可以与基于 Swift 或 Java 构建的本机应用程序一起使用。 React 有一个名为 Material-UI 的材料设计库，它很像 Angular 的材料设计组件，但更成熟。 JS 是一个用于渲染服务器端 React 应用程序的框架。 它旨在以最简单的方式做到这一点，因此可以将其与 Angular Universal 进行比较。 MobX 是另一种管理状态的方式。 它的工作方式与 redux 有点不同。 它提供了一组装饰器来定义可观察对象和观察者，并将反应式逻辑引入您的状态。

Storybook 是 React 的开发环境。 它允许您浏览组件库，查看每个组件的不同状态，并交互式地开发和测试组件。 Reactive VR 正在让 React 进入虚拟现实。 React 桌面是一个构建在 Reacts 库之上的 JavaScript 库，据称它为 Web 带来了原生桌面体验，具有许多 macOS 和 Windows 10 组件。 React 生态系统非常庞大和强大。 React 正在进入技术的各个方面，它显然是赢家。

获胜者：反应

穿西装打领带的人使用 Angular，留着邋遢胡须的时髦人士使用 React。

底线：这是一条领带

如果您在这些框架之间做出决定，请查看不同的类别，看看您对什么感兴趣。 试试它们，看看你能更快地拿起哪一个。 比这个博客做更多的研究。 您永远不会从一个博客中获得所需的所有信息，因此请阅读更多内容。

如果你正在寻找一个更大的生态系统，其中包括原生移动应用程序开发，那么选择 React 不要三思而后行。 如果你追求功能，Angular 是巨大的。 有比你需要的更多的功能。