javascript - 在reactjs中渲染大状态数据

Question

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

这是第二种情况，当我尝试使用33k记录(约51MB)时，发生内存泄漏并出现白屏。我的问题是状态的限制是什么？我是否用更大的数据更新状态？

Answer 1

首先，你需要的是无限滚动。这就像 Netflix 或 Prime Videos 所做的那样。首先您调用 20 条记录，当您滚动到底部时，它将调用另外 20 条记录，依此类推。因此，它将从 20 开始，当您即将到达滚动条底部时，您将调用 API 来获取另外 20 个并将其添加到旧列表中。

现在，如果你滚动了很多，并且有 2000 多个记录，并且速度变慢，那么使用react-window或react-virtualized包，它所做的只是渲染你在dom中查看的内容。查看此视频以供引用https://www.youtube.com/watch?v=QhPn6hLGljU 。