加载中

Lately, web development has been changing very quickly. Seemingly every month a new JavaScript framework is being introduced, and understanding what each has to offer can be troublesome. In this short series we will look at a few front-end JavaScript frameworks, and see how they compare with AngularJS. We’ll give a brief history of each, and touch on a few functional areas for comparison. In this article we’ll take a look at React, and see how it measures up to Angular for web development.

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

A Quick React Primer

React is a JavaScript web framework created by Facebook with one goal: building performant user interfaces. React was built around one of the common problems with other JavaScript frameworks – rendering large data sets efficiently. It makes use of a virtual DOM and a patching mechanism, which allow React to only update relevant portions of the application rather than having to re-render the entire site on each change.

React简介

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

A Lack of Opinion

Angular can be referred to as an “opinionated” framework. This means that the developers of AngularJS had an idea of what a “good” architecture for an application’s front-end should look like, and they built that architecture into AngularJS at its very core. When your application can fit within those confines, then Angular can be a joy to work with. However, if you find yourself deviating from Angular’s desired architecture, you can encounter a lot of pain. React, in comparison, does not attempt to impose an architectural ideal on your code base. It allows you to do lazy loading of components, decreasing load times and allowing you to more closely manage how your data is represented.

不固执己见

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

Templating

One benefit of Angular’s use of directives for data-driven display is that display templates are incredibly simple to write. Developing a UI for your data in Angular is extremely straightforward, and while you may give up some control over specific portions of the data representation the end result is a much more intuitive approach to user interface that takes less code and seems more “obvious.” React, on the other hand, tends to require custom functions to drive data display. This often means that you need to define how your data will be represented before it is coded into the DOM, which can cause a disconnect when trying to determine exactly how a particular element will be rendered.

模版

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

Performance

While Angular’s data representations can be highly compact, rendering the data can prove to be a pain point for large data sets. Since two-way data binding requires a listener on every changeable element, a large amount of data can pose a significant performance problem. React, on the other hand, makes use of a virtual DOM to track changes in elements. When a change is detected, React constructs a patch representing the actual change to the DOM and applies the patch. By not having to re-render the entire DOM for a large table each time an element changes, React shows significant performance gains over other JavaScript frameworks.

性能

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

Application Architecture

One more difference between AngularJS and React is the architecture each framework represents. AngularJS began life with a close representation of a MVC (Model-View-Controller) pattern, but has since evolved into a MVVM (Model View ViewModel) -MVC hybrid architecture. React, on the other hand, is focused on the “V” in MVC – it is designed to work with data representation, and leaves other elements of the application architecture to other components as selected by the programmer. An interesting note is that due to these architectural choices, it is entirely possible to augment an AngularJS application with React in order to enhance performance of troublesome components.

应用架构

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

Conclusion

Choosing a JavaScript framework for your application requires an in-depth knowledge of the pros and cons of each framework under consideration. As we saw above, React is an excellent choice for applications that will be routinely working with large dynamic data sets, handling the display and modification of large tables of data with relative ease and high performance. However, it does not truly cover the full stack of functionality encompassed by AngularJS – there is no controller layer to driver your data representation, for example. Ultimately, selecting between AngularJS and React comes down to a simple question: are the potential performance concerns of your application worth the effort to learn and use React? Or is it possible to augment your AngularJS implementation with components from React to come up with a whole that is greater than the sum of its parts? Unfortunately there is no easy answer – you’ll need to make the choice that makes the most sense for your specific application.

结论

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

返回顶部
顶部