React网格布局无限滚动内存占用过高问题求助

1. 彻底卸载不可见元素并释放媒体资源 #

• 不要用display: none或visibility: hidden隐藏不可见元素，直接返回null卸载DOM节点，避免残留节点和事件监听占用内存。
• 手动清理媒体资源：元素移出可视区域时，清空图片src，视频先调用pause()再置空srcObject，防止解码器持续占用内存。示例代码：

const PostItem = ({ post, isVisible }) => {
  const imgRef = useRef(null);
  const videoRef = useRef(null);

  useEffect(() => {
    if (!isVisible) {
      imgRef.current && (imgRef.current.src = '');
      if (videoRef.current) {
        videoRef.current.pause();
        videoRef.current.srcObject = null;
      }
    } else {
      imgRef.current && (imgRef.current.src = post.imageUrl);
      videoRef.current && (videoRef.current.src = post.videoUrl);
    }
    return () => {
      videoRef.current && (videoRef.current.srcObject = null);
    };
  }, [isVisible, post.imageUrl, post.videoUrl]);

  if (!isVisible) return null;

  return (
    <div className="post-item">
      {post.imageUrl && <img ref={imgRef} alt={post.title} />}
      {post.videoUrl && <video ref={videoRef} controls />}
      {/* 其他帖子内容 */}
    </div>
  );
};

2. 实现网格适配的自定义虚拟滚动 #

不用react-window，自己写简化版网格虚拟滚动：

• 计算容器高度、网格项尺寸，算出可视区域能容纳的行列数，只渲染当前可视范围+上下1-2屏缓冲的内容。
• 用空占位元素填充滚动过的区域，保持滚动条位置正确。示例思路：

const GridVirtualScroll = ({ posts, columnCount, itemHeight }) => {
  const containerRef = useRef(null);
  const [visiblePosts, setVisiblePosts] = useState([]);
  const [topPlaceholderHeight, setTopPlaceholderHeight] = useState(0);

  useEffect(() => {
    const container = containerRef.current;
    const updateVisibleItems = () => {
      const scrollTop = container.scrollTop;
      const startRow = Math.floor(scrollTop / itemHeight);
      // 额外多渲染2行避免滚动空白
      const endRow = startRow + Math.ceil(container.clientHeight / itemHeight) + 2;
      const startIndex = startRow * columnCount;
      const endIndex = endRow * columnCount;
      
      setVisiblePosts(posts.slice(Math.max(0, startIndex), Math.min(posts.length, endIndex)));
      setTopPlaceholderHeight(startRow * itemHeight);
    };

    container.addEventListener('scroll', updateVisibleItems);
    updateVisibleItems();
    return () => container.removeEventListener('scroll', updateVisibleItems);
  }, [posts, columnCount, itemHeight]);

  return (
    <div ref={containerRef} style={{ overflowY: 'auto', height: '100vh' }}>
      <div style={{ height: topPlaceholderHeight, visibility: 'hidden' }} />
      <div className="grid" style={{ display: 'grid', gridTemplateColumns: `repeat(${columnCount}, 1fr)` }}>
        {visiblePosts.map(post => <PostItem key={post.id} post={post} />)}
      </div>
      <div style={{ height: ((posts.length / columnCount) - topPlaceholderHeight / itemHeight) * itemHeight, visibility: 'hidden' }} />
    </div>
  );
};

3. 优化媒体加载策略 #

• 渐进式加载：先加载低清缩略图，元素进入可视区域后再替换成高清图/视频，降低初始内存压力。
• 控制并发加载：用请求队列限制同时加载的媒体数量，每次只加载可视区域内3-5个资源，避免瞬间内存暴涨。
• 配合浏览器原生懒加载：给图片/视频加loading="lazy"，但要和自己的可视区域判断逻辑配合，避免冲突。

4. 清理冗余监听与状态 #

• 检查帖子组件内的事件监听（比如视频的play/pause、自定义点击事件），必须在useEffect返回函数中清理。
• 避免在每个帖子组件中存冗余状态，比如已加载的媒体URL可以存在全局缓存或状态管理中，不要每个组件都保留一份。

5. 内存泄漏排查 #

• 用Chrome DevTools的Memory面板拍堆快照，对比加载前后的内存变化，重点看Detached DOM Tree，如果大量存在，说明有DOM节点被意外引用无法回收，检查ref、事件绑定是否有遗漏清理。

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