Я делал сравнение 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: Добавлена версия Angular: https://github.com/pselden/angular-render-test
Изменить: я открыл проблему с помощью реакции-intl, и мы исследовали и обнаружили, что с помощью https://github.com/yahoo/react-intl/issues/27 не было слишком много накладных расходов - это просто Реагирует на себя что здесь медленнее.
