React条件渲染中图片重复加载的性能问题解决方案咨询

你遇到的图片重复下载问题，核心是每次切换分类时对应img元素被卸载后重新挂载，加上可能的缓存策略缺失，导致react-dom重复发起请求。以下是几种彻底解决的方案：

方案1：用CSS控制显示隐藏，避免DOM卸载重挂载 #

将所有分类内容保留在DOM中，通过CSS的display属性控制显示/隐藏，确保img元素始终存在，不会因组件卸载触发重新加载。

修改Content.jsx：

import { useHookstate } from "@hookstate/core";
import { imagesData } from "../state/images";
import { generalData } from "../state/store";

const Content = () => {
    const category = useHookstate(generalData);
    const images = useHookstate(imagesData);
    const selectedCategory = category.selected.value;

    return (
        <div>
            {/* 分类1 */}
            <div className={`flex flex-col items-center md:px-10 ${selectedCategory === "category1" ? "block" : "hidden"}`}>
                <img src={images.img1.value} className="max-w-[120px] sm:max-w-[140px] w-full h-full rounded-3xl" alt="..." />
                <p>Text 1</p>
            </div>
            {/* 分类2 */}
            <div className={`flex flex-col items-center md:px-10 ${selectedCategory === "category2" ? "block" : "hidden"}`}>
                <h1>Heading...</h1>
                <img src={images.img2.value} className="max-w-[120px] sm:max-w-[140px] w-full h-full rounded-3xl" alt="..." />
                <img src={images.img3.value} className="max-w-[120px] sm:max-w-[140px] w-full h-full rounded-3xl" alt="..." />
                <p>Text 2</p>
                <img src={images.img4.value} className="max-w-[120px] sm:max-w-[140px] w-full h-full rounded-3xl" alt="..." />
                <p>Text 3</p>
            </div>
            {/* 分类3 */}
            <div className={`flex flex-col items-center md:px-10 ${selectedCategory === "category3" ? "block" : "hidden"}`}>
                <p>Text 4</p>
                <img src={images.img5.value} className="max-w-[120px] sm:max-w-[140px] w-full h-full rounded-3xl" alt="..." />
                <p>Text 5</p>
                <img src={images.img6.value} className="max-w-[120px] sm:max-w-[140px] w-full h-full rounded-3xl" alt="..." />
            </div>
            {/* 默认空状态 */}
            <div className={`flex flex-col items-center md:px-10 ${!["category1","category2","category3"].includes(selectedCategory) ? "block" : "hidden"}`}>
                <p>Empty..</p>
            </div>
        </div>
    )
}

export default Content;

注：Hookstate会缓存getImages的Promise结果，直接读取images.imgX.value即可，无需重复调用suspend。

方案2：封装分类组件并用React.memo缓存 #

将每个分类的内容拆分为独立组件，用React.memo包裹，确保只有当props变化时才重新渲染，避免无意义的组件卸载重挂载。

先创建分类组件（以Category1为例）：

// Category1.jsx
import React from 'react';

const Category1 = ({ imgSrc }) => (
    <div className="flex flex-col items-center md:px-10">
        <img src={imgSrc} className="max-w-[120px] sm:max-w-[140px] w-full h-full rounded-3xl" alt="..." />
        <p>Text 1</p>
    </div>
);

export default React.memo(Category1);

同理创建Category2、Category3组件，再修改Content.jsx：

import { useHookstate } from "@hookstate/core";
import { imagesData } from "../state/images";
import { generalData } from "../state/store";
import Category1 from './Category1';
import Category2 from './Category2';
import Category3 from './Category3';

const Content = () => {
    const category = useHookstate(generalData);
    const images = useHookstate(imagesData);
    const selected = category.selected.value;

    switch (selected) {
        case "category1":
            return <Category1 imgSrc={images.img1.value} />;
        case "category2":
            return <Category2 img2={images.img2.value} img3={images.img3.value} img4={images.img4.value} />;
        case "category3":
            return <Category3 img5={images.img5.value} img6={images.img6.value} />;
        default:
            return <div className="flex flex-col items-center md:px-10"><p>Empty..</p></div>;
    }
}

export default Content;

再次切换到已选中过的分类时，组件实例会被复用，img元素不会重新加载。

方案3：预加载图片到内存 #

在应用初始化时提前加载所有图片，用Image对象缓存到内存中，后续img的src直接指向已缓存的资源，彻底避免重复请求。

修改images.jsx：

import { hookstate } from "@hookstate/core";

// 单张图片预加载函数
const preloadImage = (src) => new Promise((resolve) => {
    const img = new Image();
    img.src = src;
    img.onload = () => resolve(src);
    img.onerror = () => resolve(src); // 加载失败仍返回原路径
});

const getImages = async () => {
    const imagePaths = {
        img1: "/assets/images/img1.jpg",
        img2: "/assets/images/img2.jpg",
        img3: "/assets/images/img3.jpg",
        img4: "/assets/images/img4.jpg",
        img5: "/assets/images/img5.jpg",
        img6: "/assets/images/img6.jpg"
    };
    // 并行预加载所有图片
    await Promise.all(Object.values(imagePaths).map(preloadImage));
    return imagePaths;
};

const imagesData = hookstate(getImages);

export { imagesData };

所有图片会在应用启动时加载到内存，后续切换分类时不会发起新的网络请求。

补充：配置服务器缓存策略 #

无论采用哪种方案，都需要服务器为图片资源设置正确的Cache-Control响应头，例如：

Cache-Control: public, max-age=31536000, immutable

这会让浏览器长期缓存图片资源，即使页面刷新也不会重复请求。

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