Reactjs React vs Angular：使用 React 进行慢速渲染

发布于10月31日

我对Angular和React进行了比较，并决定进行一次性能测试，看看一个大列表在这两种框架中呈现的速度有多快.

当我用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:增加了一个Angular 版本:https://github.com/pselden/angular-render-test

编辑:我打开了react intl的一个问题，我们进行了调查，发现使用https://github.com/yahoo/react-intl/issues/27并没有太多开销——只是react本身的速度较慢.