如何在 React 应用程序中共享类实例？

Question

如何在 React 应用程序中共享类实例？

我需要使用外部库，这需要我实例化它并在应用程序中使用该实例来访问各种方法/属性，

const instance = new LibraryModule(someInitData);

我在我的项目中使用了 React 功能组件。我不想每次需要使用实例时都重新创建实例（可以认为是单例）。

如何与我的所有组件共享同一个实例？

Answer 1

导入已经是全局的，你只需要导入模块即可：

class LibraryModule {
  x = 5;
}
const instance = new LibraryModule();

export default instance;

import instance from "./MyLibrary";
import Component from "./Component";

console.log(instance.x);

const App = () => {
  useEffect(() => {
    console.log(`from App, called last`, instance.x);
  }, []);
  return <Component />;
};

import instance from "./MyLibrary";

const Component = () => {
  useEffect(() => {
    instance.x = 10;
    console.log(`from component`, instance.x);
  }, []);
  return <>Component</>;
};

Answer 2

您似乎正在寻找某种依赖注入， 这并不是真正的反应方式。

我建议使用 Context Api。 https://reactjs.org/docs/hooks-reference.html#usecontext

import React from 'react';

export const LibraryModuleContext = React.createContext(new LibraryModule);

import React from 'react';
import { LibraryModuleContext } from './library-module';

const App = () => (
  <LibraryModuleContextt.Provider>
    <Toolbar />
  </LibraryModuleContext.Provider>
)

然后在你的代码中

import React from 'react';
import { LibraryModuleContext } from './library-module';

const FooComponent = () => {
  const LibraryModule = useContext(LibraryModuleContext);

  return (
    <div>Hello {LibraryModule.x}</div>
  );
};

Answer 3

我一直在寻找类似的答案，而不是导入整个类实例，我认为您可以单独导出每个方法，并且仅在必要时将该特定方法导入到您的组件中，这可能是最有效的代码方法。

另一种解决方案可能是，如果您在所有页面之间使用路由器，请在路由器页面创建该类的实例，并根据需要将其传递给每个组件。