React Hooks 为什么不能放在条件判断和循环里？调用顺序为什么重要？

知识点详解：用两次渲染，把“顺序”看清楚

第一次调用完，第二次怎样找到原来的状态？

先用一个简化模型理解。假设组件依次调用两个 useState，一个保存名字，一个保存年龄。

第一次渲染，React 为这两个调用分别建立相应状态。下一次渲染时，它需要知道当前第一个调用对应名字，第二个调用对应年龄。

真实 React 的实现不是一个全局数组，但“按稳定调用顺序关联状态”这个教学模型，可以说明规则为什么重要。不要把示意图里的编号误认为公开 API 或完整源码布局。

跳过中间一个，后面的对应关系就变了

现在在两个调用之间加入一个条件 useState，保存临时备注。

当条件为 true，调用顺序是名字、备注、年龄。下一次条件变成 false，调用顺序只剩名字、年龄。

这样一来，当前位置上的调用和上一次不再一致。React 可能报告 Hook 数量或顺序相关错误。规则不是让你等出现错误后再修，而是要求代码从一开始就保持稳定。

提前 return 也一样。第一次没有返回，执行了后面的 Hook；第二次在前面返回，后面的 Hook 就被跳过。虽然 Hook 没写在 if 的大括号里，仍然受条件控制。

有条件的需求，应该把条件放在哪里？

假设组件只在 enabled 时连接外部服务。

不是在 enabled 为 true 时才调用 useEffect，而是每次都调用 useEffect，在回调里判断 enabled；不需要连接时直接结束，需要时建立连接，并返回清理函数。

条件决定的是 Effect 做不做事，不是这个 Hook 本轮存不存在。

另一个办法是拆组件：父组件决定子组件是否出现，子组件内部按稳定顺序调用自己的 Hook。每个组件有自己的状态关联，而不是把子组件的 Hook 插进父组件的条件分支。

这也是列表场景的常见处理方式。不要在 map 回调里直接调用 useState；让 map 返回条目组件，由条目组件管理自己的状态，并给它稳定的 key。

循环次数永远固定，也不建议绕过规则

规则需要工具、代码维护者和后续修改都能检查。把“现在恰好固定三次”作为循环调用的理由，会让未来修改很容易破坏假设。

因此常规 Hook 仍按官方调用规则写在顶层。自定义 Hook 也不能隐藏条件调用：封装起来并没有免除内部顺序要求。

本题解释 React 组件机制；Python 没有同一套组件 Hook 运行协议，不编造双语言 React 实现。

为什么 use 可以例外？

React 的 use API 支持读取 Promise 或 Context 等资源，官方明确允许它出现在条件和循环里。它不遵循常规 Hook 完全相同的顺序限制。

但它仍有自己的限制：只能在组件或 Hook 内调用，不能用 try/catch 把它包起来。use 文档给出了这些区别。

所以答题时先解释常规 Hook，再单独补这个例外。不能反过来说“所有 Hook 都可以条件调用了”。

面试官继续追问

把 Hook 移进一个普通函数，再在 if 里调用，行不行？

不行。它最终仍然是条件调用，而且常规 Hook 只能从 React 组件或自定义 Hook 中调用。改变函数位置并没有改变执行条件。

自定义 Hook 可以根据参数少调用一次 useState 吗？

不可以。可以让某次状态更新不发生，也可以让 Effect 的工作不发生，但常规 Hook 的调用本身仍要稳定。

怎么在开发时发现问题？

使用官方推荐的 eslint-plugin-react-hooks 规则，并测试开关切换、提前返回和列表变化。只测试首次渲染，容易漏掉前后两次不一致的问题。

面试速记卡

• 常规 Hook：组件或自定义 Hook 顶层调用，保持顺序稳定。
• 提前 return：也可能跳过 Hook，不能只检查 if 大括号。
• 条件需求：条件放进工作逻辑，或拆成独立组件。
• 列表状态：由条目组件管理，不在循环里直接调用 Hook。
• use API：允许条件与循环，但仍有自己的调用限制。