在 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);