React多组件复用工具类实例避免重复初始化的最佳实践

核心需求 #

让多个React组件共享同一个UtilityClass实例，避免重复初始化，同时保证组件调用方法的稳定性。

最佳方案：工具类内部实现单例模式 #

直接在工具类的定义文件中封装单例逻辑，导出唯一实例，所有组件统一导入这个实例即可。这种方式最简洁，且天然保证全局唯一。

示例代码 #

1. 工具类文件（UtilityClass.js）：

class UtilityClass {
  doingSomething() {
    // 你的方法逻辑
    return "操作结果";
  }

  // 单例实现
  static instance = null;
  static getInstance() {
    if (!UtilityClass.instance) {
      UtilityClass.instance = new UtilityClass();
    }
    return UtilityClass.instance;
  }
}

// 导出唯一实例
export default UtilityClass.getInstance();

2. 任意组件中使用：

// ReactComponent.js
import utilityClass from './UtilityClass';

function ReactComponent() {
  const doSomething = () => {
    return utilityClass.doingSomething();
  };

  // 组件渲染逻辑...
}

// SecondReactComponent.js
import utilityClass from './UtilityClass';

function SecondReactComponent() {
  const doSomething = () => {
    return utilityClass.doingSomething();
  };

  // 组件渲染逻辑...
}

为什么其他方案存在问题 #

• 初始方案（组件内部分别实例化）：每个组件文件单独执行new UtilityClass()，会创建多个独立实例，无法共享状态或资源，违背复用初衷。
• useMemo方案：useMemo只能保证当前组件内部实例不随重渲染重复创建，但每个组件仍会生成自己的实例，无法实现全局共享。如果需要让doSomething函数引用稳定（避免因实例变化导致组件不必要重渲染），可以搭配useCallback，但这解决不了多组件实例不统一的问题：

  function SecondReactComponent() {
    const utilityClass = useMemo(() => new UtilityClass(), []);
    // 用useCallback包裹，依赖utilityClass实例
    const doSomething = useCallback(() => {
      return utilityClass.doingSomething();
    }, [utilityClass]);
  }
  

补充：无状态工具类可直接导出静态方法 #

如果你的工具类不需要维护实例状态，完全可以改成静态方法，连实例都不用创建，更简单：

class UtilityClass {
  static doingSomething() {
    return "操作结果";
  }
}

export default UtilityClass;

组件中直接调用：

import UtilityClass from './UtilityClass';

function ReactComponent() {
  const doSomething = () => {
    return UtilityClass.doingSomething();
  };
}

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