节流数据呈现在反应中

Question

我正在拍摄出色的性能，我知道这样做的一种方法是节流数据加载，当用户一开始不会看到所有的数据加载。

在反应中做这件事的最佳方法是什么？

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

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

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

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

Answer 1

我想你是在找虚拟名单。基本上，您有一堆记录加载在内存中，但您只呈现那些在屏幕上可见的记录。当您滚动时，项目将根据需要从DOM中添加/删除。

react虚拟化库(https://github.com/bvaughn/react-virtualized)为这种行为提供了很好的实现。您可以在这里看到一堆使用它的演示：https://bvaughn.github.io/react-virtualized/#/components/List