小编Ale*_*nko的帖子

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

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>

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

我正在努力解决反应路由器和中继集成问题。

到目前为止，我坚持这个例子

它使用useLazyLoadQuery钩子，虽然一切似乎都工作得很好，但我还看到了另一种方法：usePreloadedQuery。

文档说useLazyLoadQuery钩子

如果不小心使用，可能会触发多个嵌套或瀑布式往返，并等到渲染开始数据获取（通常可以比渲染早得多开始），从而降低性能。相反，更喜欢 usePreloadedQuery。

然而，目前尚不清楚如何将其与react-router集成，显然，我不想重新发明我自己的路由器......

我注意到的另一件事是usePreloadedQuery应该与 ; 结合使用 useQueryLoader。同时在文档中，他们只需调用即可直接加载它loadQuery()；

所以我不确定哪种方式是首选。

我最终得到了这样的包装：

const WrappedHomePage = () => {
  const [queryRef, loadQuery] = useQueryLoader(HomePageQuery);

  // does calling it like this make any sense at all?
  useMemo(() => {
    loadQuery();
  }, [loadQuery]);

  return <HomePage queryRef={queryRef} />;
};

const HomePage = ({ queryRef }) => {
  const query = usePreloadedQuery(
    graphql`
      query HomePageQuery {
        ...HomePageContainer_repository
      }
    `,
    queryRef
  );

  return …