React优化大量图片（400+）预览性能问题求助

针对你使用react-dropzone处理400+张5-6MB JPG图片时，预览加载慢、滚动卡顿的问题，以下是几个针对性的优化方案：

1. 生成压缩缩略图作为预览 #

直接使用URL.createObjectURL会加载原图，对于预览场景完全没必要。通过Canvas将图片压缩为小尺寸缩略图，可大幅降低预览资源体积：

// 图片压缩工具函数
const compressImage = async (file: File, maxWidth = 300, maxHeight = 300): Promise<string> => {
  return new Promise((resolve) => {
    const img = new Image();
    img.src = URL.createObjectURL(file);
    img.onload = () => {
      const canvas = document.createElement('canvas');
      let width = img.width;
      let height = img.height;

      // 计算缩放比例，保持宽高比
      if (width > height && width > maxWidth) {
        height = (height * maxWidth) / width;
        width = maxWidth;
      } else if (height > maxWidth) {
        width = (width * maxHeight) / height;
        height = maxHeight;
      }

      canvas.width = width;
      canvas.height = height;
      const ctx = canvas.getContext('2d');
      ctx?.drawImage(img, 0, 0, width, height);
      // 转为base64，质量可调整（0-1）
      const compressedDataUrl = canvas.toDataURL('image/jpeg', 0.7);
      URL.revokeObjectURL(img.src); // 释放原图URL资源
      resolve(compressedDataUrl);
    };
  });
};

修改onDrop逻辑，异步生成压缩预览：

const onDrop = useCallback(
  async (acceptedFiles: File[]) => {
    if (acceptedFiles?.length) {
      // 过滤JPG文件
      const jpgFiles = acceptedFiles.filter(file => file.type === 'image/jpeg');
      // 批量异步生成压缩预览
      const processedFiles = await Promise.all(
        jpgFiles.map(async (file) => {
          const preview = await compressImage(file);
          return { ...file, preview };
        })
      );
      setFiles(prev => [...prev, ...processedFiles]);
    }
  },
  [disabled] // 清理不必要的依赖
);

2. 用虚拟列表优化滚动性能 #

400+张图片直接渲染会生成大量DOM节点，滚动时必然卡顿。使用react-window实现虚拟列表，只渲染可视区域内的图片：

首先安装依赖：

npm install react-window

然后修改渲染部分：

import { FixedSizeGrid as Grid } from 'react-window';

// 封装预览网格组件
const ImagePreviewGrid = ({ files, onRemove }: { files: File[], onRemove: (name: string) => void }) => {
  const renderItem = ({ index, style }: { index: number, style: React.CSSProperties }) => {
    const file = files[index];
    return (
      <div style={style} className='relative h-32 w-32 cursor-zoom-in select-none items-center justify-center'>
        <div
          className='absolute inset-0 -left-2 -top-2 z-20 h-8 w-8 cursor-pointer rounded-full border-2 border-foreground bg-content1 opacity-75 transition-all duration-300 hover:scale-125 hover:opacity-100'
          onClick={() => onRemove(file.name)}
        >
          <TrashIcon className='mx-auto pt-1 text-foreground' />
        </div>
        <img
          src={file.preview}
          className='max-w-36 max-h-36 rounded-lg bg-content2 p-1'
          style={{
            objectFit: 'cover',
            objectPosition: 'center',
            aspectRatio: '1/1',
          }}
          alt={file.name}
          loading="lazy" // 懒加载非可视区域图片
        />
      </div>
    );
  };

  const columnCount = Math.floor(window.innerWidth / 128); // 计算每行显示数量
  return (
    <Grid
      columnCount={columnCount}
      columnWidth={128}
      rowCount={Math.ceil(files.length / columnCount)}
      rowHeight={128}
      width='100%'
      height={600} // 固定列表高度，可按需调整
    >
      {renderItem}
    </Grid>
  );
};

// 在组件return中替换原map渲染：
{files.length > 0 && <ImagePreviewGrid files={files} onRemove={onRemove} />}

3. 分批次处理批量上传 #

如果异步压缩仍导致批量上传时UI阻塞，可以分批次处理文件，给浏览器留出UI更新时间：

const processFilesInBatches = async (files: File[], batchSize = 20) => {
  const processed: typeof files = [];
  for (let i = 0; i < files.length; i += batchSize) {
    const batch = files.slice(i, i + batchSize);
    const batchProcessed = await Promise.all(
      batch.map(async file => {
        const preview = await compressImage(file);
        return { ...file, preview };
      })
    );
    processed.push(...batchProcessed);
    // 让浏览器处理UI更新
    await new Promise(resolve => setTimeout(resolve, 0));
  }
  return processed;
};

// 修改onDrop：
const onDrop = useCallback(
  async (acceptedFiles: File[]) => {
    if (acceptedFiles?.length) {
      const jpgFiles = acceptedFiles.filter(file => file.type === 'image/jpeg');
      const processedFiles = await processFilesInBatches(jpgFiles);
      setFiles(prev => [...prev, ...processedFiles]);
    }
  },
  [disabled]
);

4. 及时清理预览资源，避免内存泄漏 #

无论是URL.createObjectURL还是base64资源，都需要在组件卸载或图片被删除时清理：

useEffect(() => {
  return () => {
    // 组件卸载时清理所有预览资源
    files.forEach(file => {
      if (file.preview.startsWith('blob:')) {
        URL.revokeObjectURL(file.preview);
      }
    });
  };
}, [files]);

// 修改onRemove函数，删除时同步清理资源：
const onRemove = useCallback((fileName: string) => {
  setFiles(prev => {
    const removedFile = prev.find(file => file.name === fileName);
    // 清理被删除文件的预览资源
    if (removedFile?.preview.startsWith('blob:')) {
      URL.revokeObjectURL(removedFile.preview);
    }
    return prev.filter(file => file.name !== fileName);
  });
}, []);

额外小优化 #

• 避免使用file.name作为key，改用唯一标识（如file.lastModified + file.name）防止重名文件导致的渲染异常：

key={`${file.lastModified}-${file.name}`}

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