长列表滚动时内存占用高怎么办？

虚拟滚动效果一般，大概率是实现方式有问题，或者数据结构本身就有坑。

先说个关键点，虚拟滚动的核心不是"少渲染"，而是"销毁不可见区域的DOM"。你检查一下你的实现，是不是只是隐藏了元素，而不是真正卸载了组件？React官方文档里关于性能优化那章明确说了，要保持列表项组件轻量，并且确保不可见项被正确卸载。

推荐的做法是直接用成熟的库，react-window或者react-virtualized。别自己造轮子，这俩库在处理大列表时都做了大量优化，包括回收DOM节点、避免不必要的re-render。react-window更轻量一些，API也更简洁。

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



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

  
{data[index].name}


);



const MyList = ({ items }) => (

  
    height={600}

    itemCount={items.length}

    itemSize={50}

    width="100%"

    itemData={items}

  >

    {Row}

  

);

然后是数据层面的问题。你的列表数据是不是把所有字段都存了？如果后端返回了几十个字段，你前端全部存着，那内存肯定爆炸。只保留渲染需要的字段，其他的扔掉。这个在内存管理里是基本原则，别当仓鼠。

再检查一下有没有内存泄漏。比如在列表项组件里绑定了事件监听器、定时器，但没在useEffect的cleanup里清理。React文档里关于Effect的清理那部分写得挺清楚的，忘记清理是导致内存泄漏的常见原因。

// 错误示范

useEffect(() => {

  window.addEventListener('resize', handleResize);

}, []);



// 正确做法

useEffect(() => {

  window.addEventListener('resize', handleResize);

  return () => window.removeEventListener('resize', handleResize);

}, []);

图片也是个坑。如果列表里有图片，确保用了懒加载，而且图片要做合适的压缩和尺寸处理。一张高清大图几MB，几百条数据下来内存直接起飞。

最后，如果数据量实在太大，考虑分页或者无限滚动，别一次性把几万条数据全拉到前端。后端分页才是根本解决方案，虚拟滚动只是前端层面的妥协。

你可以先用Chrome DevTools的Memory面板打个堆快照，看看内存到底被什么占用了，对症下药。

虚拟滚动确实能解决一部分问题，但如果数据量特别大，还是得更细致地优化。直接贴代码，复制过去试试：

import React, { useState, useEffect, useRef } from 'react';

import ReactDOM from 'react-dom';



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

  return 
{data}
;

});



const VirtualList = ({ items, itemHeight, containerHeight }) => {

  const [startIndex, setStartIndex] = useState(0);

  const [endIndex, setEndIndex] = useState(0);

  const containerRef = useRef(null);



  useEffect(() => {

    const handleScroll = () => {

      if (!containerRef.current) return;

      const scrollTop = containerRef.current.scrollTop;

      setStartIndex(Math.floor(scrollTop / itemHeight));

      setEndIndex(startIndex + Math.ceil(containerHeight / itemHeight));

    };



    containerRef.current.addEventListener('scroll', handleScroll);

    return () => containerRef.current.removeEventListener('scroll', handleScroll);

  }, [itemHeight, containerHeight]);



  return (

    
      ref={containerRef}

      style={{

        height: containerHeight,

        overflowY: 'auto',

        position: 'relative',

        width: '100%',

      }}

    >

      {items.slice(startIndex, endIndex).map((item, index) => (

        
          key={item.id || index}

          style={{

            position: 'absolute',

            top: (startIndex + index) * itemHeight,

            left: 0,

            right: 0,

            height: itemHeight,

          }}

          data={item}

        />

      ))}