反应大块数据的非阻塞渲染 [英] React non-blocking rendering of big chunks of data

问题描述

最近我开始学习反应，想知道是否有某种模式可以用于大数据的非阻塞 UI 线程渲染.假设，我们采用 这个例子:，点击创建很多项目，设置数量，假设为 10000，我们将冻结 UI 近 10 秒.它可以通过 observables 平滑更新，一旦完成渲染，我就明白了，但是有没有办法以块的形式平滑地渲染它?

Recently I started to learn to react and wondering, is there some kind of pattern for non-blocking UI thread rendering for big data. Let's say, we take this example: , click create a lot of items, set number for, let's say 10000, we will get frozen UI for almost 10 seconds. It updates smoothly with observables, once it is done rendering, I get that, but is there a way to render it smoothly, in chunks?

通常，您会设置某种数组，将其切片，假设为 50，处理它们并 setTimeout 为 0 以切片另外 50，依此类推.重复直到数组的长度为 0.是否有反应组件的模式来做到这一点?也许是一些插件或直到 mixin?

Usually, you set up some kind of array, slice it by, let's say 50, process those and setTimeout for 0 to slice another 50 and so on. Repeat til array's length is 0. Is there a pattern for react components for doing that? Maybe some plugin or until mixin?

推荐答案

你可以使用 requestIdleCallback 来延迟渲染:

You can use requestIdleCallback to defer the render:

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

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

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

  if (!render) return null;

  return children;
}

<DeferredRender idleTimeout={1000}>
 <ExpensiveStuff />
</DeferredRender>

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