Renderização sem bloqueio no ReactJS

Question

Apr 19, 2016, 06:43 AM

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?