Nicht blockierendes Rendern in ReactJS

Question

Apr 19, 2016, 06:43 AM

Nicht blockierendes Rendern in ReactJS

Ich lerne ReactJS und versuche, eine Anwendung darauf aufzubauen.

Wenn ich versuche, meinen Status und mein Rendering zu ändern, friert meine Seite ein und kann nichts tun, bis das Rendering beendet ist, wenn meine Komponenten sehr groß werden.

Ich habe festgestellt, dass ich @ verwenden kashouldComponentUpdate, um meinen Code zu optimieren, aber die Frage ist: Kann ich dafür sorgen, dass diese Renderprozedur nicht blockiert wird? Und so kann ich dem Benutzer mitteilen, dass auf der Seite einige hochgeladene Ausführungen ausgeführt werden, und bitte warten oder möglicherweise den Fortschritt der Ausführung anzeigen. Oder wenn der Benutzer das Rendern abbrechen kann, z. B. für einen Live-Editor, und wenn der Benutzer den Inhalt des Editors bearbeitet, wird im Abschnitt "Vorschau" das Rendern alter Inhalte und der Versuch, neuen Inhalt zu rendern, gestoppt, ohne die Editor-Benutzeroberfläche zu blockiere

Hier ist der Beispielcode für starkes Laden:

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

Wenn ich drückeStart, die Seite friert ein und es erfolgt keine Antwort, bis alleBox ist gerendert. Ist es möglich, eine Schaltfläche mit dem Namen @ hinzuzufügeCancel Welcher Benutzer kann das Rendern abbrechen und alle Kontrollkästchen deaktivieren?