使用 React Hooks 的依赖注入

Question

我发现依赖注入的最大好处是能够在组合根目录的一行中替换整个应用程序中的服务实现。

有没有办法使用 React 钩子来做到这一点？

似乎在使用钩子时，例如 useHook((，您将紧密绑定到特定的实现，并且查找和切换所有实现是一个手动过程，由于 useHooks(( 出现在组件中的任意点，这进一步复杂化了。

我目前的解决方案是使用 React 上下文使组合根根据需要可用于所有内容，这似乎运行良好，但是由于许多人将 Hooks 吹捧为 DI 框架，我想知道我是否错过了什么。

Answer 1

您可以使用容器模式。创建一个负责使用钩子的容器，并将结果传递给组件。

const Component = (props) => {
return <div>{ props.data }</div>;
};
const Container = (props) => {
const data = useHook();
return <Component data={data} />;
};