Question

我正在学习ReactJS并尝试在其上构建一些应用程序。

当我试图修改我的状态并进行渲染时，我的页面会冻结，并且在我的组件变得庞大时渲染完成之前无法执行任何操作。

我发现我可以使用shouldComponentUpdate来优化我的代码，但问题是：我可以使此渲染过程无阻塞吗？所以我可以告诉用户该页面正在处理一些繁重的加载执行，请等待或者显示执行的进度？或者，如果用户可以取消渲染，例如，对于实时编辑器，如果用户编辑编辑器的内容，则预览＆＃34;部分将停止呈现旧内容并尝试呈现新内容而不阻止编辑器UI？

这里是重载示例代码：

＆＃13;

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

＆＃13;

当我按Start时，页面将冻结并且在呈现所有Box之前不会响应。是否可以添加一个名为Cancel的按钮，用户可以取消渲染并清除所有框？

Answer 1

这是一个很好的问题，也是setTimeout的完美用例，它可以安排更新到下一轮事件循环。

不是存储要渲染的组件数，而是存储组件数组，并直接渲染它们。的 jsfiddle

var CommentBox = React.createClass({ getInitialState: function() { return { boxes: [<Box key="first" />] }; }, heavyLoadRender: function() { setTimeout(() => { if (this.state.boxes.length < 50000) { this.setState({ boxes: this.state.boxes.concat(<Box key={this.state.boxes.length} />) }) this.heavyLoadRender() } }) }, render: function() { return ( <div> <button onClick={this.heavyLoadRender}>Start</button> {this.state.boxes} </div> ) } })

更新：

~~如果你只想在数组填满后显示状态，在它达到那个大小之前不要显示任何东西：~~

这不起作用：

{ this.state.boxes.length === 50000 && this.state.boxes }

希望不会丢失！使用风格！

<div style={{ display: this.state.boxes.length === 50000 ? 'block' : 'none' }}> { this.state.boxes } </div>

如果您想提高速度，可以推送超过setTimeout
项目的项目
var newBoxes = [] for (var i = 0; i < 5; i++) { newBoxes.push(<Box />) } this.setState({ boxes: this.state.boxes.concat(newBoxes) })

updated fiddle。我认为这类问题需要时间才能完成。在10000个批次中，基本的盒子组件不会阻塞，你可以很容易地在那里扔一个装载旋转器。

ReactJS中的非阻塞渲染

1 个答案: