结合虚拟化与数据获取

无限滚动会在用户接近列表末尾时加载更多数据，而不是通过明确的分页按钮进行分页。结合虚拟化后，您可以流畅地浏览超大型数据集。

列表只显示可见的行，同时在用户到达底部之前不久于后台获取新数据。

react-window 列表组件接受一个 onItemsRendered 回调，用于报告当前正在渲染的项索引。它会提供可见区域以及预渲染区域的起始和结束索引。

这个回调是连接滚动行为的入口，让您无需绑定原始滚动事件，就能检测用户已经滚动过列表的多少内容。

要知道何时获取数据，请将 onItemsRendered 提供的 overscanStopIndex 与当前的 itemCount 进行比较。当渲染窗口接近已加载数据的末尾时，就需要加载更多内容。

使用预渲染区域的结束索引可以提前留出一点时间，在用户真正到达最后一行之前稍早触发获取操作。

当结束索引越过某个阈值时，例如距离 itemCount 只剩一屏内容，您就可以调用获取下一页的函数。请为它添加保护，避免触发多个重叠请求。

加载标志或检查获取操作是否已经在进行，可以防止用户滚过触发区域时产生重复请求。

一个简洁的技巧是：只要还存在更多数据，就将 itemCount 设置为已加载数量加一。额外的行会渲染一个加载指示器，表示正在获取数据。

新数据到达后，数量会增加，加载指示器行也会被真实内容替代，从而提供流畅的视觉反馈。

配套的 react-window-infinite-loader 程序包会为您封装这套逻辑。您提供 isItemLoaded、loadMoreItems 和 itemCount，它就会在用户滚向尚未加载的行时调用您的加载器。

它会处理已加载范围的记录管理，并防止重复调用加载函数，从而简化可靠的无限滚动实现。

对于尚未加载的索引，您可以渲染占位行或骨架行，而不是显示空白。渲染函数会检查某个索引处的项是否已加载；如果没有，就显示骨架行。

骨架行可以保持布局并传达加载进度；在下一页数据即将到来时，这比显示空白区域更令人满意。

获取操作可能失败，因此请妥善处理错误。您可以在末尾渲染一个特殊的错误行，并添加一个重试按钮，让它重新调用失败范围的加载函数。

这样即使出现短暂故障，列表仍然可用，并且用户可以通过明确的方式恢复，而无需重新加载整个页面。

有两种常见的分页方式可以为无限列表提供数据。偏移分页按页码或跳过数量发起请求，而游标分页则请求位于不透明游标之后的项；该游标指向最近看到的项。

对于实时变化的数据，游标分页通常更可靠，因为当插入新项时，它可以避免偏移量可能导致的项移动和重复。

React Query 的 useInfiniteQuery 与虚拟化十分契合。它负责管理已获取的页面、下一个游标以及加载和错误状态，而 react-window 则高效地渲染展平后的页面。

您可以将各个页面展平为列表使用的单个数组，并在 onItemsRendered 达到阈值时调用 fetchNextPage，从而开箱即用地获得缓存和重试功能。

请确定在虚拟化的无限列表中何时获取更多数据。

无限滚动会在用户接近末尾时加载页面。onItemsRendered 会报告索引，将 overscanStopIndex 与 itemCount 进行比较，就能判断何时获取数据，同时还要防止重复请求。

请使用占位行和错误行，使用 react-window-infinite-loader 管理已加载范围，并对实时数据采用游标分页。React Query 的 useInfiniteQuery 会与 react-window 的渲染配合，管理页面、游标和各种状态。