虚拟滚动列表为何仍卡顿？

ლ可慧提问于 2026-01-25 15:47:33 阅读 40

优化

最近在做一个长列表展示页面，数据量大概有几千条。考虑到性能问题，我尝试使用了虚拟滚动技术来优化。但是即使使用了react-window库，当快速滚动时页面还是会有明显的卡顿现象。

我的代码如下：


import { FixedSizeList as List } from 'react-window';
function MyListComponent() {
  const rowRenderer = ({ index, style }) => (
    Item {index}
  );
  return (
    
      {rowRenderer}
    
  );
}

想知道这个问题可能是什么原因造成的？还有没有其他办法可以进一步优化呢？

我来解答赞 17 收藏

反馈

2 条解答

Mr.统乐 Lv1

你这卡顿问题大概率是渲染压力太大，改成这样试试。首先把 Item 组件拆出来，避免内联函数重复创建，然后给每个子项加个唯一的 key，让 React 的 diff 算法更高效。

import { FixedSizeList as List } from 'react-window';



function Item({ index, style }) {

  return Item {index};

}



function MyListComponent() {

  return (

    List

      height={500}

      itemCount={1000}

      itemSize={50}

      width={300}

    >

      {({ index, style }) => Item key={index} index={index} style={style} />}

    /List

  );

}

如果还卡，检查是不是样式计算太重了，比如别用复杂的 CSS 或者频繁触发重绘的属性，比如 box-shadow 或 border-radius。最后，数据量实在太大时可以考虑 Web Worker 做预处理，减轻主线程负担。

2026-02-16 13:18

欢欢~ Lv1

你这个代码问题出在 rowRenderer 这里，直接返回了一个字符串，而且没有包裹在有效的 React 元素中。正确来说，虚拟滚动列表的每一项应该是一个 DOM 元素（比如 <div>），这样才能正常渲染和优化。

另外，快速滚动时卡顿可能有以下原因：
1. 每一项的内容渲染太复杂。
2. 样式或者布局计算频繁触发重绘。
3. 数据量大但没有充分复用 DOM。

优化建议如下：
- 确保每一项的渲染逻辑尽量简单。
- 使用 React.memo 包裹子组件以避免不必要的重新渲染。
- 如果有图片或者复杂的样式，提前加载或者懒加载。

修正后的代码可以这样写：

import React from 'react';

import { FixedSizeList as List } from 'react-window';



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

  <div className="list-item" style={style}>

    Item {index}

  </div>

));



function MyListComponent() {

  return (

    <List

      height={400}

      itemCount={1000}

      itemSize={50}

      width={300}

    >

      {Row}

    </List>

  );

}

CSS的话，给 .list-item 设置固定的宽高，确保布局稳定，别让浏览器频繁计算。如果还是卡，看看是不是别的地方有性能瓶颈，比如全局的状态管理或者事件监听器太多。

2026-01-29 13:02