如何在React开发模式下检测导入文件的热重载变化

这个需求可以通过构建工具原生的模块热替换（HMR）能力实现，不需要额外引入第三方依赖，以下是Webpack和Vite两种主流构建工具的实现方案：

Webpack 项目实现方案 #

Create React App 等基于Webpack的脚手架默认已开启HMR能力，直接使用原生module.hotAPI即可实现监听，你可以把逻辑封装成自定义Hook方便复用：

// 自定义Hook：监听指定模块变更，仅开发环境生效
function useModuleChange(modulePath, onChange) {
  useEffect(() => {
    // 生产环境直接跳过逻辑
    if (process.env.NODE_ENV !== "development" || !module.hot) return;

    // 注册模块变更监听
    const unlisten = module.hot.accept(modulePath, () => {
      // 动态导入更新后的模块
      import(modulePath).then((newModule) => {
        // 传入新的模块内容执行自定义回调
        onChange?.(newModule.default);
      });
    });

    // 组件卸载时取消监听
    return () => unlisten?.();
  }, [modulePath, onChange]);
}

// 业务组件使用示例
import myIcon from "./myicon.svg";
import { useState, useEffect } from "react";

function IconSet() {
  const [icon, setIcon] = useState(myIcon);

  useModuleChange("./myicon.svg", (newIcon) => {
    // 此处可以自定义处理新旧值逻辑
    console.log("SVG文件已更新", icon, newIcon);
    setIcon(newIcon);
  });

  return <img src={icon} alt="图标" />;
}

Vite 项目实现方案 #

Vite 提供了专属的import.meta.hotAPI，用法和Webpack类似：

import myIcon from "./myicon.svg";
import { useState, useEffect } from "react";

function IconSet() {
  const [icon, setIcon] = useState(myIcon);

  useEffect(() => {
    if (process.env.NODE_ENV !== "development" || !import.meta.hot) return;

    import.meta.hot.accept("./myicon.svg", (newModule) => {
      const newIcon = newModule.default;
      // 自定义处理逻辑
      console.log("SVG文件已更新", icon, newIcon);
      setIcon(newIcon);
    });
  }, [icon]);

  return <img src={icon} alt="图标" />;
}

注意事项 #

• 以上逻辑只会在开发环境执行，生产环境会被Tree Shaking自动移除，不会影响产物体积
• 可以监听任意类型的导入模块，不止SVG，JS模块、样式文件、其他静态资源都可以用相同逻辑实现
• 如果监听的模块不是默认导出，只需要把newModule.default改为对应导出的字段名即可

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