如何使用实用程序类实例来反应不同的组件并防止重新初始化，并且所有组件仅使用一个实例

Question

我在单独的文件中有一个类，以及两个或多个需要使用类方法的不同反应组件

一种方法是我最初在反应组件之外创建了该类的实例，以防止重新渲染并重新初始化该类

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

但是对于不同文件中的第二个反应组件，我将必须像下面那样做同样的事情

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

即使它不会在组件重新渲染时重新初始化，我仍然在不同的反应组件中多次创建实用程序类的实例，所以我尝试了

useMemo

，它也像下面这样工作：

function SecondReactComponent() {
  const utilityClass = useMemo(() => new utilityClass(), []);
  const doSomething = () => {
    return utilityClass.doingSomething()
  }
}

我想知道哪种方法是最好的方法，因为我也尝试过

useCallback

，但由于某种原因不起作用，如果有人给我更多关于最佳实践的见解，我将不胜感激，谢谢

Answer 1

只需实例化该类并将其导出到模块之一的顶层即可。例如：

./First.jsx

：

// class UtilityClass {/* ...*/}

export const utilityClass = new UtilityClass();

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

然后，在您想要使用它的每个其他模块（在其他组件等）中，只需导入并使用它：

./Second.jsx

：

import {utilityClass} from './First';

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