VariableSizeList：动态行高

有时各行并不统一：聊天列表中既有简短消息，也有较长消息；信息流中的卡片也可能包含不同数量的内容。FixedSizeList 无法处理这种情况，因为它假设所有项目都使用同一个固定的 itemSize。

对于这些情况，react-window 提供了一种列表类型，允许每个项目声明自己的尺寸。

VariableSizeList 的工作方式与 FixedSizeList 类似，但它接受每个项目各自的尺寸。您只需改为导入它，并提供一个返回指定索引对应尺寸的函数。

其他部分，包括子元素渲染函数和关键的样式属性，都保持不变，因此迁移工作很少。

使用 VariableSizeList 时，itemSize 是一个接收索引并返回该行像素高度的函数。react-window 会调用它来计算偏移量并确定可见窗口。

这样您就可以编码已知的高度，例如为包含图片的项目设置更高的行，为纯文本项目设置更矮的行。

如果您提前知道每行的高度，可以直接从 itemSize 函数返回该高度。如果高度取决于渲染后的内容，则必须在行绘制完成后进行测量。

预先计算的高度最简单、最快；测量得到的高度更加灵活，但需要额外处理，才能将尺寸反馈给列表。

VariableSizeList 会缓存项目偏移量以提升性能。当测量得到的高度发生变化时，您必须通过列表的引用调用 resetAfterIndex 方法，使其从该索引开始重新计算后续位置。

忘记执行这一步会留下过时的偏移量并导致各行错位，因此 resetAfterIndex 是实现动态测量的关键。

这里存在一个先有鸡还是先有蛋的问题：您需要高度才能渲染行，但只有在行渲染完成后才能知道真实高度。列表必须先放置行，之后才能测量它。

解决方法是先使用估算值进行渲染，知道真实高度后再进行修正。

标准模式是先使用估算高度渲染各行，在绘制完成后通过引用或 ResizeObserver 测量实际高度，保存测量值，然后调用 resetAfterIndex 更新位置。

这一循环会很快收敛，因此列表在第一次测量完成后就能稳定到正确的偏移量。

itemSize 函数在多次渲染之间应保持稳定，通常可以使用 useCallback 包装，这样列表就不会不断使缓存的偏移量失效。

在行内直接定义的不稳定函数可能会强制进行不必要的重新计算，损害虚拟化本应提供的性能。

VariableSizeList 比 FixedSizeList 执行更多工作，因为它无法假定偏移量恒定，还必须跟踪每个项的大小。测量高度时，额外的测量也会增加开销。

对于行高确实不同的列表，这项开销是值得的；对于高度统一的行，FixedSizeList 仍然是更快、更简单的选择。

如果精确的动态测量成本过高，有时可以采用近似方法。将行按高度分成几个固定类别，或使用合理的平均值，可以让您继续使用 FixedSizeList。

这样会用布局的简洁性和速度换取像素级精确度；当少量偏移误差可以接受时，这是一种合理的折中方案。

回想一下 VariableSizeList 如何获取每行的高度。

VariableSizeList 通过将 itemSize 设置为接收索引的函数来处理高度不同的行。高度可以预先计算，也可以进行测量；测量得到的高度需要经过“估算—渲染—测量—更新”循环，并调用 resetAfterIndex。

请使用 useCallback 保持 itemSize 函数稳定。它的开销高于 FixedSizeList，因此对于高度统一的行，或近似已经足够的情况，请优先选择固定大小的变体。