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

Question

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

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

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

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

标签： reactjsreact-hooks

Answer 1

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

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

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

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