虚拟列表滚动时为什么会有闪烁或重绘延迟？

欧阳胜捷提问于 2026-02-06 20:27:27 阅读 32

交互

在React项目里用react-virtualized的FixedSizedList实现虚拟列表，当数据量超过2000条时滚动会出现卡顿，而且每次滚动到新区域时列表项会先闪一下旧内容再刷新成正确内容，尝试过调整scrollToAlignment和overscanCount参数都没用，控制台也没报错，这是哪里出问题了？

我的配置是这样写的：

const rowRenderer = ({index, key, style}) => (
  <div key={key} style={{...style, padding: 16}}>
    {data[index].content}
  </div>
);

<FixedSizedList
  height={900}
  width="100%"
  itemSize={56}
  itemCount={data.length}
  renderItem={rowRenderer}
/>

列表交互虚拟列表

我来解答赞 3 收藏

反馈

2 条解答

シ毓珂 Lv1

你这闪是因为没用 React.memo 包裹列表项组件，每次重渲染都会重新创建 DOM。我之前这样搞的，把 rowRenderer 里的 div 提取成独立组件然后套个 memo 就稳了。

const Row = React.memo(({ data, index, style }) => (

  {data[index].content}


));




  height={900}

  width="100%"

  itemSize={56}

  itemCount={data.length}

  itemData={data}

  children={Row}

/>

2026-02-11 22:05

极客艳玲 Lv1

react-virtualized 的 FixedSizedList 在处理大数据量时出现的闪烁或重绘延迟，通常是因为虚拟滚动机制在滚动时没有很好地复用或清理 DOM 元素，尤其是在滚动速度较快时。

你提到用的是 rowRenderer 函数来生成列表项，其中 data[index].content 是直接渲染的。这个 content 如果是字符串还好，但如果包含动态内容、组件或异步数据，就容易在滚动时造成视觉上的错位或闪烁。因为 react-virtualized 为了性能会复用 DOM 元素，如果旧的 DOM 没有及时清空或更新，就会出现你说的“闪一下旧内容”的现象。

一个比较直接的解决方法是在渲染前对 index 做边界检查，确保不会访问到无效的 data[index]，同时在 DOM 上加一个唯一 key 来避免复用问题：

const rowRenderer = ({ index, key, style }) => {
if (index >= data.length) return null;
const item = data[index];
return (

{item.content}

);
};

另外，你可能没有设置 key 的唯一性策略，react-virtualized 默认的 key 是 index，但如果 data 本身有唯一标识符（比如 id），建议你把 key 设置成 data[index].id，这样 React 会更准确地识别列表项，减少不必要的重渲染。

还有一个可能的原因是，列表项渲染的内容比较重，比如里面有图片、图标或者嵌套组件，这些资源加载耗时会导致视觉上“延迟刷新”。这个时候建议你在 rowRenderer 里加个 loading 状态，或者对复杂内容做防抖处理。

最后，如果数据真的超过 2000 条，FixedSizedList 本身性能就不一定最佳，你可以考虑使用 react-window 或者 react-virtual 的新版本，它们在内存管理和 DOM 复用上更轻量，更适合大数据场景。

总之，先要做校验，再看 key 和内容是否稳定，最后再考虑换库或做性能优化。

2026-02-06 20:30