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

Question

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

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

Answer 1

您可以使用requestIdleCallback延迟渲染：

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>

Answer 2

对于类似的问题，我对数据进行分块，然后使用 和 Promise 序列化处理reduce：

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