React与AngularJS到底那个更快...

た入场券 2022-09-23 04:56 157阅读 0赞

React自诞生以来，一直以其渲染速度快著称，特别与AngularJS和EmberJS等相比更是如此。但也有人不同意这个观点，以色列软件开发公司500Tech的CEO [Boris Dinkevich][]近日发表[博文][Link 1]称，其实React并不真正比AngularJS快。

React之所以被人们认为快的原因，是因为DOM操作起来很慢，而React采用了Virtual DOM来避免直接对DOM进行操作。Boris认为，实际上官方并没有提供Demo来说明性能提升了多少，而Virtual DOM带来的Javascript对数据的复杂操作可能会抵消它的好处。在考察了演示React和AngularJS对比的两个广为传播的Demo后，Boris的结论是，基于Virtual DOM的框架并不比传统的框架要快。

第一个大家看得最多的Demo来自于React.js Conf 2015上的[演示][Link 2]，内容是React和AngularJS的对比（Demo：[React][]，[AngularJS][]）。Boris发现，这个demo其实对AngularJS并不公平，因为demo作者忽视了AngularJS里基本的提升性能的语句“[track by][React]”。只需简单的修改一行代码，将原来的：

ng-repeat="(key, db) in databases"

修改为：

ng-repeat="(key, db) in databases track by key"

就可以看到，修改后的[AngularJS Demo][]速度大大提升，并不比React的表现要慢。

第二个Demo来自于ng-conf 2015的[演示][Link 3]，可以看到在Angular的指令中使用React后速度显著提升。但Boris认为这个对比并不公平，因为它演示的是React组件渲染对比Angular渲染和数据处理。在Angular Demo里选择使用[isolated scope][]后，[结果][Link 4]显示两者之间的速度差别不大。

Boris的文章在Hacker News上引起了激烈讨论，有些人认为作者言过其实，他们在自己的项目中使用React部分代替Angular后速度快了很多；也有些人拥护作者的观点，认为React在过去的一段时间里被过度营销，一些Demo并未考虑实际情况。但还有一些人则认为速度并不是React的卖点，用户feedjoelpie[表示][Link 5]：

> React只是使用起来非常友好并且易于理解，是virtual DOM让这一切成为可能，同时速度能够让人接受。DOM diff的目标并不在于让React变得比它的同胞更快，而是让你不用再考虑DOM，取而代之的是关注你前端的全局状态。

React资料:https://wohugb.gitbooks.io/react/content/index.html

Angular

选择 Vue 而不选择 Angular，有下面几个原因，当然不是对每个人都适合：

*  在 API 与设计两方面上 Vue.js 都比 Angular 简单得多，因此你可以快速地掌握它的全部特性并投入开发。
 *  Vue.js 是一个更加灵活开放的解决方案。它允许你以希望的方式组织应用程序，而不是任何时候都必须遵循 Angular 制定的规则。它仅仅是一个视图层，所以你可以将它嵌入一个现有页面而不一定要做成一个庞大的单页应用。在配合其他库方面它给了你更大的的空间，但相应，你也需要做更多的架构决策。例如，Vue.js 核心默认不包含路由和 Ajax 功能，并且通常假定你在应用中使用了一个模块构建系统。这可能是最重要的区别。
 *  Angular 使用双向绑定，Vue 也支持双向绑定，不过默认为单向绑定，数据从父组件单向传给子组件。在大型应用中使用单向绑定让数据流易于理解。
 *  在 Vue.js 中指令和组件分得更清晰。指令只封装 DOM 操作，而组件代表一个自给自足的独立单元 —— 有自己的视图和数据逻辑。在 Angular 中两者有不少相混的地方。
 *  Vue.js 有更好的性能，并且非常非常容易优化，因为它不使用脏检查。Angular，当 watcher 越来越多时会变得越来越慢，因为作用域内的每一次变化，所有 watcher 都要重新计算。并且，如果一些 watcher 触发另一个更新，脏检查循环（digest cycle）可能要运行多次。 Angular 用户常常要使用深奥的技术，以解决脏检查循环的问题。有时没有简单的办法来优化有大量 watcher 的作用域。Vue.js 则根本没有这个问题，因为它使用基于依赖追踪的观察系统并且异步列队更新，所有的数据变化都是独立地触发，除非它们之间有明确的依赖关系。唯一需要做的优化是在 `v-for` 上使用 `track-by`。

有意思的是，Angular 2 和 Vue 用相似的设计解决了一些 Angular 1 中存在的问题。

React

React.js 和 Vue.js 确实有一些相似 —— 它们都提供数据驱动、可组合搭建的视图组件。当然它们也有许多不同。

首先，内部实现本质上不同。React 的渲染建立在 Virtual DOM 上——一种在内存中描述 DOM 树状态的数据结构。当状态发生变化时，React 重新渲染 Virtual DOM，比较计算之后给真实 DOM 打补丁。

Virtual DOM 提供了一个函数式的方法描述视图，这真的很棒。因为它不使用数据观察机制，每次更新都会重新渲染整个应用，因此从定义上保证了视图与数据的同步。它也开辟了 JavaScript 同构应用的可能性。

Vue.js 不使用 Virtual DOM 而是使用真实 DOM 作为模板，数据绑定到真实节点。Vue.js 的应用环境必须提供 DOM。但是，相对于常见的误解——Virtual DOM 让 React 比其它的都快， Vue.js 实际上性能比 React 好，而且几乎不用手工优化。而 React，为了最优化的渲染需要处处实现 `shouldComponentUpdate` 和使用不可变数据结构。

在 API 方面，React（或 JSX）的一个问题是，渲染函数常常包含大量的逻辑，最终看着更像是程序片断（实际上就是）而不是界面的视觉呈现。对于部分开发者来说，他们可能觉得这是个优点，但对那些像我一样兼顾设计和开发的人来说，模板能让我们更好地在视觉上思考设计和 CSS。JSX 和 JavaScript 逻辑的混合干扰了我将代码映射到设计的思维过程。相反，Vue.js 通过在模板中加入一个轻量级的 DSL (指令系统)，换来一个依旧直观的模板，且能将逻辑封装进指令和过滤器中。

React 的另一个问题是：由于 DOM 更新完全交给 Virtual DOM 管理，当想要自己控制 DOM 时就有点棘手了（虽然理论上可以做到，但是这样做就本质上违背了 React 的设计思想）。如果应用需要特别的自定义 DOM 操作，特别是复杂时间控制的动画，这个限制就很讨厌。在这方面，Vue.js 更灵活，有许多用 Vue.js 制作的 [FWA/Awwwards 获奖站点][FWA_Awwwards]。

再多说几句：

*  React 团队雄心勃勃，计划让 React 成为通用平台的 UI 开发工具，而 Vue 专注于为 Web 提供实用的解决方案。
 *  React，由于它的函数式特质，可以很好地使用函数式编程模式。但是对于初级开发者和初学者这也导致较大的学习难度。Vue 更易学习并能快速投入开发。
 *  对于大型应用，React 社区已经创造了大量的状态管理方案，例如 Flux/Redux。Vue 本身不解决这个问题（React 内核也是），但是可以轻松地修改状态管理模式，实现一个类似的架构。Vue 有自己的状态管理方案 [Vuex][]，而且 Vue 也可以与 [Redux][] 一起用。
 *  React 的开发趋势是将所有东西都放在 JavaScript 中，包括 CSS。已经有许多 CSS-in-JS 方案，但是所有的方案多多少少都有它的问题。而且更重要的是，这么做脱离了标准的 CSS 开发经验，并且很难和 CSS 社区的已有工作配合。Vue 的 [单文件组件][Link 6] 在把 CSS 封装到组件模块的同时仍然允许你使用你喜欢的预处理器。

[Boris Dinkevich]: https://twitter.com/BorisDinkevich
[Link 1]: http://blog.500tech.com/is-reactjs-fast/
[Link 2]: https://www.youtube.com/watch?v=z5e7kWSHWTg
[React]: https://docs.angularjs.org/api/ng/directive/ngRepeat#tracking-and-duplicates
[AngularJS]: http://speed.examples.500tech.com/ngrepeat/before/angular.html
[AngularJS Demo]: http://speed.examples.500tech.com/ngrepeat/after/angular.html
[Link 3]: https://www.youtube.com/watch?v=XQM0K6YG18s
[isolated scope]: https://egghead.io/lessons/angularjs-understanding-isolate-scope
[Link 4]: http://speed.examples.500tech.com/digest/after/
[Link 5]: https://news.ycombinator.com/item?id=9638552
[FWA_Awwwards]: https://github.com/vuejs/awesome-vue#interactive-experiences
[Vuex]: https://github.com/vuejs/vuex
[Redux]: https://github.com/egoist/revue
[Link 6]: https://cn.vuejs.org/guide/application.html#单文件组件