React vs Angular:使用React缓慢渲染

Question

我正在对Angular和React进行比较,并决定尝试性能测试,看看大型(ish)列表在两个框架中的呈现速度有多快.

当我用我的React原型完成一些基本的货币格式化时,在我的快速笔记本电脑上渲染需要大约2秒钟.使用Angular它几乎不会引人注意 - 只有当我切换到我的手机时它才有明显的延迟.

这是非常令人惊讶的,因为我被告知React应该击败Angular的裤子以获得性能,但在这种情况下似乎相反.

我将我的原型提炼为一个非常简单的应用程序,试图找出问题: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:添加了角度版本:https://github.com/pselden/angular-render-test

编辑:我打开了反应,国际问题,我们调查后发现,有没有说太多的开销使用https://github.com/yahoo/react-intl/issues/27 -它只是做出反应本身就是慢这里.

Answer 1

这绝对是一个有趣的测试案例.

如果您查看时间轴,您可以看到Angular已经完成了仅仅20ms的处理变更事件.剩余的时间用于布局和重绘.

React(使用生产版本,您的repo默认使用dev)大约需要59ms.同样,剩下的时间用于布局和重新绘制.

如果你看一下CPU火焰图,你可以看到Angular似乎做了很少的工作.

角度:

阵营:

React提供了一个非常好的优化钩子,shouldComponentUpdate当数千个组件的单个实例应该更新而其他组件应该保持不变时,这个钩子特别有用; 这是我在这个演示中使用的一种技术(在一个隐身窗口中试用;我发现一些Chrome扩展使布局/重绘时间更高 - 对我来说,一旦列表1000长需要〜13ms,添加/删除单个元素,改变元素的大小/颜色需要约1ms).但是,当每个元素都需要更新时,它没有用.

我的猜测是Angular在更改表中的大部分或全部元素时会更快,React在使用时更新精选条目非常精通shouldComponentUpdate.