React列表滚动卡顿，如何优化移动端性能？

萌新.江洁提问于 2026-02-09 23:03:26 阅读 24

优化

大家好，我在开发一个移动端React列表页时遇到性能问题。当列表项超过50条后滚动就明显卡顿，尝试用React.memo和useCallback优化过，但效果不明显…

代码结构大概是这样（简化版）：


function ListItem({ item }) {
  return (
    <div className="item">
      <img src={item.image} alt="" />
      <p>{item.title}</p>
    </div>
  );
}

const List = () => {
  const [items, setItems] = useState(generateItems(100));
  
  return (
    <div className="list-container">
      {items.map(item => (
        <ListItem key={item.id} item={item} />
      ))}
    </div>
  );
};

我检查过网络请求没问题，但真机测试时滑动还是有延迟。用Lighthouse测得分只有78分，主要扣分在”消除重绘布局”和”减少渲染工作”。有没有什么移动端特有的优化方法？

我来解答赞 5 收藏

反馈

1 条解答

司空广红 Lv1

用虚拟列表，只渲染可视区域。装个 react-window，照着文档改一下你的 List 组件就行。

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



const Row = ({ index, style }) => (

  

);



const VirtualizedList = () => (

  

    {Row}

  

);

图片加上 loading="lazy"，这波操作下来 Lighthouse 能冲90+，搞定。

2026-02-09 23:08