React hooks 真的必须以“use”开头吗？

Question

让我们创建一个非常简单的钩子

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

只是一种约定，还是真的会以某种方式破坏某些东西？如果可以的话，你能举个例子吗？

谢谢

Answer 1

React hook 定义根据 React 文档:

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

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

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

因此我们可以区分辅助函数和自定义挂钩。

但是，我们无法判断某些函数是否实际上使用了钩子（我们确实在运行时知道）。这就是为什么我们使用静态代码分析工具（如

eslint

）来分析文本（词汇）而不是含义（语义）。

此约定保证您始终可以查看组件并知道其状态、效果和其他 React 功能可能“隐藏”的位置。 （通过自定义 Hook 重用逻辑）

渲染期间调用的所有函数都应该以 use 前缀开头吗？不，不调用 Hook 的函数不需要是 Hook。 （通过自定义 Hook 重用逻辑）

...这个公约非常重要。如果没有它，我们将无法自动检查是否违反 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 无法破坏您的应用程序，因为它只是一个不违反 Hooks 规则的“辅助函数”，尽管会出现警告。

你能举个例子吗？

// #2 from above
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;
}

Answer 2

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

来自reactjs/docs。

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

Answer 3

想象一下，你的项目js代码发布时会被压缩、混乱，你所有以use开头的方法都会变成a、b、c等

因此，让开发者上手使用只能是统一规范。目的是为了方便eslint识别这是一个自定义的hooks，这样当你违反hooks的使用规则时可以向你发出警告，大大减少bug的发生。

比如你把hooks函数放在条件分支中，如果碰巧这个条件判断不变，就不会出错。这样一来，代码就存在隐患了