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

Question

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

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

和以下2种方法:

// 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时，我都会打印控制台日志语句。

我甚至试图解决这两个问题(MyClass得到初始化，即使不被使用，和MyClass被重新初始化在每次重新渲染)通过使用useRef，因为这应该通过实例的生命周期维持状态

// 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());
}