Skip to main content

hmr

  • live reload - 检测到变化刷新页面
  • HMR - Hot Module Replacement - Hot Module Reload
    • 强调保留状态
    • Webpack
    • Vite HMR API
      • 接口与 Webpack 类似但不相同
  • React Fast Refresh
    • HMR 更进一步 - 组件纬度
    • 支持的 bundler
      • rn, parcel2, webpack, cra, nextjs, vite
    • 检测到变化,更新组件,re-render
    • 如果 exports 不止 react 组件,还会更新其他 import 依赖
    • prevExports
      • 上次的组件
    • https://reactnative.dev/docs/fast-refresh
    • react-hot-loader
      • fast refresh 之前的方案

Vite HMR

interface ImportMeta {
// 判断当前是否为 HMR 环境
readonly hot?: ViteHotContext;
}

type ModuleNamespace = Record<string, any> & {
[Symbol.toStringTag]: 'Module';
};

interface ViteHotContext {
// 持久化数据
readonly data: any;

// 接受新的模块 - HMR boundary
accept(): void;
accept(cb: (mod: ModuleNamespace | undefined) => void): void;
accept(dep: string, cb: (mod: ModuleNamespace | undefined) => void): void;
accept(deps: readonly string[], cb: (mods: Array<ModuleNamespace | undefined>) => void): void;

// 销毁前回调
dispose(cb: (data: any) => void): void;
// 不可 HMR
decline(): void;
invalidate(): void;

// vite:beforeUpdate, vite:beforeFullReload, vite:beforePrune, vite:invalidate, vite:error
// `InferCustomEventPayload` provides types for built-in Vite events
on<T extends string>(event: T, cb: (payload: InferCustomEventPayload<T>) => void): void;
send<T extends string>(event: T, data?: InferCustomEventPayload<T>): void;
}

react refresh

// reload
/* @refresh reset */