在 React 中初始化类的正确方法是什么？

Question

这更多是一个理论和最佳实践问题，而不是一个操作问题，但是在 React 组件中初始化一个类并在组件的整个生命周期中维护该单一实例的正确方法是什么？例如，考虑这个类：

// MyClass.ts
class MyClass {
    constructor(){
      console.log('Initialized MyClass');
    }
}

还有以下两种方法：

// Test.tsx
import React, { memo } from 'react';

const myClass = new MyClass();

const Test = memo(() => {
  // I can use myClass here
  return null;
});

export default Test;

这可行，但如果我导入此组件；即使我不使用它，也会打印控制台语句。 （通过使用，我的意思是我不会在任何地方做<Test />）

// Test.tsx
import React, { memo } from 'react';

const Test = memo(() => {
  const myClass = new MyClass();
  // I can use myClass here
  return null;
});

export default Test;

这也有效，除了每次重新渲染 Test get 时，我都会打印控制台日志语句。

我什至尝试通过使用 useRef 来解决这两个问题（MyClass 即使在不使用时也会被初始化，并且 MyClass 在每次重新渲染时都会重新初始化），因为这应该在实例的生命周期中保持状态

// Test.tsx
import React, { memo, useRef } from 'react';

const Test = memo(() => {
  const myClass = useRef<new MyClass()>;
  return null;
});

export default Test;

但这和方法2有同样的问题。

Answer 1

如果您只想在程序的整个生命周期内初始化一次 MyClass，请将其设为单例：

class MyClass {
 // ...
}
let instance: MyClass | null = null;

// Never do `new MyClass()`, always call this.
export function getMyClass() {
  if(!instance) instance = new MyClass();
  return instance;
}

如果您想为每个组件初始化一个 MyClass，请使用带有惰性初始化函数的只读状态原子：

function MyComponent() {
  const [myClass] = React.useState(() => new MyClass());
}