者：陈峻 来源：51CTO

【51CTO.com快译】如今，随着使用JavaScript的软件应用日渐普及，针对ReactJS与AngularJS这两类开发技术的讨论也是此起彼伏。下面，让我们从各自的优缺点、以及适用场景等方面，对它们进行综合比较吧。

ReactJS

作为一款JavaScript的开源代码库，ReactJS提供了一整套精益工程(lean engineering)和基于段(segment-based)的工作流程。它是由Facebook提供的、可用于改进前端效果的专用语言，目前拥有体量大且活跃的社区。

React经常被用在媒体、产品转化、零售、金融创新、以及人工知识等领域。目前，Facebook网站的页面，instagram和WhatsApp应用都是以React为基础构建的。它通过各种优秀的代码库和组件(apparatuses)为用户带来了更高的效率、更好的代码稳定性、以及更令​人满意的搜索引擎优化(SEO)效果。

为什么选择ReactJS?

如下三方面因素往往是促使用户选用ReactJS的主要原因：

1.卓越的更新能力

ReactJS拥有自己的虚拟文档对象模型(Document Object Model，DOM)。通过管理DOM中的各项变化，它能够及时更新其DOM树，并可提供良好的显示效果。也就是说，Reactjs只会在调用setState的时候，才去优先更新虚拟DOM，之后再去与实际的DOM相比较，最后按需更新实际的DOM。显然，这既减少了DOM的更新频率，又减少了其更新的内容。相对于机械地分配DOM的方式，它能够更好、更可靠地管理和恢复DOM。

2.有效的SEO

通常，JavaScript框架会面临一个巨大的问题是：在升级之后，Web搜索工具往往很难找到大量JavaScript类型的应用。而ReactJS对此进行了大幅优化，可方便用户网站去捕获、吸引和留存访客。

3. ReactJS中的“段”

ReactJS通过影子(Shadow)DOM 的方式，在文档被渲染时插入子DOM。它与主文档的DOM是分离的，因此不会影响到主DOM树的内容。而作为一个可调整的组件，这样的独立段拥有各种灵活性。例如：由于支持代码的重用，因此经验丰富的Web开发人员可以在开发项目中自由地重用其代码组件，从而减少花费在项目上的重复时间。此外，React.Js拥有下载(downloading)数据流，可让那些较大的数据块在不受任何影响的情况下，被无缝且高效地输出。

ReactJS的缺点

1.文档是硬伤

不可否认，React的创新与迭代速度是有目共睹的。但是这却和它滞后的文档形成了鲜明的反差。也许是React的开发人员过于追求性能和功能上的升级，而拖累了其文档的跟进工作。至少对于ReactJS的用户而言，他们必须自行摸索或撰写相关的指南。

2.更新得太快

凡事都有利弊。React在功能上不断得以更新的状态，反而不一定会让某些用户买账。对于他们而言，也许需要的只是一个稳定的版本，而不必持续关注其是否又更新了什么新的特性，是否需要及时跟进学习。

3. JSX语法

JSX是React的一个核心组成部分，它使用XML标记的方式，去直接声明界面，以方便界面组件之间的互相嵌套。作为一种JS的语句结构，用户可以使用HTML语句，将HTML标签传送给子组件。与XML语言类似，它是一种带有属性树结构(即DOM结构)的语法，其目的不是为了在浏览器引擎中实现，而是要通过各种编译器，将标签编译成标准的JS语言。

不过，在实际应用中，用户可以完全不使用JSX语法，而只使用JS语法去实现。因此，在某种程度上说，JSX的使用只是为了让代码便于阅读而已。

AngularJS

作为一种受到TypeScript约束的开源式前端架构，AngularJS是从基于JavaScript的Web框架改进而来。通过AngularJS，您可以让应用程序根据模型-视图-控制器(MVC)的模型，将应用程序的数据模型、表示信息、以及控制信息相互分隔。AngularJS的显著优点包括：易于测试、易于扩展、易于调整、以及可直接用于工程设计等方面。总的来说，AngularJS通常被用于提供实时视频服务的应用程序中，对用户上传内容的分析与评论网站等应用场景中。

为什么选择AngularJS?

与ReactJS类似，如下三方面因素往往是促使用户选用AngularJS的主要原因：

1.适用性

AngularJS的MVC架构十分清晰，彼此之间分工明确，且有极好的可扩展性。通过使用Angular，用户能够更专注于业务逻辑，而不必考虑对于HTML的影响。可见，由它提供的功能具有低耦合性，能够与应用程序的其他部分相隔离，以方便用户对某个对象进行轻易地修改或替换，而不会对其他对象产生影响。同时，在AngularJs中，路由意味着从一个视图移动到另一视图，因此非常方便、容易。

2.测试

AngularJS可以通过依赖注入(Dependency Injection，DI)，连接到各种控制器(controller)上，以开展诸如单元测试、中途测试，以及端到端测试。其中，AngularJS的单元测试框架名为Karma。它是通过将模拟信息注入到监管器(regulator)中来实现测试目的。

3.用户界面(UI)

鉴于HTML是一种信息性且易读懂的语言，AngularJS使用HTML来描绘Web应用程序的UI。您可以在HTML中使用各种功能性的特征，来描述哪部分将会使用哪个调节器。而通过管理各种条件，AngularJS不但增强了用户与Web之间的互动，而且准确地描述了用户的真实需求。同时，在AngularJs中，您只需编写很少的代码即可实现DOM的各项操作。

AngularJS的缺点

1. 对SEO支持较差

有过开发经验的用户都知道，在使用AngularJS将Web程序从以PHP、Spring、以及MVC等服务器端的渲染方式，改为前端渲染加上Ajax的，通过Restful API来请求数据的纯客户端模式后，搜索引擎往往无法从页面上的数据中爬取相应的搜索索引。这也就是为何单页面应用程序需要使用JavaScript，去定期更新内容和元标签(Meta labels)的原因。

2.反向切换问题

设计人员无法直接从AngularJS切换到Angular。在Angular的文档中，有一整段内容清晰地描述了，所有能够处理转换的方式，唯独没有提到从AngularJS切换到Angular。

3. 与MVC高度关联

如前所述，AngularJS是一款遵循着MVC模型的框架。因此，如果您有着前后端交互的开发经验，就能很容易地理解MVC的相关实践;相反，如果您仅具备纯前端开发的知识，则很难理解MVC以及Angular。

ReactJS与AngularJS，到底该怎么选?

我们可能面对的开发项目往往是五花八门的。它们有的注重的是功能上的多样性，有的在意的是向下兼容性，有的需要有强大的可扩展性，而有的则应该具有高效的性能。那么，我们该如何在ReactJS与AngularJS之间做出明智的选择呢?下面是我的一些建议：

• 如果您习惯了C#和Java等传统且明确的编程方式，而且精通CSS、HTML和JavaScript等编程语言，那么AngularJS将会是您的正确决定。
• 如果您需要制作的应用程序，可能会被用到游戏等快速运行环境中，或是需要进行持续改进，亦或需要在各种不同的部分之间进行状态的转换，那么ReactJS会更加适合一些。
• Angular的在功能上更为强大。它不但能够对用户提供全方位的支持，而且能够为前端的改进提供丰富帮助和设备集支持。不过，其发起方—Google曾在社区里表示：目前，该项目已不再推进，他们会致力于将AngularJS逐渐过渡为Angular 2+(https://dzone.com/articles/angular-2-vs-react)。
• React已经在本领域积累了丰富的经验，并对本社区做出了不少承诺。它通过推行一种所谓“轻量级”的方法，来方便用户快速上手，而无需投入更多的学习精力。
• 就开发速度和熟练程度而言，AngularJS凭借着其卓越的CLI，不但能够加快工作区和配置工作的改进速度，还能够通过单行代码(one-line codes)的方式，构建出不同的段，以及包含了广泛内容组合的简洁代码。
• 在使用外部代码库时，React的速度和效率可能会受到影响。这就迫使ReactJS开发人员事先选好恰当的设计组件。
• 由于采用的是虚拟的DOM，因此在ReactJS中无论DOM树的整体还是部分被改变或调整，树的信息结构会按需被更新。也就是说，开发者对更改的跟踪和刷新，并不会影响到树的其他部分。
• 而使用真实DOM的AngularJS，则需要查找和识别到底是哪些部分需要更改。当然，AngularJS在识别和执行更改时，其效率并不会受到限制。

原文标题：ReactJS Vs. AngularJS，作者：Sidharth Jain

【51CTO译稿，合作站点转载请注明原文译者和出处为51CTO.com】

今天的JavaScript世界中，有一股风头如热锋在飞，那就是Angular.js，它在前端开发界以强大、灵活和愉悦的体验吸引了前端开发者出现一 рай堂。今天，让我们一起看看Angular.js的爆款之谜，并探讨一下为何这个宠儿在JavaScript中拥有这么高的相信空间。

一、初识Angular.js

Angular.js是一个开源的JavaScript框架，由Google开发。它主要用于构建用户界面，帮助开发者以声明式方法构建动态的用户界面。Angular.js的设计灵活，可以为活跃的WEB应用程序添加交互性。

二、Angular.js的特点

1. 双向数据绑定：Angular.js支持双向数据绑定，这为开发者提供了简单的方法来以声明式的方式更新DOM而无需显式地接触文档对象模型 (DOM)。
2. 模块化：Angular.js具有强大的模块化系统，可以将代码组织成模块，模块之间可以相互调用，使得应用程序更具有维护性。
3. 依赖注入：Angular.js依赖注入机制可以促进代码复用、可测试性和可维护性。
4. 直观的DOM元素操作：Angular.js的API以Java 语言两屏语法的形式出现，使开发者可以直观地操作DOM。

三、angular的理念

Angular.js的核心理念是持续的创新。Google以技术升级和创新为ний录发达了这一公司的文化愿景。Angular.js的设计追求简练，只提供了必需的功能和直观的更新流程，让开发者透过Angular的诱之不得。

四、Angular.js的开发优势

1. 可简化的HTML风格的模板语法：Angular.js开发者可以使用HTML来声明式地描述应用程序UI，因此开发者无需在概念上纳入JavaScript，也可以跟踪更少的导航属性属性。
2. 快速、高效的开发：Angular.js的发展速度非常快，并且外部线程可以抽象或减缓其他组件的执行过程。由于Angular.js框架无法创建或修改自我摧毁组件的对象，因此Angular.js性能比其他前端框架更高效。
3. 通过双向绑定的数据流速度可控：Angular.js通过使用双向数据绑

地时间 11 月 4 日，Angular 团队宣布 Angular 13 发布。此版本核心更新包括不再支持旧编译和渲染引擎 View Engine，全面支持新编译和渲染引擎 lvy，以及不再支持 IE11，除此之外还有包括对 APF 以及 Angular CLI 等方面的更新和修改。

Angular 13 新特性

弃用 View Engine

Angular 13 宣布不再支持 View Engine，同时全面启用 Ivy，Ivy 是 Angular 下一代编译和渲染引擎，Angular 在最近的版本中一直支持它。对于决定弃用 View Engine 的原因，Angular 团队此前曾表示大多数 Angular 开发人员已转而使用 Ivy。同时根据谷歌开发者 Thompson 的说法，此更新意味着“团队可以期待更快的编译，因为不再包含元数据和摘要文件。”

Angular Package Format (APF) 的更改

• 删除了旧的输出格式，包括来自 APF 的 View Engine 特定元数据；
• 使用最新版本的 APF 构建的库将不再需要使用 ngcc；
• 更新 APF 以支持 Node Package Exports。

Component API 的更新

在 Angular v13 更改之前，动态创建组件需要大量样板代码。 新的 API 消除了将 ComponentFactoryResolver 注入构造函数的需要。 Ivy 创造了使用 ViewContainerRef.createComponent 实例化组件的机会，而无需创建关联的工厂。

结束对 IE11 的支持

结束 IE11 的支持后：

• Angular 可以通过原生的 Web API 使用更现代浏览器功能；
• 可以删除 IE 特定的 polyfills 和代码路径使得应用程序更小，加载速度更快；
• 移除差异加载的需要；
• 运行 ng update 将自动删除这些特定于 IE 的 polyfills 并在项目迁移期间减少包大小。

需要注意的是，现有项目仍需支持 IE11 用户的开发者可继续使用 Angular 12，Angular 12 版本将一直维护到 2022 年 11 月 。

Angular CLI 的改进

Angular 13 项目中默认使用持久构建缓存，要启用此功能，可以在 angular.json 中添加如下配置：

{
 "$schema": "...",
 "cli": {
 "cache": {
 "enabled": true,
 "path": ".cache",
 "environment": "all"
 }
 }
 ...
}

复制代码

框架的更改和依赖项更新

• 使用 ng new 创建的应用程序默认使用 RxJS 7.4 版本 ；
• 使用 RxJS v6.x 的现有应用程序必须使用该 npm install rxjs@7.4 命令手动更新，可以在此处阅读迁移说明；
• 支持 TypeScript 4.4；

Angular 测试的改进

• TestBed 现在在每次测试后能更好地销毁测试模块和环境；
• DOM 在每次测试后都会被清除。

Angular 组件更新

• 所有基于 MDC 的组件都经过评估，在对​比度、触摸目标、ARIA 等方面满足更高的 a11y 标准。

可在此处阅读有关可访问性 (a11y) 标准的拉取请求

社区贡献

• 动态启用/禁用验证器
• 取消导航后恢复 history

其他更新

本次版本更新还包括扩展对 Adobe Fonts 的支持等，有关更详细的概述可以查看完整更新公告：

更新公告：https://blog.angular.io/angular-v13-is-now-available-cce66f7bc296

更新指南：https://update.angular.io/

关于 Angular

AngularJS 诞生于 2009 年，由 Misko Hevery 等人创建，是一款构建用户界面的前端框架，后为 Google 所收购。AngularJS 是一个应用设计框架与开发平台，使得开发现代的单页面应用程序（SPAs：Single Page Applications）变得更加容易：

• AngularJS 把应用程序数据绑定到 HTML 元素；
• AngularJS 可以克隆和重复 HTML 元素；
• AngularJS 可以隐藏和显示 HTML 元素；
• AngularJS 可以在 HTML 元素”背后”添加代码；
• AngularJS 支持输入验证。

AngularJS 有诸多特性：

• MVC；
• 模块化与依赖注入；
• 双向数据绑定；
• 指令与 UI 控件。

Angular 是 AngularJS 的重写，Angular2 以后官方命名为 Angular，2.0 以前版本称为 AngualrJS。AngularJS 是用 JavaScript 编写，而 Angular 采用 TypeScript 语言编写，是 ECMAScript 6 的超集。因不能简单迁移，因此 AngularJS 和 Angular 成为两个独立的框架。

目前，Angular 在前端框架中占据重要地位，经过严格测试已由 Google 和 Microsoft 等公司投入生产使用，相关线上资源也十分丰富。但是从学习角度说，Angular 的学习曲线最为陡峭，开发者需熟悉 TypeScript 才能开展工作，对于新手而言并不是最佳选择，更适合在团队中发挥作用。