Я был очень разочарован результатами, которые я получил на следующем простом примере ReactJS. При нажатии на элемент метка (счет) обновляется соответствующим образом. К сожалению, для обновления требуется примерно ~ 0,5-1 секунды. Это в основном из-за "повторного рендеринга" всего списка todo.
Мое понимание заключается в том, что решение для решения ключевых требований заключается в том, чтобы API выглядел так, как будто он повторно отображает все приложение при каждом обновлении. Предполагается взять текущее состояние DOM и сравнить его с целевым представлением DOM, выполнить diff и обновить только те вещи, которые необходимо обновить.
Я делаю то, что не является оптимальным? Я всегда мог обновить метку счета вручную (и состояние молча), и это будет почти мгновенная операция, но это уберет точку использования ReactJS.
/** @jsx React.DOM */
TodoItem = React.createClass({
getDefaultProps: function () {
return {
completedCallback: function () {
console.log('not callback provided');
}
};
},
getInitialState: function () {
return this.props;
},
updateCompletedState: function () {
var isCompleted = !this.state.data.completed;
this.setState(_.extend(this.state.data, {
completed: isCompleted
}));
this.props.completedCallback(isCompleted);
},
render: function () {
var renderContext = this.state.data ?
(<li className={'todo-item' + (this.state.data.completed ? ' ' + 'strike-through' : '')}>
<input onClick={this.updateCompletedState} type="checkbox" checked={this.state.data.completed ? 'checked' : ''} />
<span onClick={this.updateCompletedState} className="description">{this.state.data.description}</span>
</li>) : null;
return renderContext;
}
});
var TodoList = React.createClass({
getInitialState: function () {
return {
todoItems: this.props.data.todoItems,
completedTodoItemsCount: 0
};
},
updateCount: function (isCompleted) {
this.setState(_.extend(this.state, {
completedTodoItemsCount: isCompleted ? this.state.completedTodoItemsCount + 1 : this.state.completedTodoItemsCount - 1
}));
},
render: function () {
var updateCount = this.updateCount;
return (
<div>
<div>count: {this.state.completedTodoItemsCount}</div>
<ul className="todo-list">
{ this.state.todoItems.map(function (todoItem) {
return <TodoItem data={ todoItem } completedCallback={ updateCount } />
}) }
</ul>
</div>
);
}
});
var data = {todoItems: []}, i = 0;
while(i++ < 1000) {
data.todoItems.push({description: 'Comment ' + i, completed: false});
}
React.renderComponent(<TodoList data={ data } />, document.body);
<script src="http://fb.me/react-js-fiddle-integration.js"></script>