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

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，但这不起作用。它也需要很长时间。有什么解决办法吗？

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 动画在这段时间内不太可能工作。