使用create-react-app时热替换后单例组件未初始化报错如何解决

问题本质 #

Create React App 自带的热重载（HMR）逻辑在修改my-component.ts时会重新执行该模块的全部代码，生成一个全新的MyComponent实例。而RootView中的初始化useEffect因为是空依赖数组，只会在组件首次挂载时执行一次，新生成的实例不会触发初始化逻辑，调用方法时就会抛出未初始化错误。

可选技术方案 #

方案1：调整初始化逻辑依赖项 #

这是改造成本最低的方案，直接将myComponent实例加入useEffect的依赖数组，热重载生成新实例后会自动重新执行初始化：

// usage.ts 修改部分
useEffect(() => {
  myComponent.init();
}, [myComponent]);

注意需要保证init方法是幂等的，即多次调用不会产生额外副作用。

方案2：单例自动惰性初始化 #

修改MyComponent的内部逻辑，让方法调用时自动触发初始化，同时保证init方法幂等，完全不依赖外部调用时机：

// my-component.ts 修改部分
class MyComponent {
  private hasInit = false;

  init() {
    if (this.hasInit) return; // 幂等处理，重复调用无副作用
    this.hasInit = true;
    // 原有初始化逻辑
  }

  doSomething() {
    this.init(); // 调用前自动触发初始化
    if (!this.hasInit) {
      throw new Error('Not initialized');
    }
    // 原有业务逻辑
  }
}

方案3：全局挂载单例避免重复实例化 #

开发环境下将单例挂载到全局对象上，热重载模块时优先复用已存在的旧实例，不需要重新初始化：

// my-component.ts 修改部分
class MyComponent {
  // 原有逻辑不变
}

const GLOBAL_SINGLETON_KEY = '__MY_COMPONENT_SINGLETON__';
export const myComponent = 
  (process.env.NODE_ENV === 'development' && (window as any)[GLOBAL_SINGLETON_KEY]) 
  || new MyComponent();

if (process.env.NODE_ENV === 'development') {
  (window as any)[GLOBAL_SINGLETON_KEY] = myComponent;
}

方案4：热重载钩子同步实例状态 #

利用HMR的模块接收钩子，热替换时将旧实例的状态同步到新实例，保证状态一致性：

// my-component.ts 新增部分
export const myComponent = new MyComponent();

if (process.env.NODE_ENV === 'development' && module.hot) {
  module.hot.accept();
  const oldInstance = (window as any).__MY_COMPONENT_OLD_INSTANCE;
  if (oldInstance) {
    // 同步所有需要保留的状态，私有属性可通过类内部方法暴露读取接口
    (myComponent as any).hasInit = oldInstance.hasInit;
  }
  (window as any).__MY_COMPONENT_OLD_INSTANCE = myComponent;
}

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