在 React 中使用

redi 提供了一组 API，方便在 React 中使用依赖注入模式。redi 借助 React Context，在组件间传递注入器。

组件提供依赖项#

组件可以和一组依赖项绑定，connectDependencies 实际上会返回一个 HOC，该 HOC 内部会提供了一个 RediContext，RediContext 内的注入器含有这组依赖：

const App = connectDependencies(
  function AppImpl() {
    //...
  },
  [[PlatformService]]
)

也可以通过 connectInjector 直接和某个注入器绑定：

const injector = new Injector([[PlatformService]])
const App = connectInjector(function AppImpl() {
  //...
}, injector)

connectDependencies 和 connectInjector 的区别在于：前者所绑定的组件每次创建时，都会创建一个注入器，各个注入器之间相互独立；后者所绑定的组件并不创建注入器，共享同一个注入器。另外，当绑定过的组件构成父子关系时，connectDependencies 会自动将两个注入器也构建父子关系。所以在大部分情况下 connectDependencies 可能会更适用。

组件使用依赖项#

在函数式组件中使用依赖项，可以使用如下的 Hooks：

function Dashboard() {
  const injector = useInjector()
  const platformService = useDependency(PlatformService)
}

在类组件中使用依赖项，可以使用 WithDependency 装饰器。

class Dashboard extends React.Component {
  static contextType = RediContext
  @WithDependency(PlatformService)
  private readonly platformSrv!: PlatformService
}

useDependency 和 WithDependency 支持传递参数来控制注入依赖的数量和向上查找。

@WithDependency(IStateService, Quantity.Optional, LookUp.SkipSelf);