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

Question

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

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

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

Answer 1

使用钩子(Hook)时，必须遵守一定的hook rules (目前只有两个):

仅在顶层调用 Hook

仅来自 React 函数的调用 Hook

通过尝试将钩子(Hook)传递给常规函数 你违反了他们两个 .虽然这些规则更多的是约定，而不是实际限制，并且在某些情况下可能会起作用(正如该线程中的其他人所提到的)(您知道在哪里以及为什么可以使用它们，或者您不小心满足了它们的使用要求) 不推荐以这种方式使用它们。例如，一段时间后，您可能会忘记您的函数包含一个钩子(Hook)，并且实际上取决于声明和使用它的位置和方式，然后将其移动或放入条件中，从而有效地破坏了应用程序的逻辑。

React 人想出了专用的 ESlint plugin 非常重要。这意味着在后台分析您的代码，并在您接近违反 Hook 规则时准确地警告您。这是确定的方法。

如果你仍然需要从你的组件中提取一些依赖于钩子(Hook)的逻辑到一个单独的函数中，考虑创建一个 custom hook .

但!

在您的示例代码中，您 没有通过钩子(Hook)到一个函数。 React.useState是一个钩子(Hook)，但是 setX它返回的不是。 你可以通过随你喜欢，而你实际上是 旨在通过它到您定制的常规功能或自定义 Hook !