React 钩子真的必须从“使用”开始吗？答案

【问题标题】：Do React hooks really have to start with "use"?React 钩子真的必须从“使用”开始吗？
【发布时间】：2021-05-14 23:42:53
【问题描述】：

让我们创建一个非常简单的钩子useDouble，它返回一个数字的双精度：

export default function useDouble(nb) {
  return nb * 2;
}

文档 (https://reactjs.org/docs/hooks-custom.html#extracting-a-custom-hook) 内容如下：

自定义 Hook 是一个 JavaScript 函数，其名称以“use”开头，并且可以调用其他 Hooks

但如果我将useDouble 更改为double，它仍然有效。我什至尝试从double 钩子中调用其他钩子，它仍然有效。

演示：https://codesandbox.io/s/laughing-gareth-usb8g?file=/src/components/WithUseDouble.js

所以我的问题是：命名钩子useXxxxx 只是一种约定，还是真的会以某种方式破坏某些东西？如果可以的话，你能举个例子吗？

谢谢

【问题讨论】：

标签： javascript reactjs react-hooks

【解决方案1】：

完美的definition of a custom hook 应该是（注意删除了“use”前缀和“may use hooks”）：

自定义 Hook 是一个 JavaScript 函数调用其他 Hooks。

所以我们可以区分 辅助函数和自定义钩子。

但是，由于我们使用static code analyzing tool (eslint) 来分析文本（词法）而不是含义（语义），因此我们无法判断某些函数是否真的使用了钩子。

... 这个约定非常重要。没有它，我们将无法自动检查是否违反 Hooks 规则，因为我们无法判断某个函数是否包含对 Hooks 内部的调用。 (source)

因此：

// #1 a function
// CAN'T BREAK ANYTHING
function double(nb) {
  return nb * 2;
}

// #2 Still a function, does not use hooks
// CAN'T BREAK ANYTHING
function useDouble(nb) {
  return nb * 2;
}

// #3 a custom hook because hooks are used, 
// CAN BREAK, RULES OF HOOKS
function useDouble(nb) {
  const [state, setState] = useState(nb);
  const doubleState = (n) => setState(n*2);
  return [state,doubleState];
}

命名钩子 useXxxxx 只是一种约定吗？

是的，帮助静态分析器警告错误。

它真的能以某种方式破坏某些东西吗？

示例 #2 不能破坏您的应用程序，因为它只是一个不违反 Hooks 规则的“辅助函数”，尽管会发出警告。

你能举个例子吗？

function useDouble(nb) { return nb * 2; }

// <WithUseDouble/>
function WithUseDouble() {
  // A warning violating Rules of Hooks 
  // but useDouble is actually a "helper function" with "wrong" naming
  // WON'T break anything
  if (true) {
    return <h1>8 times 2 equals {useDouble(8)} (with useDouble hook)</h1>
  }
  
  return null;
}

【讨论】：

这个答案没有像一百万个赞的唯一原因是因为我们大多数开发人员不关心命名；我们只使用“使用”。这个答案应该是如何在 SO 上写出完美回应的典范。

【解决方案2】：

我是否必须以“use”开头来命名我的自定义 Hook？请做。这约定非常重要。没有它，我们将无法自动检查是否违反 Hooks 规则，因为我们无法判断某个函数是否包含对 Hooks 内部的调用它

来自reactjs/docs。

在使用多个函数的大型组件中，“use”前缀还有助于轻松识别函数是否为自定义钩子。

【讨论】：