React Virtualized-嵌套的WindowScroller /列表

Question

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

我还需要对行进行分组并将其嵌套到显示/隐藏样式的手风琴组件中。

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

我不确定如何处理该用例，或者不确定React-Virtualized是否可以处理此类事情。

我尝试过的

结合使用WindowScroller / AutoSizer / List组件，并将这组虚拟化组件放入每个手风琴中。这有效，但不能解决我的问题。问题，因为浏览器仍然无法处理（首次加载大约需要25秒，并且无法滚动）

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

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

Answer 1

您至少可以释放 UI 线程以使用 Web Worker 进行滚动（当然是重要的 UX 原则）。

这是一篇中等长度的讨论文章，其中包含一个示例、一个快速实现文档（以及很棒的匹配文章），以及我一直以来最喜欢的关于该主题的演讲。

这推迟了主“UI”线程的工作，但如果可以使用useMemo()钩子记住工作，您也可以首先阻止这种推迟。