如何用react-window实现可调整大小的流式左浮按钮高性能列表？

我想在可调整大小的滚动窗口里，用react-window实现一个流式排列的Bootstrap按钮列表（按钮带float: left样式），按钮从对象数组生成，期望的排列效果是：

|[--1--][-2-][----3----][--4--].......|
|[---5---][-6-][-----7-----][-8-].....|
|[------9------][----10----]..........|

但当数据量达到数千条（测试用了6000条）时，渲染耗时约900ms，应用帧率降到2fps。

我清楚react-window需要已知列表高度，但目前没办法不渲染就获取这个高度，这是核心问题。当前我用react-window实现的列表是垂直排列的：

|[--1--]..................|
|[-2-]....................|
|[----3----]..............|
|[--4--]..................|
|[---5---]................|
|[-6-]---]................| // 文本换行导致按钮高度变化，会被下一行覆盖
|[-----7-----]............|
|[-8-]....................|
|[------9------]..........|

这个实现性能达标，但不符合设计要求，而且容器宽度还支持调整。想问问有哪些可行方案，或者类似的列表示例可以参考？

• 预计算布局后结合react-window
  先估算每个按钮的宽度：可以根据按钮文本长度，加上Bootstrap按钮的padding、border等固定样式值计算；也可以渲染少量样本按钮，用getBoundingClientRect获取真实宽度后取平均值。接着结合当前容器宽度，模拟流式换行逻辑，把按钮按行分组，每一行的高度取该行内最高按钮的高度。这样就能得到整个列表的总高度，之后用react-window的VariableSizeList按行渲染，每行内部渲染对应分组的按钮。容器宽度变化时，重新执行布局计算，更新列表高度和行数据。

• 换用支持流式布局的虚拟滚动库
  放弃react-window，改用专门支持流式/网格虚拟滚动的库，这类库会自动处理动态高度和排列逻辑，无需手动计算总高度。比如用react-virtualized的Masonry组件，或者react-virtuoso的流式布局模式，它们能在只渲染可见区域元素的前提下，准确计算整体布局，同时保持高性能。

• 动态估算高度+滚动修正
  先给所有按钮设置一个估算的平均高度，用react-window的VariableSizeList初始化列表。当按钮实际渲染后，获取真实高度并更新对应行的高度记录，同时调整列表总高度。这种方式初始化性能好，滚动过程中逐步修正布局，虽然会有轻微的滚动跳动，但可以通过添加过渡动画或限制修正频率来缓解。容器宽度变化时，重置估算高度并重新计算布局。

• 临时优化垂直排列的视觉问题
  如果暂时不想调整核心逻辑，可以给每个按钮容器设置固定高度（取所有按钮中的最大高度值），同时给按钮添加white-space: nowrap或text-overflow: ellipsis处理过长文本，避免文本换行导致的高度变化和元素覆盖问题。虽然还是垂直排列，但能先解决当前的布局bug，保证视觉整齐。

内容的提问来源于stack exchange，提问作者KlutzyBubbles