React - 优化大量照片的预览

Question

我目前正在开发一个 React 项目，用户可以使用 React-dropzone 库上传大量照片（大约 400 张以上）。虽然文件上传功能按预期工作，但在生成和显示照片预览时我面临性能问题。

照片加载缓慢，滚动滞后非常严重，有 400 多张照片（平均每张照片 5-6MB）。照片为jpg格式。

在我的 onDrop 处理程序中，我有以下逻辑：

// ...imports
import {useDropzone} from "react-dropzone"

export const ImageDrop: React.FC<ImageDropProps> = ({}) => {
  const [files, setFiles] = useState<File[]>([])

  const onDrop = useCallback(
    (acceptedFiles: File[]) => {
      if (acceptedFiles?.length) {
        setFiles((prevFiles) => {
          const newFiles = [];
          for (const file of acceptedFiles) {
            if (file.type === 'image/jpeg') {
              Object.assign(file, { preview: URL.createObjectURL(file) });
              newFiles.push(file);
            }
          }
  
          return [...prevFiles, ...newFiles];
        });
      }
    },
    [disabled, maxPhotoSize, maxPhotos, setFiles, t],
  );
  
  const { getRootProps, getInputProps, isDragActive } = useDropzone({
    onDrop,
    disabled,
  });
  
  return (
    <>
      <form>
        <div {...getRootProps()}>
          {!disabled && <input {...getInputProps()} />}
        </div>
      </form>
      {files.map((file, index) => (
        <div
          className='relative h-32 w-32 cursor-zoom-in select-none items-center justify-center'
          key={file.name}
        >
          <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}
          />
        </div>
      ))}
    </>
  );
}

我已经尝试过这个解决方案，但是当我删除很多照片时，它们需要很长时间才能显示（之后没有延迟）。

目标是找到一种方法来优化照片预览生成过程，即使在处理大量照片时也能确保流畅的用户体验。我想避免由于照片预览生成而导致应用程序出现任何滞后或延迟。

我愿意接受建议。预先感谢您！

Answer 1

图像调整大小：考虑使用pica。
优化预览生成：通过代码，您可以对所有图像进行预览，然后才进行渲染。我假设您不会一次显示 400 多张照片，因此您可以添加 setFiles([...prevFiles, ...newFiles]) 10 或更多，渲染它们并继续调整其他照片的大小