angularjs - React 与 Angular : Slow rendering with React

Question

我正在对 Angular 和 React 进行比较，并决定尝试进行性能测试，看看大型列表在这两个框架中渲染的速度有多快。

当我完成带有一些基本货币格式的 React 原型(prototype)时，在我的快速笔记本电脑上渲染大约需要 2 秒。使用 Angular 时几乎没有注意到 - 只有当我切换到手机时才出现明显的延迟。

这非常令人惊讶，因为我被告知 React 应该在性能方面击败 Angular，但在本例中情况似乎恰恰相反。

我将原型(prototype)简化为一个非常简单的应用程序，以尝试隔离问题:https://github.com/pselden/react-render-test

在此示例中，更改语言后渲染这个简单列表需要花费近 200 毫秒，而我几乎没有做任何事情。

我在这里做错了什么吗？

/** @jsx React.DOM */
'use strict';

var React = require('react'),
    Numbers = require('./Numbers');

var numbers = []
for(var i = 0; i < 2000; ++i){
    numbers.push(i);
}

var App = React.createClass({
    getInitialState: function() {
        return { locale: 'en-US' };
    },

    _onChangeLocale: function(event) {
        this.setState({locale: event.target.value});
    },

    render: function() {
        var currentLocale = this.state.locale;

        return (
            <div>
                <select
                    onChange={this._onChangeLocale}>
                    <option value="en-US">English</option>
                    <option value="fr-FR">French</option>
                </select>
                <Numbers numbers={numbers} locales={[currentLocale]} />
            </div>
        );
    }
});

module.exports = App;

/** @jsx React.DOM */
'use strict';

var React = require('react'),
    ReactIntlMixin = require('react-intl');

var Numbers = React.createClass({
    mixins: [ReactIntlMixin],

    getInitialState: function() {
        return {
            numbers: this.props.numbers
        };
    },

    render: function() {
        var self = this;
        var list = this.state.numbers.map(function(number){
            return <li key={number}>{number} - {self.formatNumber(number, {style: 'currency', currency: 'USD'})}</li>
        });

        return <ul>{list}</ul>;
    }
});

module.exports = Numbers;

PS:添加了 Angular 版本:https://github.com/pselden/angular-render-test

编辑:我用react-intl提出了一个问题，我们进行了调查，发现使用https://github.com/yahoo/react-intl/issues/27并没有那么多开销。 -- 这里只是 React 本身比较慢。

Answer 1

这绝对是一个有趣的测试用例。

如果你看一下时间线，你会发现 Angular 仅用了 20 毫秒就完成了更改事件的处理。剩下的时间花在布局和重绘上。

React(使用生产版本，您的存储库默认使用 dev)大约需要 59 毫秒。同样，剩下的时间都花在布局和重绘上。

如果您查看 CPU 火焰图，您会发现 Angular 的工作量似乎少了很多。

Angular :

react :

React 以 shouldComponentUpdate 的形式提供了一个非常好的优化钩子(Hook)，当数千个组件中的单个实例应该更新而其他组件应该保持不变时，它特别有用；这是我在 this demo 中使用的技术(在隐身窗口中尝试一下；我发现一些 Chrome 扩展使布局/重绘时间变得更长——对我来说，一旦列表长到 1000，添加/删除单个元素大约需要 13 毫秒，更改元素的大小/颜色大约需要 1 毫秒)。但是，当每个元素都需要更新时，它就没有什么好处了。

我的猜测是，Angular 会更快地更改表中的大部分或全部元素，而 React 在使用 shouldComponentUpdate 时会非常熟练地更新选择条目。