[英]How to use a utility class instance in react different components and prevent reinitialization and only one instance is used on all components
我在一个单独的文件中有一个 class 和两个或多个需要使用 class 方法的不同反应组件
一种方法是我最初在反应组件之外创建了一个 class 的实例,以防止重新渲染并重新初始化 class
const utilityClass = new UtilityClass()
function ReactComponent() {
const doSomething = () => {
return utilityClass.doingSomething()
}
}
但是对于另一个文件中的第二个反应组件,我将不得不像下面一样做同样的事情
const utilityClass = new UtilityClass()
function SecondReactComponent() {
const doSomething = () => {
return utilityClass.doingSomething()
}
}
即使它不会在组件重新渲染时重新初始化,我仍然在不同的反应组件中多次创建实用程序 class 的实例,所以我尝试useMemo
,它也像下面一样工作:
function SecondReactComponent() {
const utilityClass = useMemo(() => new utilityClass(), []);
const doSomething = () => {
return utilityClass.doingSomething()
}
}
我想知道哪个是最好的方法,因为我也尝试过useCallback
并且由于某种原因没有奏效,如果有人给我更多关于执行此操作的最佳实践的见解,我将不胜感激
只需实例化 class 并将其导出到您的一个模块的顶层。 例如:
./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();
};
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.