React Hooks 的“天条”：为啥绝对不能写在 if 语句里？

在折腾 React 的时候，你肯定被这个报错恶心过：

Rendered fewer hooks than expected. This may be caused by an accidental early return statement.

或者 ESLint 那个经典的黄牌警告：

React Hook "useState" is called conditionally...

这大概是 React 开发里最出名的"天条"了：Hooks 必须在最顶层调用，别往条件判断、循环或者嵌套函数里塞。

很多老铁可能只是习惯性遵守，但心里估计在嘀咕：React 为啥这么"轴"？多加个判断怎么就崩了？它不能智能点吗？

今天咱们就拆开来看看，React 内部到底是咋玩这套"排队游戏"的。

核心真相：React 其实是个"大脸盲"

理解这事的关键就在于：React 压根不知道你定义的 Hook 叫什么名字。

在你代码里它是 [count, setCount]，但在 React 眼里，它只认序号：

1. 哦，这是第 1 个 Hook。
2. 哦，这是第 2 个 Hook。
3. 哦，这是第 3 个 Hook。 ...

它完全是靠调用顺序来给状态"对号入座"的。

你可以把 React 管理 Hook 的方式想象成一个没有标签的储物柜：

第一次渲染，React 在心里默默记账：

[1号柜子] -> 给第一个 useState 存个 0
[2号柜子] -> 给第一个 useEffect 存个副作用配置
[3号柜子] -> 给第二个 useState 存个 'Hello'

每次组件重新渲染，React 就像个"盲盒玩家"，按顺序开柜子：

• 碰到代码里第 1 个 hook，它就去开 1 号柜子拿数据。
• 碰到代码里第 2 个 hook，它就去开 2 号柜子拿数据。

翻车现场：当 if 搞乱了队伍

假设我们写了段挺"合理"的逻辑：如果是登录状态，就记个名字；不然就只记个计数器。

翻车代码长这样：

function BadComponent({ isLoggedIn }) {
  // 🔴 危险动作！把 Hook 塞 if 里面了
  if (isLoggedIn) {
    const [name, setName] = useState('Alice'); // 咱本意是想存个名字
  }

  const [count, setCount] = useState(0); // 咱本意是想存个数字

  return <div>{count}</div>;
}

第一次：登录状态（isLoggedIn = true）

一切看起来很丝滑，React 默默排好了队：

执行顺序	你代码里的 Hook	React 开的柜子	存的数据
第 1 个	useState('Alice')	1号柜	'Alice' (字符串)
第 2 个	useState(0)	2号柜	0 (数字)

第二次：退出了（isLoggedIn = false）

用户一退出，if 里的代码直接被跳过了。

这时候，第一个 被执行的 Hook 变成了 useState(0)。

React 的脑回路： "好嘞，碰到第 1 个 Hook 了。不管你代码里叫它 count 还是啥，我直接去开1号柜取东西。"

结果就尴尬了：

执行顺序	你代码里的 Hook	React 开的柜子	拿到的数据	结果
第 1 个	useState(0)	1号柜	'Alice'	💥 炸了！

原本该拿 0 的 count 变量，反手抓到了一个字符串 'Alice'。整个组件逻辑瞬间乱套，报错直接甩你脸上。

这就是为啥顺序绝对不能乱。只要中间少了一个或多了一个，后面的所有 Hook 统统都会"串位"。

为啥 React 不给 Hook 起个名字（Key）？

肯定有人想过：React 既然"脸盲"，那给 Hook 加个 ID 不就结了？

// ❌ 这种 API 纯属假想
const [count, setCount] = useState('myCountId', 0);

有了 ID，顺序乱了也能找着啊！

React 团队当时确实琢磨过这招，但最后觉得太心累了：

1. 起名困难症：组件大了之后，你得给几十个 Hook 起唯一的名字，还得防着重名。
2. 自定义 Hook 难搞：你要是写个自定义 Hook，里面的 key 怎么保证不跟别人的冲突？
3. 代码太丑：到处都是字符串 ID，写起来一点都不简洁。

所以 React 选了**"约定优于配置"**。它跟你达成一个默契：只要你保证不乱排队，它就能给你提供最干净的 API。

那正确姿势是啥？

既然不能在 if 里写 Hook，碰到需要判断的情况咋办？

其实很简单：Hook 照样跑，逻辑往里挪。

1. 把判断往外移（最推荐）

Hook 永远在顶层乖乖排队，只有展示的时候才去判断。

function GoodComponent({ isLoggedIn }) {
  // ✅ 大家都出来排队，谁也别缺席
  const [name, setName] = useState('Alice'); 
  const [count, setCount] = useState(0);

  // ✅ 在 return 的时候再看要不要显摆
  return (
    <div>
      {isLoggedIn && <span>{name}</span>}
      <span>{count}</span>
    </div>
  );
}

2. 判断写在 Effect 里面

useEffect(() => {
  // ✅ Hook 本身是稳定执行的，只是里面的逻辑可以按需触发
  if (isLoggedIn) {
    console.log('偷偷干点活');
  }
}, [isLoggedIn]); 

最后一句话总结

React 的 Hooks 就像一群排队领盒饭的小朋友，必须按顺序站好。React 是闭着眼睛发饭的，谁要是敢插队或者中间溜了，后面的人领到的就不是鸡腿而是炸弹了。

---

如果你觉得这篇文章有帮助，欢迎关注我的 GitHub，下面是我的一些开源项目：

Claude Code Skills （按需加载，意图自动识别，不浪费 token，介绍文章）：

• code-review-skill - 代码审查技能，覆盖 React 19、Vue 3、TypeScript、Rust 等约 9000 行规则（详细介绍）
• 5-whys-skill - 5 Whys 根因分析，说"找根因"自动激活
• first-principles-skill - 第一性原理思考，适合架构设计和技术选型

vibe coding 原理学习：

• qwen-cli 学习网站 - 学习 qwen-cli 时整理的笔记，40+ 交互式动画演示 AI CLI 内部机制

全栈项目（适合学习现代技术栈）：

• prompt-vault - Prompt 管理器，用的都是最新的技术栈，适合用来学习了解最新的前端全栈开发范式：Next.js 15 + React 19 + tRPC 11 + Supabase 全栈示例，clone 下来配个免费 Supabase 就能跑
• chat_edit - 双模式 AI 应用（聊天+富文本编辑），Vue 3.5 + TypeScript + Vite 5 + Quill 2.0 + IndexedDB

---