React中如何避免图片标签重渲染时重复请求图片

问题分析 #

你当前用React.memo的方案无法解决禁用缓存时的重复请求问题，原因在于：

• React.memo仅能阻止组件因props无变化而触发的不必要重渲染，但如果img标签被卸载后重新挂载（比如父组件生成的imgTags数组key不稳定），浏览器仍会重新发起请求。
• 即使组件不重渲染，当浏览器禁用缓存时，每次img标签渲染都会向服务器请求资源，因为没有本地缓存的图片数据。

可行方案：预加载图片并缓存为本地Blob URL #

通过JavaScript预加载图片，将图片数据转为Blob对象并生成本地URL存储在内存中，这样img标签使用本地URL时，无论组件如何重渲染，都不会再向服务器发起请求。

步骤1：创建图片预加载的自定义Hook

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

function usePreloadedImages(imageUrls: string[]) {
  // 用useRef缓存已加载的图片Blob URL，避免组件重渲染丢失数据
  const loadedImages = useRef<Record<string, string>>({});
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    // 单个图片加载逻辑
    const loadImage = async (url: string) => {
      // 已加载过的图片直接跳过
      if (loadedImages.current[url]) return;
      try {
        // 发起请求获取图片Blob
        const response = await fetch(url);
        const blob = await response.blob();
        // 生成本地可访问的Blob URL
        const objectUrl = URL.createObjectURL(blob);
        loadedImages.current[url] = objectUrl;
      } catch (err) {
        console.error(`加载图片失败 ${url}:`, err);
        // 加载失败时回退到原URL
        loadedImages.current[url] = url;
      }
    };

    // 批量加载所有图片
    const loadAllImages = async () => {
      await Promise.all(imageUrls.map(loadImage));
      setIsLoading(false);
    };

    loadAllImages();

    // 组件卸载时释放Blob URL，避免内存泄漏
    return () => {
      Object.values(loadedImages.current).forEach(url => {
        if (url.startsWith('blob:')) {
          URL.revokeObjectURL(url);
        }
      });
    };
  }, [imageUrls]);

  return { loadedImages: loadedImages.current, isLoading };
}

步骤2：在组件中使用预加载的图片

function ImageGallery() {
  const imgCount = 10; // 替换为你的实际图片数量
  // 生成所有图片的URL数组
  const imageUrls = Array.from({ length: imgCount }, (_, i) => 
    `${process.env.PUBLIC_URL}/images/img${i}.avif`
  );

  // 调用预加载Hook
  const { loadedImages, isLoading } = usePreloadedImages(imageUrls);

  // 加载中状态提示
  if (isLoading) {
    return <div>图片加载中...</div>;
  }

  return (
    <div className="image-gallery">
      {imageUrls.map(url => (
        <img 
          key={url} // 用稳定的URL作为key，避免组件不必要的卸载/挂载
          src={loadedImages[url]} 
          alt={`图片 ${imageUrls.indexOf(url)}`}
          // 添加你的样式
        />
      ))}
    </div>
  );
}

方案优势 #

• 彻底避免重复请求：图片数据存储在内存中，img标签使用本地Blob URL，即使浏览器禁用缓存也不会再向服务器发起请求。
• 内存安全：组件卸载时会自动释放Blob URL，不会造成内存泄漏。
• 稳定可靠：加载失败时会回退到原URL，保证图片正常显示。

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