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