使用 React Hooks 进行依赖注入

Question

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

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

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

我目前的解决方案是使用 React Context 使组合根可用于所有需要的东西，这似乎运行良好，但有许多吹捧 Hooks 作为 DI 框架的我想知道我是否遗漏了什么。

Answer 1

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

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

const Container = (props) => {
    const data = useHook();

    return <Component data={data} />;
};