React vs Angular，到底那个更好用

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

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

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

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

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

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 时，您已经拥有了用于构建应用的一切条件。

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 使用虚拟的 DOM，而 Angular 则在真实的 DOM 上运行，并使用变更检测来查找那些需要更新的组件。

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

③数据绑定：双向 vs 向下（单向）

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

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。

⑤预构建的 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 组件，以及包含 UI 组件与工具集的其他软件包。

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

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

我们对 NativeScript（Angular）和 React Native 也进行了深入分析和比较。

下面是要点简述：NativeScript 是一款使用 TypeScript 作为核心语言的跨平台移动框架。其用户界面是用 XML 和 CSS 来构建的。

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

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

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

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 开发人员使用的一款交互式服务界面，您可以自定义框架的当前版本和更新目标，以获取更新内容的清单。

由于 AngularJS 的文档和教程所提供的范围比 Angular 2+ 更为广泛，因此受到了开发人员的称赞。

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

虽然 React 已有一些最新版本的文档，但是要跟上所有的变更与集成，却并非一项简单的任务。

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

⑧学习曲线：Angular 更为陡峭

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

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

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

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

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

⑨社区和接受度：两者不相上下

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+ 用户。

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

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

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

您会选择哪种框架？

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

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

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

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

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

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

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

作者：Oleksandra Krykova