React Virtual 虚拟滚动中动态调整元素尺寸的最佳实践

在使用 React Virtual 进行虚拟滚动时，动态调整容器尺寸或元素尺寸是一个常见的需求。本文将深入探讨如何正确实现这一功能，避免常见的视觉闪烁问题。

问题背景

在虚拟滚动场景中，当容器尺寸发生变化时，需要同步调整所有已渲染元素的尺寸。常见的问题包括：

1. 只有当前视窗内的元素会被重新计算尺寸
2. 滚动回之前查看过的区域时，元素会突然改变尺寸导致闪烁
3. 动态列数调整时，元素尺寸无法自动适应新布局

核心解决方案

1. 正确使用 getItemKey

getItemKey 函数需要根据可能变化的参数进行记忆化处理。当元素高度可能变化时，应将高度依赖包含在 key 中：

const getItemKey = useCallback((index: number) => index, [height]);

这样可以确保当高度变化时，虚拟元素会被重新创建，而不是复用旧的尺寸。

2. 保持虚拟元素尺寸与实际元素一致

虚拟元素的尺寸属性必须与实际渲染元素的尺寸保持同步。常见错误是硬编码了固定高度：

// 错误做法 - 硬编码高度
height: 200,

// 正确做法 - 使用动态尺寸
height: img.size,

3. 处理动态列数调整

当列数变化导致元素宽度变化时，需要注意：

1. 移除可能干扰尺寸计算的元素 ref
2. 确保 CSS 布局能够响应容器尺寸变化
3. 考虑使用 CSS 的 aspect-ratio 保持宽高比

实现示例

以下是一个完整的实现示例：

const [height, setHeight] = useState(200);

const getItemKey = useCallback((index: number) => index, [height]);

const virtualizer = useVirtualizer({
  count: images.length,
  getScrollElement: () => parentRef.current,
  estimateSize: () => height,
  getItemKey,
});

return (
  <div ref={parentRef}>
    <div style={{ height: virtualizer.getTotalSize() }}>
      {virtualizer.getVirtualItems().map((virtualItem) => (
        <div
          key={virtualItem.key}
          style={{
            position: "absolute",
            top: 0,
            left: 0,
            width: "100%",
            height: images[virtualItem.index].size, // 使用实际尺寸
            transform: `translateY(${virtualItem.start}px)`,
          }}
        >
          <img
            src={images[virtualItem.index].src}
            style={{ width: "100%", height: "100%" }}
          />
        </div>
      ))}
    </div>
  </div>
);

性能优化建议

1. 对于复杂布局，考虑使用 ResizeObserver 监听元素实际尺寸
2. 对于高频尺寸变化，可以添加防抖处理
3. 使用 CSS will-change 属性提示浏览器优化重绘

通过以上方法，可以确保虚拟滚动中的元素在各种尺寸变化场景下都能正确渲染，避免视觉闪烁问题。