Неблокирующий рендер в ReactJS
Я изучаю ReactJS и пытаюсь построить какое-то приложение на нем.
Когда я пытаюсь изменить свое состояние и рендер, моя страница зависает и не может ничего сделать, пока рендеринг не закончится, когда мои компоненты не станут большими.
Я обнаружил, что могу использоватьshouldComponentUpdate оптимизировать мой код, но возникает вопрос: могу ли я сделать эту процедуру визуализации не блокирующей? И поэтому я могу сказать пользователю, что страница обрабатывает некоторые тяжелые загрузки, и, пожалуйста, подождите или, возможно, покажите ход выполнения? Или, если пользователь может отменить рендеринг, например, для живого редактора, если пользователь отредактирует содержимое редактора, раздел «предварительный просмотр» прекратит рендеринг старого контента и попытается отрендерить новый контент без блокировки интерфейса редактора?
Вот пример кода с большой нагрузкой:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>React Tutorial</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
</head>
<body>
<div id="content"></div>
<script type="text/babel">
var Box = React.createClass({
render: function() {
return (
<div>Box</div>
);
}
});
var CommentBox = React.createClass({
getInitialState: function() {
return {box_count: 5};
},
heavyLoadRender: function() {
this.setState({box_count: 40000});
},
render: function() {
var render_box = [];
for (var i=0; i<this.state.box_count; i++) {
render_box.push(<Box />);
}
return (
<div>
{render_box}
<button onClick={this.heavyLoadRender}>Start</button>
</div>
);
}
});
ReactDOM.render(
<CommentBox />,
document.getElementById('content')
);
</script>
</body>
</html>Когда я нажимаюStart, страница замерзнет и отклика нет пока всеBox оказано. Можно ли добавить кнопку с именемCancel какой пользователь может отменить рендеринг и снять все флажки?