对大数据块进行反应非阻塞渲染

最近我开始学习反应并想知道是否有某种模式可以用于大数据的非阻塞 UI 线程渲染。比方说，我们采取这个例子 https://www.mendix.com/tech-blog/making-react-reactive-pursuit-high-performing-easily-maintainable-react-apps/： ，点击创建很多项目，设置数量，比如说10000，我们会得到UI冻结近10秒。它可以通过可观察对象顺利更新，一旦完成渲染，我明白了，但是有没有办法以块的形式顺利渲染它？

通常，您设置某种数组，将其切片（假设为 50），处理这些数组并将 Timeout 设置为 0 以切片另一个 50，依此类推。重复直到数组的长度为 0。反应组件是否有这样做的模式？也许是一些插件或者直到mixin？

您可以使用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>