React：如何避免状态变化时重复渲染？Firebase图片仅加载一次

1. 缓存图片URL，避免重复请求Firebase Storage #

在组件外部创建缓存容器，存储已获取过的图片下载URL，确保同一个图片名称仅发起一次请求：

// 全局缓存，存储图片名称到URL的映射
const imageCache = new Map();

const getImage = async (name) => {
  // 先检查缓存，存在则直接返回
  if (imageCache.has(name)) {
    return imageCache.get(name);
  }
  // 缓存不存在时，请求Firebase Storage
  const url = await getDownloadURL(ref(storage, name));
  // 将结果存入缓存
  imageCache.set(name, url);
  return url;
};

2. 用React.memo优化组件，减少不必要的重渲染 #

使用React.memo包裹PostImage组件，当组件的image和alt props未发生变化时，组件不会因父组件的状态变化而无意义重渲染：

const PostImage = React.memo(({ image, alt }) => {
  const [imageSrc, setImageSrc] = useState();

  useEffect(() => {
    (async () => {
      setImageSrc(await getImage(image));
    })();
  }, [image]); // 仅当image变化时，重新获取图片

  return imageSrc ? (
    <img src={imageSrc} className="sm:w-1/2 w-full rounded-lg" alt={alt} />
  ) : null;
});

补充说明 #

如果getImage函数需要在组件内部定义（比如依赖组件内的变量），可以用useCallback包裹它，保证函数引用的稳定性，避免触发不必要的useEffect执行：

const getImage = useCallback(async (name) => {
  if (imageCache.has(name)) {
    return imageCache.get(name);
  }
  const url = await getDownloadURL(ref(storage, name));
  imageCache.set(name, url);
  return url;
}, []); // 可根据实际需求添加必要依赖，比如storage实例

这样处理后，同一个图片只会被请求一次，且组件不会在父组件状态变化时无意义重渲染，满足“图片仅在首次需要时加载一次”的需求。

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