当前位置：首页 > React

react实现依赖注入

2026-01-27 04:49:33React

依赖注入的概念

依赖注入（Dependency Injection, DI）是一种设计模式，用于解耦组件间的依赖关系，通过外部注入依赖而非在组件内部直接创建。在 React 中，可以通过多种方式实现依赖注入。

使用 Context API 实现

React 的 Context API 是原生支持的依赖注入方案，适合跨组件共享依赖。

react实现依赖注入

// 创建 Context
const ServiceContext = React.createContext();

// 提供依赖
const App = () => {
  const service = { fetchData: () => console.log("Fetching data") };
  return (
    <ServiceContext.Provider value={service}>
      <ChildComponent />
    </ServiceContext.Provider>
  );
};

// 注入依赖
const ChildComponent = () => {
  const service = React.useContext(ServiceContext);
  return <button onClick={service.fetchData}>Click</button>;
};

使用高阶组件（HOC）

高阶组件可以包装组件并注入依赖，适合需要复用逻辑的场景。

const withService = (Component) => {
  return function WrappedComponent(props) {
    const service = { fetchData: () => console.log("Fetching data") };
    return <Component {...props} service={service} />;
  };
};

const ChildComponent = ({ service }) => {
  return <button onClick={service.fetchData}>Click</button>;
};

export default withService(ChildComponent);

使用 Render Props 模式

Render Props 通过传递函数作为 prop 来实现依赖注入。

react实现依赖注入

const ServiceProvider = ({ children }) => {
  const service = { fetchData: () => console.log("Fetching data") };
  return children(service);
};

const ChildComponent = () => {
  return (
    <ServiceProvider>
      {(service) => <button onClick={service.fetchData}>Click</button>}
    </ServiceProvider>
  );
};

使用第三方库

第三方库如 inversify 或 tsyringe 可以更灵活地管理依赖注入。

import { Container } from 'inversify';
import { injectable, inject } from 'inversify-react';

// 定义服务
@injectable()
class DataService {
  fetchData() {
    console.log("Fetching data");
  }
}

// 配置容器
const container = new Container();
container.bind(DataService).toSelf();

// 注入依赖
const ChildComponent = inject('dataService')(({ dataService }) => {
  return <button onClick={() => dataService.fetchData()}>Click</button>;
});

// 提供依赖
const App = () => {
  return (
    <Provider container={container}>
      <ChildComponent />
    </Provider>
  );
};

自定义 Hook 实现

自定义 Hook 可以封装依赖逻辑，便于在多个组件中复用。

const useService = () => {
  const service = { fetchData: () => console.log("Fetching data") };
  return service;
};

const ChildComponent = () => {
  const service = useService();
  return <button onClick={service.fetchData}>Click</button>;
};