时间戳

首页 > 解决方案 > React 钩子真的必须从“使用”开始吗？

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

问题描述

让我们创建一个非常简单的钩子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只是一种约定，还是真的会以某种方式破坏某些东西？如果可以，你能举个例子吗？

谢谢

标签： javascriptreactjsreact-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];
}

命名钩子 useXxxx 只是一个约定。

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

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

示例 #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;
}

推荐阅读