Javascript React大数据块的非阻塞呈现

最近，我开始学习如何应对，并想知道，是否有某种模式可用于大数据的非阻塞UI线程呈现。比方说，我们采取： ，单击“创建大量项目”，设置数量，比如说10000，我们将获得冻结的UI近10秒。它用可观察的对象平滑地更新，一旦渲染完成，我就明白了，但是有没有一种方法可以平滑地、分块地渲染它呢

---

通常，您设置某种数组，将其切片，比方说50，处理这些数组，并将超时设置为0，以切片另一个50，依此类推。重复til数组的长度为0。react组件是否有这样做的模式？可能是某个插件或直到mixin？

对于类似的问题，我将数据分块，然后使用

reduce

序列化处理，并承诺：

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

---

对于多达10000个项目的列表，我建议使用虚拟化列表。React的一个流行实现是React虚拟化：

这是因为虚拟化列表只会呈现可见的内容，所以即使有大量数据要显示，它也会很快。您还可以将初始渲染拆分为批处理，但如果这样做，则可能会遇到其他性能问题（由于太多DOM、太多可观察对象等）。

React正在解决UI暂停问题。你可以看一些谈话来了解如何进行。这并不会让你的UI神奇地更新得更快，它只会帮助你在UI更新时让UI不会冻结

您的两个选择是：

如您所说，分块更新状态。如果你把工作分块，不要只基于时间：你不能基于时间硬编码一个最佳值，因为人们的电脑表现不同。相反，可以使用诸如

requestIdleCallback

之类的浏览器API，或者查看调度器NPM库（），以便尽可能积极地执行工作，但以不导致浏览器挂起的预定方式进行

或者使用一个库来创建一个虚拟化列表，正如另一个人已经回答的那样

---

您可以使用

requestIdleCallback

延迟渲染：

函数DeferredRender（{children，idleTimeout}）{
const[render，setRender]=React.useState（false）；
React.useffect（（）=>{
if（render）setRender（false）；
const id=requestIdleCallback（（）=>setRender（true），{timeout:idleTimeout}）；
return（）=>cancelIdleCallback（id）；
}，[idleTimeout]）；
如果（！render）返回null；
返回儿童；
}

这是一个缺少

idleTimeout

声明的示例，很抱歉，刚刚添加了

idleTimeout

声明