在 reactjs 中渲染大状态数据答案

【问题标题】：Render big state data in reactjs在 reactjs 中渲染大状态数据
【发布时间】：2020-04-10 11:30:04
【问题描述】：

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

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

【问题讨论】：

【解决方案1】：

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

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

【讨论】：

谢谢。我认为这是最好的主意，但此时，我仍在思考，我在哪里存储 33k 记录在客户端？或者每当我滚动时，我从 API 获取范围数据，加载速度会很慢？
在客户端本身存储 33k 条记录绝不是一个好主意。对于一个网站来说，捆绑包的大小将是巨大的，并且总体上是一个糟糕的体验。我是一名前端开发人员，但我认为您仍然可以轻松地在 firebase 中快速创建记录并将记录存储在那里并通过 API 调用从中获取它。然后使用 react-infinity-scroller 之类的包，一次 lode 20 条记录并继续滚动
我绝对知道，我会建议他们使用分页或显示带有拥抱数据的消息警告，因为我知道他们不想支付更多的钱。再次感谢，我会接受这个答案。

【解决方案2】：

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

【讨论】：