javascript - React Virtualized - 嵌套的 WindowScroller/List

Question

我正在尝试使用 react-virtualized 来呈现包含 1000 多行数据的表。这些行非常重，包含多个复杂的 React 组件。输入、组合框、日期选择器和弹出菜单都在一行中。我需要整个窗口来滚动这些行。

我还需要将行分组并将它们嵌套到显示/隐藏样式的 Accordion 组件中。

[+] Row Header 1
    row 1
    row 2
    ...
    row 1001
[+] Row Header 2
    row 1
    row 2
    ...
    row 1001

我不确定如何处理这个用例，或者 React-Virtualized 是否可以处理这种类型的事情。

我试过的:

结合使用 WindowScroller/AutoSizer/List 组件，并将这组 react-virtualized 组件放入每个 Accordion 中。这有效，但不能解决我的问题。问题，因为浏览器仍然无法处理(第一次加载大约 25 秒，滚动不可用)

我是否还需要使用 WindowScroller/AutoSizer/List 组件来处理第一级行标题？

任何想法或例子将不胜感激。

Answer 1

您至少可以释放 UI 线程以使用 Web Worker 进行滚动(当然这是一个重要的 UX 原则)。
这是 medium-length discussion article with an example , 一个 quick implementation doc (和 the great matching article )和 my all-time favorite talk on the subject .
这延迟了主“UI”线程的工作，但如果工作可以用 useMemo() 内存，你也可以首先防止这种延迟。钩。