Renderização sem bloqueio no ReactJS
Estou aprendendo o ReactJS e tentando criar um aplicativo nele.
Quando estou tentando modificar meu estado e renderização, minha página está congelando e não posso fazer nada até que a renderização seja concluída quando meus componentes ficarem enormes.
Descobri que posso usarshouldComponentUpdate
para otimizar meu código, mas a pergunta que me ocorre é: Posso fazer com que esse procedimento de renderização seja sem bloqueio? E para que eu possa dizer ao usuário que a página está processando algumas execuções de carregamento pesado e aguarde ou talvez mostre o andamento da execução? Ou se o usuário puder cancelar a renderização, por exemplo, para um editor ao vivo, se o usuário editar o conteúdo do editor, a seção "visualização" interromperá a renderização do conteúdo antigo e a tentativa de renderização do novo conteúdo sem bloquear a interface do usuário do editor?
Aqui está o código de exemplo de carregamento pesado:
<!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>
Quando eu pressionoStart
, a página congelará e não haverá resposta até que todosBox
é renderizado. É possível adicionar um botão chamadoCancel
qual usuário pode cancelar a renderização e limpar todas as caixas?