翻译于 2015/02/24 19:35
3 人 顶 此译文
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.
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.
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.
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.
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.
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.
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的组件扮演着类似的角色]?要回答这个问题并不容易,你要根据具体的应用场景来做出决定。