使用反应表+反应虚拟化/反应窗口进行无限加载

Question

我对我的桌子有以下要求：

1. 表格应该有固定的标题
2. 它需要自动调整大小：为了使无限滚动正常工作，第一次提取应该获得足够的数据量以便滚动出现。
3. 表体应作为无限加载器工作：当滚动到列表末尾时表体应显示加载指示器并加载更多行

我的假设如下：

1. 由于用户将滚动浏览可能较大的数据集，我应该虚拟化列表（反应虚拟化似乎是我唯一的好选择）
2. 因为我们目前有react-table，我想保留它（它有声明表行、列、访问数据和过滤+排序的强大机制）
3. 当我们使用 Material ui 时，我需要使用 Material ui React 组件
4. 因为react-virtualized有自己的Table组件，我可以使用它，但是react-table有不同的渲染行和列的方式，因此我必须使用List组件。（react-table 分隔行和列，而react-virtualized 直接使用列作为 Table 组件的子组件）
5. 我看到react-virtualized可以与名为InfiniteLoader的HOC组件一起使用，所以我也应该使用它
6. 最后，我需要我的列不要仅仅因为它有更多文本（即具有动态高度）而被搞乱。所以我尝试使用 CellMeasurer 来实现这一点。

我能够实现的目标可以在这个沙箱中看到 https://codesandbox.io/s/react-table-infinite-mzkkp?file=/src/MuiTable.js （我无法在这里提供代码，因为它很大）

因此，一般来说，我可以使 Autosizer、CellMeasurer 和 List 组件从反应虚拟化中正常工作。我被困在无限滚动部分。我在官方文档上看到了这个例子，但似乎有点反模式（直接突变状态根本不是一件好事）

所以我试图达到类似的结果，但是如果你能看到，我的 loadMore 函数由于某种原因触发得太早了。它导致几乎每个滚动事件都发送请求。

任何帮助深表感谢。

我已经尝试过的：

1. 使用react-window而不是react-virtualized 它仅适用于简单的用例，并且对于动态大小的单元格会失败。
2. 使用react-inifnite-scrollcomponent（https://www.npmjs.com/package/react-infinite-scroll-component ））它适用于整个页面（无法制作“粘性”标题，无法将加载指示器作为表体，它对长列表没有任何优化）
3. 使用react-virtualized中的Table组件。我无法使其与react-table一起使用（因为react-virtualized中的Table组件似乎直接将Cells渲染为Table组件的子组件。我知道它有renderRow函数，但这意味着两个不同的地方，而react-table有

<TableRow
  {...row.getRowProps({
     style
  })}
  component="div"
  >
  {row.cells.map((cell) => {
     return (
       <TableCell {...cell.getCellProps()} component="div">
         {cell.render("Cell")}
       </TableCell>
      );
   })}
</TableRow>

此外，尚不清楚如何以这种方式呈现自定义过滤器。

Answer 1

我知道这不是您正在寻找的答案，但我建议使用IntersectionObserver而不是虚拟化库。反应虚拟化对于动态/响应大小的元素来说不是很好。IntersectionObserver是一个本机浏览器 API，可以检测元素何时进入视口，而无需为其提供元素大小。

您可以轻松地将它与像react-intersection-observer这样的react库一起使用，它有一个InView组件和一个useInView钩子，尽管这需要用InView. IntersectionObserver 的性能往往比基于滚动事件的解决方案（如 React-virtualized）更好，尽管如果您有 1000 个观察者，性能可能会下降。

您还可以使用intersection-observer-admin之类的东西，它将所有观察者集中到一个实例中，类似于反应 SyntheticEvent。您希望将其集成到类似React.useContext或 redux 之类的东西中。