AngularJS 对比 React 已翻译 100%

最近,网页的发展变得越来越快.几乎每个月都会有一个新的javascript框架被宣传和理解它们的功能可能引起的麻烦.在这短短的系列,我们来看一下一些前端的javascript框架,并将它们和AngularJS做一下比较.我们简短的介绍一下每个框架的历史,并在功能方面做一下比较.在这篇文章里面,我们来看一下React相对于Angular来说,它在网页开发方面采取怎么样的措施.

React简介

React是脸谱开发的一种JavaScript框架，它的唯一目标就是构建高性能的用户接口。开发React就是为了解决其他JavaScript框架都未能解决的一个问题-高效地渲染大型数据集。它采用了虚拟文档对象模型(DOM)和拼接机制，这样，每一次对网页做了更改后，React就只更新与更改相关的部分，而不需要重新对整个站点进行渲染。

不固执己见

通常认为Angular是一种“固执己见”的框架。意思就是AngularJS的开发者认为一个“好的”应用前端架构就应改像AngularJS这样，他们也在AngularJS的核心也采用的是这样的架构。因此，当你的应用满足上面所说的限制的话，Angular就运行的非常良好。然而，如果你发现你的应用框架构与Angular所期望的架构相差很大，那么你会感觉到非常痛苦。相比之下，React并不打算给你提供一个适合你编码的理想架构。它让你减少要装载的组件，降低装载时间，让你更加自由地管理数据的表现形式。

模版

Angular的指令（Directive）用于数据驱动显示，通过它来编写显示模版相当容易，这是使用Angular的一大好处。当你为数据构建UI时，使用Angular是非常直接的。对于数据展现而言，只要放弃对某些环节的控制，你就能以一种更直观的方式，给用户界面带来更少的代码以及“显而易见”的感觉。然而，React趋向于由你提供自定义函数来驱动数据的展现。这通常意味着，在数据被通过代码融入DOM前，你得自己定义你的数据将如何被展现。这使得在尝试决定某个元素具体该如何被渲染时，逻辑上会出现一定的断层。

性能

虽然Angular的数据的表达能够非常紧凑, 但是渲染大型数据集依旧被证明是一个痛点. 由于双向数据绑定需要监听每一个可变元素, 数据量变大就会带来显著的性能问题. React, 在另一方面, 使用虚拟DOM来跟踪元素的变化. 当检测到变化时, React会构建一个针对DOM变化的补丁, 然后应用这些补丁. 由于不必在每个元素每次变化时重新渲染整个巨大的table, React相对于其他JavaScript框架有显著的性能提升.

应用架构

AngularJS和React还有一个不同点在于它们所选择的架构. 最初AngularJS使用了MVC(模型-视图-控制器)模式构建, 然后逐渐演化成了MVVM(模型-视图-视图模型)-MVC混合架构. React却是另一方面, 它的关注点只在MVC模型的"V"上 – 它被设计用来展现数据, 而将其他方面交由应用架构中编程人员选择的其他组件负责. 有一件值得注意的有趣的事是, 由于这样的架构选型, AngularJS的某些棘手的组件完全可以通过React来增强.

结论

在为你的应用选择JavaScript框架时，要考虑每个框架的优势和劣势，这需要对相关的知识有深入的了解。正如上文所述，如果应用时常要处理大量的动态数据集，并以相对简便和高性能的方式对大型数据表进行显示和变更，React是相当不错的选择。但是React不像AngularJS那样包含完整的功能，举例来说，React没有负责数据展现的控制器（Controller）层。总而言之，在AngularJS和React之间做出选择意味着回答一个看似简单的问题：为了解决应用潜在的性能问题，是否值得你去花精力学习和使用React？或者说，是否可能将React的组件（Component）在AngularJS中实现（当然这样会使得架构整体变得冗余）[译者注：AngularJS中的指令和React的组件扮演着类似的角色]？要回答这个问题并不容易，你要根据具体的应用场景来做出决定。