如何调试 React-Virtualized 的 InfiniteScroll/Grid Fetching？

Question

我有一个 React Virtualized InfiniteList/Grid 组合，遵循文档 (https://github.com/bvaughn/react-virtualized/blob/master/docs/InfiniteLoader.md#infiniteloader-and-grid) 中的基本模式。

效果很好，除了两件事：

• 如果我滚动得太快，而不是等待事情赶上，它会将滚动重置到网格顶部

• 组合只获取前 N 个结果（例如 125）......即使我有 859 个结果（即使我提供了 859 作为 rowCount 属性）

  • 这特别奇怪，因为它以 25 为增量获取，所以这意味着前 5 次一切正常，然后在第 6 次莫名其妙地失败了。

我已经尽我所能弄清楚发生了什么，即使我用 console.log 和 debugger 语句填充 React Virtualized 代码，我仍然无法弄清楚为什么它会停止在 125 个结果（或为什么快速滚动重置）。

任何更熟悉 React Virtualized 的人能指出我在代码中决定是继续获取​​还是停止（并可能将开始索引重置为 0）的位置？我可以看出涉及到 InfiniteScroll 的 onRowsRendered 和 scanForUnloadedRanges 和 Grid 的onSectionRendered，但我仍然无法弄清楚值处理在哪里停止以及实际的“决定是否继续”逻辑开始。

Answer 1

正如@brianvaughn 在他的评论中所建议的，InfinititeLoader 组件 (https://github.com/bvaughn/react-virtualized/blob/master/source/InfiniteLoader/InfiniteLoader.js) 部分负责。每当呈现行时，_loadUnloadedRanges 方法就会从 scanForUnloadedRanges 调用，它会处理加载 scanForUnloadedRanges 找到的范围。

但是，这只是等式的一部分。传入onRowsRendered 的参数来自Grid。 Grid _updateScrollTopForScrollToRow 方法在用户滚动时被调用，该方法具有以下行：

const targetIndex = Math.max(0, Math.min(rowCount - 1, scrollToRow))

targetIndex 最终会影响加载哪些行，如您所见，这取决于最初传入的 rowCount。

这就是给我带来问题的原因。我从InfiniteLoader + List 组合开始，在该设置中，“行”对两个组件意味着相同的事情。但是，我随后切换到InfiniteLoader + Grid 组合，而Grid 的“行”是InfiniteLoader 行的数组。换句话说，Grid“行”是一行单元格，而InfiniteLoader“行”是一个单元格。

我计算rowCount 的方法已更改为使用“行”的Grid 定义，但由于它被传递给InfinniteLoader，我应该使用InfiniteLoader 的“行”定义“ 反而。换句话说，我应该只返回numItems，而不是numItems/columnCount。

如果 React Virtualized 使用 InfiniteLoader 的“items”属性而不是使用其他两个 React Virtualized 组件也使用的名称（具有两种不同的含义），那么所有这些都可以轻松避免......但至少现在我对这些组件的工作原理有了很多更好的理解。