如何在react不同组件中使用实用程序类实例并防止重新初始化，并且在所有组件上只使用一个实例

Question

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

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

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

但对于另一个文件中的第二个反应组件，我将不得不做同样的事情，就像下面的一样

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

即使它不会在组件重新渲染时重新初始化，我仍然在不同的react组件上多次创建实用程序类的实例，所以我尝试了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();
};
}