在React中限制数据呈现

Question

我正在拍摄以获得出色的性能，而且我知道一种方法是在用户最初看不到加载的所有数据时限制数据加载。

在React中执行此操作的最佳方法是什么？

我目前有一个数据数组，我根据使用的设备一次只在屏幕上显示2-4条记录。

我这样做的初步计划是调用一个函数：

incrementalLoad(data, item) { for(let i in data) { setTimeout(() => { //load 8 records }, 1000) }

但后来我记得事件循环和堆栈管理是一个问题。你们用过什么样的解决方案？我正朝着正确的方向前进吗？

Answer 1

我认为你正在寻找一个虚拟列表。基本上，您在内存中加载了一堆记录，但您只渲染屏幕上可见的记录。滚动时，根据需要在DOM中添加/删除项目。

反应虚拟化库（https://github.com/bvaughn/react-virtualized）对这种行为有很好的实现。您可以在此处查看一系列有关其用法的演示：https://bvaughn.github.io/react-virtualized/#/components/List