Question

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

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

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

在新的活动标签页
切换到新的有效标签
setTimeout(render(), 50);

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

使用React，React框架调用render（）方法，是否可以执行类似于步骤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后加载整个组件。

反应延迟渲染

1 个答案: