angularjs – React vs Angular：使用React缓慢渲染

当我完成了我的React原型与一些基本的货币形成，它需要约2秒渲染在我的快速笔记本电脑。有了Angular，它几乎不可察觉 – 只有当我切换到我的手机，它有一个明显的滞后。

这是非常令人惊讶的，因为我被告知，React应该打败Angular的裤子的性能，但在这种情况下，似乎相反的情况是真的。

我把我的原型蒸馏到一个非常简单的应用程序，试图隔离问题：https://github.com/pselden/react-render-test

在这个示例中，改变语言后，花费近200ms来呈现这个简单的列表，我几乎不做任何事情。

我在这里做错了吗？

/** @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

编辑：我打开一个问题与反应intl，我们调查，发现没有那么多开销使用https://github.com/yahoo/react-intl/issues/27 – 它只是React本身在这里慢。