Rules of Hooks Hooks 使用规则
最后更新：2026-10-28
Rules of Hooks Hooks 使用规则
Hooks 只有两条铁律：只在函数组件或自定义 Hook 的最顶层调用，不要放进循环、条件或嵌套函数；只在 React 函数中调用，不要在普通 JS 函数里调用。React 靠「调用顺序」对应每个 Hook 的状态，顺序一乱状态就串位。
| 分组 | 路由与状态管理 |
|---|---|
| 类型 | 模式 |
ℹ️ 说明 编辑器将 JSX 转译为 JavaScript 后在沙箱中渲染真实界面；组件自动挂载，无需手写 render 调用。
📝 语法
// ✅ 顶层无条件调用
function Counter() {
const [n, setN] = useState(0)
useEffect(() => { /* ... */ }, [])
// ❌ 不能这样：if (n > 0) useEffect(...)
// ❌ 不能这样：for 循环里 useState(0)
return <button onClick={() => setN(n + 1)}>{n}</button>
}返回值：无返回值，作为编码模式使用
▶ 示例
示例可直接运行：展开后自动渲染，编辑代码即时生效。
输出结果：
面板显示两条 ✓ 规则与一条 ✗ 反例；点按钮更新计数与勾选，无论怎么交互 Hooks 都按固定顺序执行，状态不串位。💡 要点
⚠️ 注意 违反规则不会立刻报错，而是出现「点 A 按钮改了 B 的值」这类诡异 bug；eslint-plugin-react-hooks 能在编译前拦住。
💡 提示 提前 return 必须放在所有 Hook 调用之后，否则某次渲染会跳过 Hook、打乱调用顺序。
ℹ️ 说明 React Compiler 能在编译期自动优化组件，但两条规则依然是它成立的前提。
🏷️ 路由与状态管理相关
💡 相关案例
更多案例整理中，敬请期待。
📚 相关教程
❓ 常见问题
Q 为什么不能在条件语句里调用 Hook？
A React 用「调用顺序」把每次渲染的 Hook 与状态一一对应；条件调用会让顺序漂移，第 n 个 Hook 读到别人的状态。
Q 自定义 Hook 里能调用其他 Hook 吗？
A 可以，这正是自定义 Hook 的意义——名字以 use 开头的函数内部同样遵循顶层调用规则。
Q 组件里能先 return 再调用 Hook 吗？
A 不能。要么把 Hook 提到 return 之前，要么把 return 之后的 JSX 拆成子组件，保证每次渲染 Hook 全部执行。
