Reactjs 反应延迟渲染

假设我有一个用React编写的选项卡控件组件。只有活动选项卡将被渲染以获得更好的性能（如果渲染所有选项卡，则需要5秒钟，因为大约有20个选项卡，每个选项卡包含大量数据）。当我单击其他选项卡以激活它们时，将呈现它们

除了一个标签外，这个功能非常好用。“特殊”选项卡比其他选项卡大得多，它包含一个有2000行的表，因此React需要3秒钟来呈现它。这使得用户体验非常糟糕：单击选项卡，3秒钟内没有任何事情发生，因为React正在忙于渲染，然后突然出现了一个大表

在没有反应的情况下，我通常会这样做：

在新的活动选项卡中放置一些加载指示器

切换到新的活动选项卡

setTimeout（render（），50）

由于实际渲染发生在50毫秒之后，所以浏览器有足够的时间更新UI。用户在单击新的活动选项卡后会立即看到它，并且在新的活动选项卡中有一个加载指示器，现在等待3秒是可以接受的

使用React，React框架调用render（）方法，是否可以执行类似于步骤3的操作

---

我知道我可以用分页的表替换这个巨大的表，所以在同一时间只能呈现有限数量的行。但是我的问题集中在处理需要大量时间渲染的UI组件上。

是的，您可以通过提供组件状态来实现类似的功能

添加

getInitialState（返回{loading:true}）到您的组件

根据状态更改渲染方法，例如

if (this.state.loading) {
  return ( 
    <div className='my-nice-tab-container'>
      <div className='loading-state'>Loading...</div>
    </div>)
} else {
  return (
    <div className='my-nice-tab-container'>
      <div className='full tab contents'>
        {myHugeArray.map(item => ( return
          <Item class='one-of-list-of-2000' />
        ))}
      </div>
    </div>)
}

然后您的组件应该首先以加载状态进行渲染，然后在50毫秒后加载整个组件。
谢谢，我找到了类似的解决方案，因为加载过程有点复杂。但概念是一样的。
componentDidMount() {
  var self = this;
  setTimeout(() => {
    self.setState({loading: false}); }, 50);
}