反应延迟渲染 [英] React delayed rendering

问题描述

假设我有一个用React编写的标签控件组件。只有活动的选项卡会被渲染以提高性能（如果我渲染所有选项卡，将需要5秒钟，因为大约有20个选项卡，每个选项卡都包含大量数据）。当我单击其他选项卡以将其激活时，将显示其他选项卡。

Assume I have a tab control component written in React. Only the active tab will be rendered for better performance (if I render all tabs, it will take 5 seconds, because there are about 20 tabs, each containing plenty of data). Other tabs will be rendered when I click them to activate them.

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

This works very well except for one tab. The special tab is much bigger than others, it contains a table that has 2000 rows, so React takes 3 seconds to render it. This makes the user experience pretty bad: you click the tab, nothing happens for 3 seconds because React is busy rendering, then suddenly the big table appears.

没有React，我通常这样做：

Without React, I usually do this:

1. 在新的活动标签中放置一些加载指示器


2. 切换到新的活动标签


3. setTimeout（render（），50）;

1. Put some loading indicator in the new active tab
2. Switch to the new active tab
3. setTimeout(render(), 50);

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

Since the actual rendering happens after 50ms, browser has enough time to update UI. User will see the new active tab immediately after they click it, and there is a loading indicator in the new active tab, now waiting 3 seconds is much more acceptable.

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

With React, the render() method is called by React framework, is it possible to do something similar to step 3?

我知道我可以用分页替换巨大的表表格，因此只能同时显示有限数量的行。但是我的问题集中在处理需要大量时间进行渲染的UI组件上。

I know I can replace the huge table with a paginated table, so only limited number of rows will be rendered at the same time. But my question is focused on dealing with UI components that need significant time to render.

推荐答案

是的，您可以实现类似这样的功能

Yes, you can achieve something like this by giving your component state.

添加 getInitialState（return {loading：true}）; 到您的组件中

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

Add getInitialState( return { loading: true }); to your component
Change your render method, depending on state, e.g. like

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（）到您的组件，像这样：

And add componentDidMount() to your component, something like:

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

然后，您的组件应首先呈现加载状态，并在50ms后加载整个事情。

Then your component should first render with a loading state, and after 50ms load the entire thing.

这篇关于反应延迟渲染的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！