Angular 与 React：并排比较

2019-01-10 08:00:00 · 飞浪

以对这两个平台知之甚少或一无所知的开发人员的角度，对 Angular 和 React 进行客观的比较。在选择 React 或 Angular 时，这是您需要阅读的指南。

介绍

刚开始学习前端编程时，你很快就会遇到 Angular 和 React。目前，JavaScript 领域正在快速变化，似乎每天都有新技术出现。虽然有些人可能认为这是好事，而另一些人认为是坏事，但这不是重点。目前，Angular 和 React 似乎是每个人都在使用的两大巨头。在 6 个月或一年内，这一切都可能发生变化，作为一名程序员，你应该能够轻松适应这种变化。

有很多关于 Angular 与 React 的文章，其中很多都倾向于偏向其中一方。我们可以说 Angular 更受欢迎，而 React 可以让你成为更优秀的 JavaScript 程序员。但是，我对此不感兴趣。我感兴趣的是冷酷、严肃的比较，看看每个平台的不同之处。我将简单地报告我的发现，并对这两个框架进行并排比较。

我收集了关于这两个框架（以及 Angular 1.0）的所有信息。下面您将看到这项研究的结果。

基础知识

属性	AngularJS	Angular 2	反应
版本	1.5.0-rc1 / 1.49	2.0.0 - 测试版	0.14.6
作者	谷歌	谷歌	Facebook
语言	JavaScript/HTML	TypeScript	JSX
尺寸	14.3万	764千	151千
Github 星星	46.4万	8.4千	34.4万
Github 贡献者	1,386	189	604

这个表格非常简单，Angular 是由 Google 创建的，而 React 是由 Facebook 创建的。

元内容

属性	AngularJS	Angular 2	反应
流失	减少	减少	高的
工具	低的	高的	高的
代码设计	JS 转 HTML	JS 转 HTML	JavaScript 为中心
JavaScript“疲劳”	较少的	较少的	更多的

这些往往是在 Reddit 和 Hacker News 上开始的热门讨论区域。

其他信息

属性	AngularJS	Angular 2	反应
DOM	常规 DOM	常规 DOM	虚拟 DOM
学习曲线	高的	中等的	低的
包装	虚弱的	中等的	强的
抽象	虚弱的	强的	强的
调试常规	好的 HTML / 不好的 JS	良好的 JS/良好的 HTML	好的 JS / 不好的 HTML
调试线路号	不	不	是的
提到了未关闭的标签？	不	不	是的
何时失败？	运行时	运行时	编译时
绑定	2 路	2 路	单向
模板	在 HTML 中	在 TypeScript 文件中	在 JSX 文件中
组件模型	虚弱的	强的	中等的
构建移动？	离子框架	离子框架	反应原生
MVC	是的	是的	仅查看层
渲染	客户端	服务器端	服务器端

我在 Reddit、Hacker News 和其他社交媒体网站上看到的大多数主题往往只涉及和讨论前两个表格。人们被困在 JavaScript 疲劳、JSX、TypeScript、Churn 和 Size 的想法中。我希望我可以帮助打破这种模式。我包含了所有其他经常被忽视的信息，这些信息揭示了这两个框架中的一些漏洞。

Angular 和 React 之间最有趣的区别在于大小、社区、调试、DOM 和移动性。谈到移动性，React 有自己的方式通过 React Native 构建移动应用程序。Angular 不会尝试解决自己的移动性问题，而是允许其他框架（如 Ionic Framework）来做这件事。

虽然 AngularJS 1 社区非常庞大，但 Angular 2 社区才刚刚起步。部分原因是 Angular 2 仍处于测试阶段，但它已经获得了相当出色的关注度。React 的社区也在不断发展壮大，变得更加多元化。

从大小来看，React 和 Angular 之间存在一些明显差异。虽然 Angular 2 目前的大小约为 764k，但未来几个月内它们将大幅缩减。React 使用的 MVC 模型也不如 Angular 多，因此其大小可以小得多。但是，如果您将 React 的附加组件包含在内，使其完全实现 MVC，那么您得到的框架大小仍将小于 Angular 2。

调试有时是最难的事情。我认为每个框架处理调试的方式很有趣。Angular 2 使用运行时调试，这往往比使用编译时调试的 React 提供的信息更少。

最后，我想谈谈 React 使用的虚拟 DOM。这对我来说是一个新概念，我对其进行了更深入的研究。虚拟 DOM 似乎要快得多，因为你不必处理真实 DOM 所具有的重量级部分。操作和更改 DOM 的虚拟副本（轻量级），然后只推送在 DOM 上执行 diff 时显示的更改，这非常棒。

在花了几天时间研究和阅读有关这两个框架的其他文章后，我发现在比较这两个框架时有很多取舍。对于某些项目来说，Angular 是更好的选择，而对于其他项目来说，React 更好。与往常一样，您应该评估您正在进行的项目，以找出最适合您需求的方案。希望这些比较图表可以帮助您做出决定。

欲了解更多信息，请查看 Pluralsight 与此相关的课程库。