Procesamiento sin bloqueo en ReactJS

Question

Apr 19, 2016, 06:43 AM

Procesamiento sin bloqueo en ReactJS

Estoy aprendiendo ReactJS e intento construir alguna aplicación en él.

Cuando intento modificar mi estado y renderizar, mi página se congela y no puede hacer nada hasta que finalice el renderizado cuando mis componentes se vuelven enormes.

Descubrí que puedo usarshouldComponentUpdate para optimizar mi código, pero la pregunta que me surge es: ¿puedo hacer que este procedimiento de renderizado sea sin bloqueo? Entonces, ¿puedo decirle al usuario que la página está procesando algunas ejecuciones de carga pesada y esperar o tal vez mostrar el progreso de la ejecución? ¿O si el usuario puede cancelar la representación, por ejemplo, para un editor en vivo, si el usuario edita el contenido del editor, la sección de "vista previa" dejará de mostrar contenido antiguo e intentará mostrar contenido nuevo sin bloquear la interfaz de usuario del editor?

Aquí está el código de ejemplo de carga pesada:

<!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>

Cuando presionoStart, la página se congelará y no habrá respuesta hasta que todosBox se rinde. ¿Es posible agregar un botón llamadoCancel ¿Qué usuario puede cancelar el renderizado y borrar todas las casillas?

Deja tu comentario