如何使用實用程序 class 實例來反應不同的組件並防止重新初始化，並且所有組件上只使用一個實例

Question

我在一個單獨的文件中有一個 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並且由於某種原因沒有奏效，如果有人給我更多關於執行此操作的最佳實踐的見解，我將不勝感激

Answer 1

只需實例化 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();
  };
}