在reactjs中渲染大状态数据

Question

我的客户给我一张有12k条记录的表（大约20-> 30MB），然后他们想在屏幕上显示所有内容，这时他们不想分页。 加载页面时，我调用api并更新组件的新状态，但是我花了大约10秒钟来完成渲染，并且在滚动此列表时，它也很慢。 我的问题是我如何使其更快？

这是第二种情况，当我尝试处理33k条记录（约51MB）时，发生内存泄漏并出现白屏。 我的问题是国家的限制是什么？我要用更大的数据更新状态吗？

Answer 1

对于第一个问题，它变慢的原因是因为您正在渲染的DOM很大，所以它消耗了太多的内存，因此您的浏览器开始占用RAM，您应该实现虚拟滚动，以便仅可见元素被加载到DOM中。

Answer 2

首先，您需要的是Infinity Scroll。 就像Netflix或Prime Videos一样。 首先，您调用20条记录，然后滚动到底部将再次调用20条记录，依此类推。 因此，它将以20开头，一旦您要到达滚动条的底部，您将调用API来获取20多个API并将其添加到旧列表中。

现在，如果您滚动了很多，并且拥有2000条以上的Records，并且放慢了速度，那么请使用react-window或react-virtualized包，这只会渲染您在dom中查看的内容。 观看此视频以获取参考https://www.youtube.com/watch?v=QhPn6hLGljU。