React应用切换/重启时图片重渲染引发性能卡顿问题求助

针对导航返回或重新打开应用时图片重渲染卡顿的问题，以下是几个针对性优化方案：

1. 配置React Query持久化缓存 #

你的useQuery默认会在组件挂载时重新请求数据（staleTime默认值为0），这会触发组件重渲染，导致图片重新加载。通过设置缓存参数，让数据持久化保留，避免重复请求：

const { isPending, error, data } = useQuery<ItemSet[]>({
  queryKey: ["focusdata"],
  queryFn: () => fetch(`${Url}/${en}/focus`).then((res) => res.json()),
  // 1小时内数据视为"新鲜"，不发起重复请求
  staleTime: 60 * 60 * 1000,
  // 缓存保留24小时
  cacheTime: 24 * 60 * 60 * 1000,
});

如果需要页面刷新后缓存不丢失，可以配合@tanstack/react-query-persist-client插件实现本地持久化缓存。

2. 确保图片HTTP缓存生效 #

图片重复下载是卡顿的核心原因之一，需要确认服务器返回图片时设置了正确的Cache-Control响应头，例如：

Cache-Control: public, max-age=86400

这样浏览器会缓存图片24小时，后续访问直接读取本地缓存，无需重新下载。

3. 强化MemoizedImage的稳定性 #

虽然用了React.memo，可以显式指定比较逻辑，确保只有当src或alt真正变化时才重渲染：

const MemoizedImage = React.memo(
  ({ src, alt }: { src: string; alt: string }) => (
    <img
      className="image"
      loading="lazy"
      src={`${Url_img}/${src}`}
      alt={alt}
      style={{
        width: "100%",
        height: "100%",
        objectFit: "cover",
      }}
    />
  ),
  // 自定义比较：仅对比src和alt
  (prevProps, nextProps) => {
    return prevProps.src === nextProps.src && prevProps.alt === nextProps.alt;
  }
);

同时要确保Url_img是静态常量，不会在每次渲染时重新生成，否则拼接后的src会被判定为新值，触发组件重渲染。

4. 调整图片懒加载策略 #

如果Hero组件的图片属于首屏可见内容，去掉loading="lazy"反而能让浏览器优先加载这些图片，避免导航返回时的加载延迟：

<img
  className="image"
  // 移除lazy，首屏图片直接加载
  // loading="lazy"
  src={`${Url_img}/${src}`}
  alt={alt}
  style={{
    width: "100%",
    height: "100%",
    objectFit: "cover",
  }}
/>

5. 避免父组件不必要的重渲染 #

如果Hero组件被包裹在频繁更新状态的父组件中，用React.memo包裹Hero，阻止无意义的重渲染：

export default React.memo(Hero);

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