reactjs - React-virtualized InfiniteLoader/List - 使用 AJAX 的工作示例

Question

我正在做一个 React/Redux 项目，需要实现一个虚拟化/无限加载列表。 react-virtualized 似乎旨在完成这项工作，但即使在阅读了所有可用文档并阅读了许多 StackOverflow 帖子之后，我仍无法使其工作或找到明确的解释组件实际工作原理。

我看过的主要示例是:

https://github.com/bvaughn/react-virtualized/blob/master/docs/creatingAnInfiniteLoadingList.md

https://github.com/bvaughn/react-virtualized/blob/master/docs/InfiniteLoader.md#examples

我遇到的主要问题是:

1. 目前还不清楚在初始加载/渲染情况下如何触发加载程序来调用 loadMoreRows()。典型的场景是，我们设计组件，通过在最初渲染时调用 loadMoreRows() 来使用数据初始化自身。实现这一点所需的配置值并不明显。

2. 尚不清楚 rowCount 属性是否旨在表示已加载行的当前状态(数据 block /页中的行数) ，或整组行数据的总数。而且，无论哪种情况，在进行初始 AJAX 加载调用之前都无法知道这些，那么设置 rowCount 初始值的目的是什么？

我尝试将各种示例中的代码放入我的项目中，但我从未看到进行 loadMoreRows 调用。我认为需要的是一个充实的示例，它演示了一个非常典型的用例:a)最初渲染一个空列表，然后触发初始数据加载调用； b) 更新 rowCount 属性，以及何时/何地执行此操作； c) 管理当前加载的代表当前数据 block /页面的数据集。

任何指示将不胜感激。

Answer 1

loadMoreRows 作为 prop 传递给 InfiniteLoader (您可以在示例中看到)。它并不意味着手动调用，它由 InfiniteLoader 和 List 内部使用，并在向下滚动时自动调用。

rowCount 可以同时具有这两种行为。您的 API 可以在不获取全部项目的情况下判断有多少项目，或者不能。 rowCount 只是告诉 List 有多少行。

举例来说，假设我们有 100 个商店，我们的第一次提取给了我们前 10 个。同样的响应应该说明是否还有更多商店需要提取。另一次获取可以告诉我们总共有 100 家商店。有了这个，我们可以使用 100 的总数作为 rowCount (通过查询商店总数，而不获取全部)OR 我们可以使用 10 + 1 作为 rowCount，第一次获取告诉我们还有更多商店需要加载。

这意味着什么？

如果我们加载了前 10 个商店，并使用 rowCount = 100，InfiniteLoader 将显示 100 行，但只有前 10 个商店才会有任何内容，其余部分显示“正在加载”行占位符组件。当您向下滚动时会出现“尚未加载”的行，InfiniteLoader 将调用 loadMoreRows 函数来加载更多行。

另一方面，如果我们使用 rowCount = 10 + 1，InfiniteLoader 将仅显示 11 行，其中只有最后一行是“正在加载”行占位符组件。当调用 loadMoreRows 时，rowCount 将是 items.length + 1 === 20 + 1。

总结

loadMoreRows 并不意味着手动调用。当视口(viewport)中显示未加载的行时，InfiniteLoader 会自动调用它。因此，最初 rowCount 可能只是 1，不会加载任何行，并且会调用 loadMoreRows。

rowCount 可以是 currentItems.length + (moreToBeLoaded ? 1 : 0) 或 totalItems。区别在于向用户显示的内容，“哎呀，已加载内容结束，请等待更多”或“看，这些是所有项目，但还没有”尚未加载，请等待加载”