React-Virtual v2：virtualItems仅11个元素，totalSize超20万的问题排查

原因 #

1. react-virtual v2的核心设计逻辑：useVirtual 钩子的作用就是实现列表虚拟化——仅渲染当前视口内加上overscan配置的元素，以此优化大量数据的渲染性能。你看到的11个元素，是视口高度+overscan范围能容纳的item数量，这是正常的虚拟化行为，并非bug。
2. overscan参数未生效的可能诱因：
   • 容器未设置固定高度：useVirtual 依赖容器高度计算可见元素数量，如果容器是自适应高度（如height: auto），会导致计算出的可见范围极小，即便调大overscan也无法覆盖更多元素。
   • overscan数值设置不足：若单个item高度很小，需要设置更大的overscan值才能扩大预渲染范围，但这也只是增加预渲染数量，依然不会渲染全部26万+元素。

解决办法 #

场景1：必须渲染所有元素（绕过虚拟化） #

如果业务场景要求强制渲染全部元素（不推荐，会引发严重性能问题），可以直接舍弃react-virtual的虚拟化逻辑，改用普通列表渲染：

const CustomListbox = ({ children, ...props }) => {
  return (
    <ul {...props}>
      {children}
    </ul>
  );
};

将该组件传给Autocomplete的ListboxComponent属性即可。

场景2：正确使用虚拟化（保留性能优化） #

如果只是误解了虚拟化的作用，想要正常实现虚拟化滚动，需修正以下配置：

1. 给Listbox容器设置固定高度：

const CustomListbox = ({ children, ...props }) => {
  const listRef = useRef(null);
  // 假设单个item高度为Material UI ListItem默认的36px
  const rowHeight = 36;
  const virtualizer = useVirtual({
    size: React.Children.count(children),
    parentRef: listRef,
    estimateSize: () => rowHeight,
    overscan: 20, // 预渲染前后20个元素
  });

  return (
    <ul 
      {...props}
      ref={listRef}
      style={{ 
        ...props.style,
        height: '400px', // 设置固定高度，如400px
        overflow: 'auto'
      }}
    >
      <div style={{ height: `${virtualizer.totalSize}px`, position: 'relative' }}>
        {virtualizer.virtualItems.map((virtualItem) => {
          const child = React.Children.toArray(children)[virtualItem.index];
          return React.cloneElement(child, {
            style: {
              position: 'absolute',
              top: 0,
              left: 0,
              width: '100%',
              transform: `translateY(${virtualItem.start}px)`,
            },
            key: virtualItem.index,
          });
        })}
      </div>
    </ul>
  );
};

2. 修正Autocomplete弹窗高度限制：Material UI的Autocomplete弹窗默认高度有限，需通过PopperProps调整最大高度：

<Autocomplete
  // 其他属性
  PopperProps={{
    popperOptions: {
      modifiers: [
        {
          name: 'maxHeight',
          enabled: true,
          options: {
            maxHeight: 500, // 设置弹窗最大高度
          },
        },
      ],
    },
  }}
  ListboxComponent={CustomListbox}
/>

3. 确保estimateSize准确性：若item高度不固定，需编写更精准的estimateSize函数，或通过动态计算获取真实高度（react-virtual v2需自行处理动态高度逻辑）。

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