是否有推荐的方法来在 React / Nextjs 中引用实例化的 class object？

Question

假设我有一个需要在我的 React 应用程序中实例化的 Node.js 库。

const awesomeLibrary = new AwesomeLibrary('someID', options);

awesomeLibrary允许我做awesomeLibrary.configure() 、 awesomeLibrary.specifyCustomProperty()和awesomeLibrary.fireEvent()之类的事情。

我想实例化一次，然后从我的应用程序周围的实例化引用（ awesomeLibrary ）中调用这些方法。 最好的方法是什么？

我会在顶级入口组件（例如_app.tsx ）中实例化它，将其导出，将其导入其他组件并调用方法吗？ 为了导出它，我必须在组件之外实例化它，而不是在组件的生命周期中。 这是一个坏习惯吗？

或者，我可以将实例化归类为钩子吗？ 说我在其中实例化和导出方法的useAwesomeLibrary() ？ 但是每次从不同组件调用钩子时不会创建一个实例吗？

我真的不知道如何处理这个。

Answer 1

在导出之前实例化 class 是一种相当普遍的做法，也是 JavaScript/React 中 singleton 的可能实现之一。 例如，您可以通过这种方式使用流行的i18next库：

服务/i18n.js：

import i18n from 'i18next';

i18n.init({
  // pass translations and other config
});

export default i18n;

_app.js：

import i18n from 'services/i18n';

// snip

<I18NextProvider i18n={i18n} /> // consume already instantiated i18n object

这与在挂钩中实例化 object 之间的区别在于何时实例化。 当您在钩子中执行此操作时，每次使用此钩子挂载组件时都会实例化。 当在单独的文件（模块）中时，每页加载一次。

这是一个坏习惯吗？ 我不知道，这取决于你如何使用它。 这样做本身并没有什么不好，甚至它也有它的优点（在上面的示例中，我们委派了从 _app.js 创建和配置 i18n 服务的责任，从单一责任原则的角度来看这是非常好的）。 但请记住，因单例而臃肿的代码库可能会变得难以维护。