为何部分React Hooks需在顶层使用？自定义Hook例外解析

测试代码示例 #

App.js #

import useFoo from "./useFoo";
import "./styles.css";

export default function App() {
  let foo = 3;

  if (Math.random() > 0.5) {
    foo = useFoo(6);
  }

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      {foo}
    </div>
  );
}

useFoo.js #

export default function useFoo(a) {
  return a * a;
}

实际测试现象 #

• 刷新页面时会随机显示3和36，说明useFoo()这类自定义函数无需在顶层也能运行；
• 工作中遇到类似const [bar, useBar] = useBar(value1, value2);的写法，useBar()仅为普通函数，无useState()的状态保留特性；
• 若将useBar()放在条件语句中：

  let [bar, setBar];
  
  if (true) {
    [bar, setBar] = useBar(value1, value2);
  }
  

  VS Code会报错提示React Hooks需在顶层，但项目仍能正常运行。

核心疑问 #

1. 是否所有React Hooks都必须在顶层使用？
2. 为何useBar()能正常运行却触发报错？
3. Hooks是否需顶层的判定依据是什么？
4. 该规则是否仅为ESLint校验规则？

解答 #

1. 并非所有带use前缀的函数都是React Hooks #

只有React官方内置Hooks（如useState、useEffect），以及依赖内置Hooks实现状态/副作用管理的自定义Hook，才需要遵循顶层调用规则。像你示例中的useFoo和useBar只是普通工具函数——它们没有调用任何React内置Hooks，本质和普通函数无区别，所以在条件语句中运行也不会破坏React的状态机制。

2. 报错来自ESLint的react-hooks/rules-of-hooks规则 #

ESLint的这个校验规则是通过**函数名称前缀是否为use**来判定的：只要函数名以use开头，不管它是不是真正的React Hook，ESLint都会触发校验提示，要求它在组件顶层调用。这就是为什么你的useBar明明是普通函数，却会被VS Code报错。

3. React要求Hooks顶层调用的核心原因 #

对于真正的React Hooks（内置或依赖内置的自定义Hook），必须在组件顶层调用的本质原因是：React靠Hooks的调用顺序来维护状态与组件的关联。如果在条件、循环或嵌套函数里调用这类Hooks，会导致每次渲染时Hooks的调用顺序不一致，进而破坏状态的正确性（比如useState的状态会和错误的变量绑定，引发不可预测的bug）。

4. 规则的本质：ESLint前置校验 + React运行时机制 #

• ESLint的react-hooks/rules-of-hooks是前置校验工具，帮你提前规避潜在的状态bug；
• React运行时本身不会强制检查Hooks的调用顺序，但如果违反顺序调用真正的Hooks，会导致状态关联错误（而非直接报错）。

总结：只有依赖React内置Hooks的自定义Hook和官方内置Hooks必须在顶层调用；带use前缀的普通函数不受React运行时约束，但会被ESLint规则误判；报错仅来自ESLint的前缀匹配校验，而React的顶层要求是针对真正Hooks运行时机制的必要规则。

内容的提问来源于stack exchange，提问作者Stefanie Gauss