ReactJS

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

为什么选择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】