React vs Angular，到底谁更牛?

前言：在编程领域，Angular 和 React 对于前端开发人员来说是目前最流行的两款 JavaScript 框架。

2018 年版的 Stack Overflow Developer Survey 认为：Angular、React 和 Node.js 是所有软件工程师所公认的三大顶级编程框架。

无论是从流行程度、架构相似度，还是从基于 JavaScript 的角度考虑，这两种前端框架都有着诸多相似之处。

在本文中，我们将对 React 和 Angular 进行深入比较。我们会从两者的框架基本特征入手。

Angular 与 React.js 简要介绍

Angular

Angular 是由 Google 提供支持的一种前端框架，它能够与大多数常用的代码编辑器相兼容，它属于 MEAN stack 的一部分。
而 MEAN stack 是一组免费开源的、以 JavaScript 为中心工具集，可被用于构建动态网站和 Web 应用。

其组件包括：MongoDB(NoSQL 数据库)、Express.js(Web 应用框架)、Angular 或 AngularJS(前端框架)、以及 Node.js(服务器平台)。

Angular 框架允许开发人员创建动态的单页面 Web 应用(Single-Page Web Applications，SPA)。

最初版本的 Angular，解决的是将基于 HTML 文档转换为动态内容的问题。

在此，我们将重点关注其较新的版本 Angular 2+，以及它与 AngularJS 的区别。

在业界案例上，Angular 主要被 Forbes、WhatsApp、Instagram、healthcare.gov、HBO、Nike 等组织所使用。

React.js 是由 Facebook 于 2011 年创建的一种用于构建动态用户界面的开源 JavaScript 库。
React 基于 JavaScript 和 JSX，而 JSX 是由 Facebook 所开发的 PHP 扩展，它能够为前端开发创建可重用的 HTML 元素。React 拥有一个可以被用于移动开发的独立跨平台框架 React Native。

在业界案例上，React 主要被 Netflix、PayPal、Uber、Twitter、Udemy、Reddit、Airbnb、Walmart 等组织所使用。
工具集：框架 vs 库

有过开发经验的读者都知道，框架生态系统定义了工程体验的无缝性。下面，我们来看看 Angular 和 React 的主要特点。

首先，React 并非一个真正的框架，它实际上是一个库。所以，它需要与其他的工具和库进行多次集成。

相比而言，在使用 Angular 时，您已经拥有了用于构建应用的一切条件。

React vs Angular，到底谁更牛?

Angular 提供了如下各种开箱即用(out of the box)的功能：

RxJS：是一个异步程序库，它通过设置多个数据交换的通道，来减少资源的消耗。
RxJS 的主要优点是：它能够独立地同步处理事件。不过，伴随的问题是：虽然 RxJS 可以与许多框架协同运行，但是您必须通过对库的学习，以充分利用到 Angular。
Angular CLI：具有功能强大的命令行界面，可协助创建应用、添加文件、测试、调试和部署。
Dependency injection：该框架将各种组件与依赖关系相分离，使之同步运行;同时也能够在不重新配置组件的情况下更改依赖关系。
Ivy renderer：作为新一代的 Angular 渲染引擎，Ivy 的性能有了明显的提升。
Angular Universal：是一种用于服务器端渲染的技术，它能够快速地渲染出首个应用页面，或是在可能缺乏渲染资源的浏览器端设备(如移动设备)上显示应用。
Aptana、WebStorm、Sublime Text、Visual Studio Code：都是 Angular 的常用代码编辑器。
Jasmine、Karma 和 Protractor：都是在浏览器中进行端到端测试与调试的工具。
React 需要通过多种集成和各种支持工具才能运行：

Redux：是一种状态容器，它可以加速 React 在大型应用中的运行，能够管理具有多种动态元素的应用组件，还可以被用于渲染。
此外，React 用到了更为广泛的 Redux 工具集，其中包括：Reselect、Redux 的选择器库和 Redux DevTools Profiler Monitor。

Babel：是一种转换编译器，它可以将JSX转换为能够被浏览器理解的 JavaScript 应用。
Webpack：由于所有的组件都是用不同的文件编写而成，因此我们需要将它们捆绑在一起，以便实现更好的管理。而 Webpack 就是一种公认的标准代码捆绑器。
React Router：该路由器是一种常被 React 所使用的标准 URL 路由库。
与 Angular 类似：在代码的选择方面，您并不受限。其常见的编辑器包括 Visual Studio Code、Atom 和 Sublime Text。
与 Angular 不同的是：在 React 中，您无法使用单个工具去测试整个应用，而必须使用不同的工具进行不同类型的测试。
如下是 React 与各种工具的配合列表：

Enzyme 和 Unexpected-react，用于组件测试。
Jest 用于 JavaScript 代码。
react-testing-library 用于 React DOM 测试。
React-unit 用于单元测试。
Skin-deep 用于渲染测试。
由 ReselectDevTools(https://github.com/skortchmark9/reselect-tools)所提供的此类工具集，可以被用于调试和可视化。

而 React Developer Tools 的 Chrome Extension 与 Firefox Extension，以及 React Sight 也都能可视化显示状态和属性树(prop tree)。

这两种工具都形成了强大的生态系统。通常情况下，用户倾向于选择 React，不过 React 需要 Redux 之类的多种集成来扩展其服务能力。

基于组件的体系结构：两种工具的可重用与可维护组件

两个框架都具有基于组件的体系结构。这就意味着单个应用可以通过模块化、内聚且可重用的组件，来构建出各种用户界面。

在 Web 开发中，基于组件的体系结构通常被认为比使用其他结构更易于维护。

它通过创建单独的组件来加速开发的进程，并使得开发人员能够缩短产品上线的时间，也能调整和扩展应用。

①代码：TypeScript vs JavaScript(JSX)

Angular 使用 TypeScript 语言(当然如果需要的话，您也可以使用 JavaScript)。

TypeScript 是一种适合于大型项目的 JavaScript 超集。它既紧凑，又能够识别输入中的错误。

TypeScript 的其他优点还包括：更好的导航与自动完成功能，更快的代码重构。

另外，TypeScript 的可扩展性和简洁性，也非常适合于企业规模的大型项目。

React 使用的是 JavaScript ES6 和 JSX 脚本。JSX 是 JavaScript 的语法扩展，被用于简化 UI 编码，并使得 JavaScript 代码看起来更像 HTML。JSX 不但能够检测各种错误，还可以保护代码免受注入的攻击。

另外，Babel(https://babeljs.io/)使用 JSX 进行浏览器编译。而 Babel 则是一种将代码转换为可被 Web 浏览器读取的格式编译器。

虽然 JSX 在语法上几乎能够实现与 TypeScript 类似的功能，但是一些开发人员仍认为它比较复杂难学。

②DOM：真实 vs 虚拟

文档对象模型(Document Object Model，DOM)是 HTML、XHTML 或 XML 文档的编程接口。

它具有一种树形组织结构，使得脚本能够动态地与 Web 文档的内容及结构进行交互，并对它们实现更新。

DOM 有两种类型：虚拟和真实。在实现原理上，即使有一个元素发生了变化，传统的或称真实的 DOM 也会更新整个树型结构。

而虚拟的 DOM 则是真实 DOM 的一种映射，因此它只跟踪变更的部分，仅更新特定元素，而不会影响整个树中的其他部分。

React vs Angular，到底谁更牛?

React 使用虚拟的 DOM，而 Angular 则在真实的 DOM 上运行，并使用变更检测来查找那些需要更新的组件。

虽然虚拟的 DOM 被认为比真正的 DOM 操作起来更为快捷，但是在 Angular 中，由于需要进行变更检测，因此这两种方法在性能方面实际上是相当的。

③数据绑定：双向 vs 向下(单向)

数据绑定是在模型(业务逻辑)和视图(UI)之间同步数据的过程。数据绑定有单向和双向两种基本的实现方式。而单向与双向数据绑定之间的区别，就在于模型视图的更新过程上。

React vs Angular，到底谁更牛?

Angular 中的双向数据绑定类似于“模型 - 视图 - 控制器(Model-View-Controller，MVC)”的体系结构,
由于其中的模型和视图是同步的，因此数据的变更会影响到视图上，而视图的更改也会反过来触发数据相应的变更。

React 则使用单向或向下的数据绑定。单向数据流不允许子元素在更新时影响到父元素，因此保证了只有已获准的组件才会发生更改。

可见，此类数据绑定使得代码更为稳定，当然也需要通过额外的作业来同步对应的模型与视图。毕竟，由于子组件变更所触发的父组件配置的更新，需要更多的时间。

总的说来，React 的单向数据绑定更具备可预测性，代码更为稳定，调试也更加容易。而 Angular 中的传统双向数据绑定，则易于被使用。

④应用体积和性能：Angular 略胜一筹

在处理复杂且动态的应用时，AngularJS 的性能较低。而由于用到了虚拟的 DOM，React 各类应用的效率比同等大小的 AngularJS 应用要快一些。

然而，根据来自 freeCodeCamp.org 的 Jacek Schae 研究，新版本的 Angular 比 React + Redux 要略快一些。
此外，该研究还表明：Angular 的应用体积略小，受测时的转换体积(Transfer Size)只有 129 KB，而 React + Redux 则有 193 KB。

React vs Angular，到底谁更牛?

⑤预构建的 UI 设计元素：Angular Material vs 社区支持的组件

Angular：随着材料设计(Material Design)语言在 Web 应用中流行，更多的工程师受益于其开箱即用的材料工具集。

Angular 拥有预构建的材料设计组件。其 Angular Material 能够对表单控件、导航、布局、按钮、指示器、弹窗、模块、以及数据表，实现一系列常见的交互模型。由于各种预构建元素的存在，配置 UI 的速度变得更快。

React：它的大多数 UI 工具都来自于它的社区。目前，React 门户网站上的 UI 组件板块(https://reactjs.org/community/ui-components.html)提供了大量免费的和部分收费的组件。

您需要安装 Material-UI 库和各种依赖项，才能使用 React 的材料设计进行构建。

此外，您还可能用到由 React 构建的 Bootstrap 组件(https://react-bootstrap.github.io/)，以及包含 UI 组件与工具集(https://hackernoon.com/23-best-react-ui-component-libraries-and-frameworks-250a81b2ac42)的其他软件包。

⑥移动可移植性：NativeScript vs React Native

这两个框架都附有能让工程师将现有的 Web 应用移植到移动应用之中的工具。

我们对NativeScript(Angular)和React Native也进行了深入分析和比较。
下面是要点简述：NativeScript(https://www.nativescript.org/)是一款使用 TypeScript 作为核心语言的跨平台移动框架。其用户界面是用 XML 和 CSS 来构建的。

开发人员在从 Web 应用处移植业务逻辑，并在其 UI 上使用相同的操作技巧时，该工具允许 iOS 和 Android 平台共享大约 90% 的代码。

NativeScript 背后的理念是：为移动设备编写单个 UI，并根据具体的需求为每个平台进行微调。

与使用 WebView 来渲染的混合式跨平台解决方案不同，该框架是在 JavaScript 虚拟机中运行各种应用，并直接连接到原生的移动 API 上，从而保证了具有能够和原生应用相媲美的高性能。

React Native(https://facebook.github.io/react-native/)：该 JavaScript 框架是针对移动应用的跨平台实现所准备的，同时能够支持从Web处的移植。

与 NativeScript 相比，React Native 采用了略有不同的方法：它鼓励其社区为不同的平台编写单独的 UI，并坚持“learn once, write everywhere”的方法。

因此，其代码的共享程度也有 70%。另外，React Native 还拥有类似 NativeScript 的原生 API 渲染功能。

不过它需要构建额外的桥式 API 层，并运用原生控制器来连接 JavaScript 的 runtime。

总的说来，如果您需要使用同一种业务逻辑同时运行 Web 和移动应用的话，那么这两种框架都是不错的选择。

当然，NativeScript 更专注于代码的共享，和产品上线时间的缩短;而 React Native 则会用更长的开发周期换取最终更贴近的原生观感。

⑦文档和厂商支持：文档不足，需依靠大型社区

自 2018 年 1 月以来，由于 Google 持续对 Angular 生态系统进行开发，他们不但能为该框架提供长期支持(Long-Term Support，LTS)，还能专注于修复错误和积极改进。

不过相比其框架的发展速度，对应的文档更新则没有那么的及时。一些开发人员对其 CLI 文档更新的速度表示了担忧。

下图是旨在方便 Angular 开发人员使用的一款交互式服务界面(https://update.angular.io/)，您可以自定义框架的当前版本和更新目标，以获取更新内容的清单。

React vs Angular，到底谁更牛?

由于 AngularJS 的文档(https://docs.angularjs.org/api)和教程所提供的范围比 Angular 2+ 更为广泛，因此受到了开发人员的称赞。

而 React 社区则遇到了与 Angular 类似的文档问题。由于 React 环境及其运行方式经常出现更新，因此在使用 React 时，您必须为各种变化和不断的学习做好准备。

虽然 React 已有一些最新版本的文档(请参见：https://reactjs.org/versions/)，但是要跟上所有的变更与集成，却并非一项简单的任务。

好在其社区的支持在某种程度上抵消了此类问题。React 拥有大量的开发人员，他们能够在专题论坛上时常分享自己的知识。

⑧学习曲线：Angular 更为陡峭

Angular 的学习曲线被认为比 React 陡峭一些。Angular 是一款复杂且冗长的框架，它能够通过各种方法去解决某些单个问题。不过它需要通过许多重复性的操作，来实现复杂的组件管理。

正如我们上面所提到的，该框架一直在不断地发展之中，因此开发人员不得不适应其各种变更。

另外，由于 Angular 2+ 使用了 TypeScript 和 RxJS，尽管 TypeScript 接近于 JavaScript，但是用户仍然需要花上一些时间去学习 RxJS。

由于更新频繁，React 也需要用户不断地学习。当然，如果您已经擅长于使用 JavaScript 的话，则不需要花费太多的时间重新开始。

目前，由于约有 60% 的 React 应用构建会用到 Redux，因此 Redux 成了一种必备工具，而 React 学习曲线则主要是由 Redux 库所决定。

不过，React 也为初学者提供了各种实用的教程，具体请参见：

https://reactjs.org/tutorial/tutorial.html
⑨社区和接受度：两者不相上下

React 在 GitHub 上的受欢迎程度略高于 Angular。它拥有 113,719 颗星和 6,467 人关注;而 Angular 只有 41,978 颗星和 3,267 人关注。

根据 2018 年版的 Stack Overflow Developer Survey(如下图所示)，Angular 的开发人员占比为 37.6%，而 React 的用户占比为 28.3%。

值得一提的是，该调查涵盖了 AngularJS 和 Angular 2+ 用户。

React vs Angular，到底谁更牛?

有趣的是：Angular 在负面评论上也较为领先。根据同一份调查显示，有 45.6% 的开发人员认为 Angular 是最糟糕的框架之一。

当然，此类负面反馈可能受到了许多开发人员仍在使用 AngularJS，这一客观事实的影响，毕竟 AngularJS 比 Angular 2+ 存在更多的问题。而且 Angular 的社区规模更为庞大。

相对而言，React 的数字就好看一些，只有 30.6% 的专业开发人员不愿意使用它。

您会选择哪种框架?

综上所述，Angular 背后的基本理念是：为前端开发的总体体验提供强大的支持和工具集。

由于拥有 Google 团队的不断更新和积极支持，该框架不会出现“野蛮生长”。

其背后的工程师们会努力保护现有的社区，并协助各类开发人员与公司，从 AngularJS 切换到具有更高性能和更小应用体积的 Angular 2+ 上。

同时，随着您的应用逐渐到达企业级规模，TypeScript 能够增加应用代码的可维护性，因此也就变得愈加重要了。当然，这些也会让开发人员面临陡峭的学习曲线。

React 提供了一种更为轻量级的方案，适合于没有太多学习时间就需要快速上手的开发人员。

虽然其代码库并未规定各种工具集和方法，但是诸如 Redux 之类的常用工具，还是需要您去额外花时间学习的。

而且，由于 React 的性能与 Angular 旗鼓相当，因此它对于开发人员来说还是颇具吸引力的。