是否有推荐的方法来引用 React / Nextjs 中的实例化类对象？

Question

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

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

awesomeLibrary 允许我执行 awesomeLibrary.configure()、awesomeLibrary.specifyCustomProperty() 和 awesomeLibrary.fireEvent() 之类的操作。

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

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

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

我真的不知道如何处理。

Answer 1

在导出之前实例化类是一种相当普遍的做法，也是 JavaScript/React 中单例的可能实现之一。例如，您可以通过这种方式使用流行的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

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

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