💡 核心回答技巧
这个问题表面考的是规则，实际考的是 Hooks 的底层数据结构。你需要提到 “链表” 和 “调用顺序” 这两个关键词。
1. 现象描述
React 官方文档明确规定：只在最顶层使用 Hook。 如果你尝试在条件语句中写 Hook，React 会报错（或者在多次渲染间产生数据错乱）。
2. 底层原理：基于顺序的链表结构
在 React 内部，每个组件对应的 Fiber 节点上有一个 memoizedState 属性。
- 初次渲染：React 会按 Hook 出现的顺序，依次创建一个单向链表。
- 更新渲染：React 不知道你调用的是哪个
useState或useEffect，它唯一能依赖的就是调用顺序。
它会按顺序从链表中“数”出对应的状态：
- 第一次调用：取出链表第 1 个节点。
- 第二次调用：取出链表第 2 个节点。
3. 如果放在 if 语句中会发生什么？
假设你的组件有三个 Hook：A, B, C。
- 第一次渲染：执行顺序是 A -> B -> C，链表存的是
[A, B, C]。 - 第二次渲染：如果
if条件改变，导致 A 没执行。执行顺序变成了 B -> C。 - 结果：React 依然会从链表第 1 个位置开始找。它会错误地把原本属于 A 的状态赋值给 B，把原本属于 B 的状态赋值给 C。
这会导致状态完全错位，甚至引起程序崩溃。
4. 深度扩展：为什么不用 Key 来标识 Hook？
面试官可能会追问：为什么 React 不像虚拟 DOM 那样给 Hook 加个 Key？
- 性能开销：如果给每个 Hook 加 Key，会增加内存占用。
- 命名冲突：Hooks 旨在解决 Logic Reuse（逻辑复用），如果多个自定义 Hook 内部使用了相同的 Key，会产生冲突。
- 代码整洁：强制顺序一致，能让组件的逻辑流更加清晰、可预测。
🌟 总结
“Hooks 的实现本质上是一个按顺序存储的单向链表。为了保证每次渲染时，React 都能通过固定的索引找到对应的状态，必须确保 Hooks 的调用顺序在每次渲染中保持一致。因此，严禁在条件判断或循环中使用 Hook。”
