如何在 React 中管理依赖注入？
我来自一个 Angular 世界，其中所有服务都是单例类(即整个应用程序中只有一个类实例(。在我的 React 应用程序中，我试图将一些"服务"(即执行 HTTP 请求或身份验证的东西(抽象到它们自己的类中。我猜这是 React 中的反模式。
例如，我有一个 HttpService 作为：
class HttpService {
public readonly axios = axios;
constructor() {
console.log('NEW HTTP SERVICE');
this.registerInterceptors();
}
public registerInterceptors(): void {
axios.interceptors.request.use(CacheRequestInterceptor);
axios.interceptors.request.use(AuthInterceptor);
axios.interceptors.response.use(CacheResponseInterceptor);
}
public get<T>(url: string, config: AxiosRequestConfig = {}): Observable<T> {
return from(this.axios.get(url, config)).pipe(
map((res) => {
return res.data;
})
);
}
// ... and so on
如您所见，我在构造函数中具有console.log，因此我可以跟踪何时创建新实例。在应用程序日志(使用 Next.js(中，我看到：
nextjs-ui: NEW HTTP SERVICE
nextjs-ui: event - build page: /login
nextjs-ui: wait - compiling...
nextjs-ui: event - compiled successfully
nextjs-ui: NEW HTTP SERVICE
nextjs-ui: event - build page: /admin
nextjs-ui: wait - compiling...
nextjs-ui: event - compiled successfully
nextjs-ui: NEW HTTP SERVICE
很明显，这不是我想要的方式工作(我只想要HTTP服务的一个实例(。
在 React 中实现这一目标的最佳方法是什么？它会使用高阶组件吗？
提前感谢！
您可以在 React/Next 项目中创建服务模块。如果只需要类的一个实例，则需要使用一些全局存储，在其中可以存储对类实例的引用。
您可以使用 React Context 或像 Redux 这样的状态管理库。
此日志不能证明已实现的单一实例模式不起作用。你在开发模式 (next dev( 中运行应用，其中应用根据每个请求进行编译。您需要在生产模式(next build和next start(下运行它来测试它。
nextjs-ui: NEW HTTP SERVICE
nextjs-ui: event - build page: /login
nextjs-ui: wait - compiling...
nextjs-ui: event - compiled successfully
nextjs-ui: NEW HTTP SERVICE
nextjs-ui: event - build page: /admin
nextjs-ui: wait - compiling...
nextjs-ui: event - compiled successfully
nextjs-ui: NEW HTTP SERVICE
反应依赖注入