Question

我有一个复杂的组件，即渲染几秒钟。此组件包含大型画布，其中包含大量项目。有没有办法在等待Print组件时如何呈现某些图标？

render(){
  const {data} = this.props;
  return(
    <Page>
      <div className="item column-3" id="graphColumn">
        {this.state.loading ? <img src={loadingIcon}/> : false}
        <div className={this.state.loading ? "hidden" : "visible"}>
          <Print channels={this.state.channels} readyToRender={this.readyRender.bind(this)}/>
        </div>
      </div>
    </Page>
  )
}
readyRender(){
  this.setState({
    loading: false
  })
}

我尝试在渲染过程中设置display:none，然后在componentDidMount Print组件集display:auto中设置SUM()，但这不起作用。需要很长时间太。任何解决方案的提示？

Answer 1

有一些方法，但可能不是你希望的那种意义。

React同步执行渲染，这意味着没有其他东西可以并行运行。但是，如果您可以控制何时执行耗时的渲染，则可以预先添加等待图标。

以下是一个例子：

var Demo = React.createClass({
  getInitialState: function() {
    return {loading: true};
  },
  componentDidMount: function() {
    setTimeout(() => {
      this.setState({loading: false});
    }, 1000);  //delay this to allow React to actually render the initial state. Can be set to just 10ms, but then font-awesome css doesn't load in time from CDN.
  },
  render: function() {
    if(!this.state.loading) return <div>{this.simulateSlowRender()}</div>;
    return <div><i className="fa fa-spinner fa-spin fa-fw" aria-hidden="true"></i> loading...</div>;
  },
  simulateSlowRender: function() {
    let arr = new Array(10000000);
    arr.push("done!");  //the last item prints "done".
    return <div>{arr.map((item) => item)}</div>;
  }
});

ReactDOM.render(
  <Demo />,
  document.getElementById('container')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />

<div id="container"></div>

警告：请注意，这将“挂起”整个应用程序，直到渲染完成。在此期间，Javascript动画不太可能正常工作。

渲染期间加载屏幕（异步渲染）

1 个答案: