是否可以将React.hook传递给函数？

Question

我可以将React.hooks传递给函数并在那里使用它吗？

    const [X, setX] = useState('');

    function  Y(useX){
       useX('string');
    }
    Y(setX)

Answer 1

使用挂钩时，您必须遵守某些挂钩规则（目前只有两个）：

1. 仅顶层呼叫挂钩
2. 仅来自React函数的调用挂钩

通过尝试将钩子传递给常规函数，就违反了它们两者。并且尽管这些规则更多是约定俗成的，而不是实际的限制，并且在某些情况下（您知道可以在何处使用它们以及为什么使用它们，或者不小心满足了它们的使用要求）可能会起作用（如本线程中的其他人所提到的），因此不建议使用以这种方式使用它们。例如，一段时间之后，您可能会忘记函数包含一个钩子，实际上取决于声明和使用钩子的位置和方式，并将其四处移动或置于有条件的状态，从而有效破坏了应用程序的逻辑。

非常重要的是，React人员想出了专用的ESlint插件，该插件旨在在后台分析您的代码，并在接近违反钩子规则的确切时间警告您。这是确定的方法。

如果仍然需要从组件中提取一些依赖于挂钩的逻辑到单独的函数中，请考虑创建一个自定义挂钩。

但！

在示例代码中，您没有将钩子传递给函数。React.useState是一个钩子，但setX返回的不是。您可以随意传递它，而实际上是要将它传递给自定义的常规函数​​或自定义钩子！