React 真的比 AngularJS 快吗?

  • 徐川

2015 年 6 月 3 日

话题:移动语言 & 开发架构前端

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

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

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

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

修改为:

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

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

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

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

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

他同时还推荐了另一篇介绍 React 优点的文章。也许,现在是抛开迷思,重新思考 React 能给我们带来什么的时候了。


感谢郭蕾对本文的审校。

给 InfoQ 中文站投稿或者参与内容翻译工作,请邮件至editors@cn.infoq.com。也欢迎大家通过新浪微博(@InfoQ@丁晓昀),微信(微信号:InfoQChina)关注我们,并与我们的编辑和其他读者朋友交流(欢迎加入 InfoQ 读者交流群)。

移动语言 & 开发架构前端