Question

最近我开始学习反应和想知道，是否存在某种用于大数据的非阻塞UI线程渲染的模式。比方说，我们采用this example：，点击创建很多项目，设置数量，比方说10000，我们将获得冻结用户界面近10秒。它可以通过observables顺利更新，一旦完成渲染，我就可以了，但有没有办法以块状渲染它？

通常，您设置某种类型的数组，将其切片，比方说50，处理这些数组，将setTimeout设置为0，再切片50，依此类推。重复直到数组的长度为0.是否存在反应组件的模式？也许是一些插件或直到mixin？

Answer 1

您可以使用requestIdleCallback推迟渲染：

function DeferredRender({ children }) {
  const [render, setRender] = React.useState(false);

  React.useEffect(() => {
    if (render) setRender(false);
    const id = requestIdleCallback(() => setRender(true), { timeout: 1000 });

    return cancelIdleCallback(id);
  }, [idleTimeout]);

  if (!render) return null;

  return children;
}

<DeferredRender>
 <ExpensiveStuff />
</DeferredRender>

Answer 2

对于类似的问题，我对数据进行了分块，然后使用reduce序列化了处理过程并承诺：

chunks.reduce( (previousPromise, nextChunk) => {
  return previousPromise.then(processChunkAndUpdateComponentStateAsPromise(nextChunk));
}, Promise.resolve());

Answer 3

对于多达10,000个项目的列表，我建议使用虚拟列表。 React的一个流行的实现是react-virtualized：http://bvaughn.github.io/react-virtualized/#/components/List。

这样做的原因是，虚拟列表只会呈现可见的内容，因此即使您要显示很多数据，它也会很快。您也可以将初始渲染分成多个批处理，但是如果这样做，则很可能会遇到其他性能问题（由于DOM过多，可观察性过多等）。

Answer 4

反应Concurrent Mode正在解决UI停顿问题。您可以观看[1] [2]的一些讲座以了解操作方法。这并不能使用户界面神奇地更快地更新，而只能帮助您使用户界面在更新时不会冻结。

您有两个选择之一：

大块更新状态。如果您将工作分块，则不只是基于时间进行工作：您不能基于时间对最佳值进行硬编码，因为人们的计算机性能不同。而是使用requestIdleCallback之类的浏览器API或查看调度程序NPM库（https://philippspiess.com/scheduling-in-react/），以便尽可能积极地执行工作，但以不会导致浏览器挂起的预定方式进行。
或使用一个库来建立虚拟列表，因为另一个人已经回答了。

反应大块数据的非阻塞渲染

4 个答案: