反应延迟渲染

Question

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

这很好用，除了一个标签。特殊选项卡比其他选项卡大得多，它包含一个有 2000 行的表，因此 React 需要 3 秒来渲染它。这使得用户体验非常糟糕：你点击标签，3 秒内什么都没有发生，因为 React 正忙于渲染，然后突然出现大表。

如果没有 React，我通常会这样做：

1. 在新的活动标签中添加一些加载指示器
2. 切换到新的活动标签
3. setTimeout(render(), 50);

由于实际渲染发生在 50 毫秒之后，浏览器有足够的时间来更新 UI。用户点击后会立即看到新的活动标签，并且在新的活动标签中有一个加载指示器，现在等待 3 秒更容易接受。

在 React 中，render() 方法是由 React 框架调用的，是否可以做类似于步骤 3 的操作？

我知道我可以用分页表替换大表，因此只会同时呈现有限数量的行。但我的问题集中在处理需要大量时间来呈现的 UI 组件。

Answer 1

是的，您可以通过提供组件状态来实现类似的效果。

将getInitialState( return { 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>)
}

并将componentDidMount() 添加到您的组件中，例如：

componentDidMount() {
  var self = this;
  setTimeout(() => {
    self.setState({loading: false}); }, 50);
}

那么你的组件应该首先渲染一个加载状态，然后在 50ms 之后加载整个东西。