React - 钩子作为可选参数

你可以把钩子作为参数，但你应该吗？你为什么要这样做呢？

但基本上，它是这样的：

function WeirdComponent({
    hook = useHook(),
    hook2 = useAnotherHook(hook),
}) {
    return (
        <div>
            <div>{hook}</div>
            <div>{hook2}</div>
        </div>
    )
}

function useHook(){
    return "hook!"
}

function useAnotherHook(value){
    return value || "default value"
}

这将与你在组件中添加钩子的工作完全一样。

但你为什么要这样做呢？

当我意识到这是可能的时候，我把它作为简化一些组件的单元测试的一种方式。

这让我只需传递我想要的值，而不需要模拟钩子。

另一个令人惊讶的事情是，你可以根据你想要的东西注入一个不同的钩子，并改变一个组件的区间，只改变钩子。

你应该这样做吗？

也许不应该。

也许这有一些小众的用途，但无论你能用这种方式做什么，你都可以用另一种方式做。

(如果你有关于这样做的用例的想法，我很想知道它的情况）。