reactjs - 使用 React Hooks 进行依赖注入(inject)

Question

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

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

似乎当使用钩子(Hook)时，例如 useHook()，你紧紧地绑定(bind)到一个特定的实现，并且它是一个手动过程来查找和切换所有实现，而 useHooks() 出现在任意点则更加复杂组件。

我目前的解决方案是使用 React Context 使组合根可根据需要对所有内容可用，这似乎运行良好，但是由于许多吹捧 Hooks 作为 DI 框架，我想知道我是否错过了一些东西。

Answer 1

您可以使用 container pattern .创建一个容器，负责使用钩子(Hook)并将结果传递给组件。

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

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

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