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

Question

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

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

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

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

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

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

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

谢谢

Answer 1

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

来自reactjs/docs。

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

Answer 2

自定义钩子的完美定义是（注意删除了“use”前缀和“may use hooks”）：

自定义 Hook 是调用其他Hook 的 JavaScript 函数。

因此，我们可以区分之间的辅助功能和自定义的钩子。

但是，由于我们使用静态代码分析工具( eslint) 来分析文本（词法）而不是意义（语义），因此我们无法判断某些函数是否实际使用了钩子。

……这个约定很重要。没有它，我们将无法自动检查是否违反 Hooks 规则，因为我们无法判断某个函数是否包含对 Hooks 的调用。（来源）

因此：

// #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 不会破坏您的应用程序，因为它只是一个不违反 Hook 规则的“辅助函数”，尽管会有警告。

你能举个例子吗？

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;
}