跳到主要内容

使用Hooks的两条重要规则

面试速答​

  • 以下内容以 React 18 为准。
  • Hooks 有两条经典规则：
    1. 只在最顶层调用，不要在循环、条件、嵌套函数中调用
    2. 只在 React 函数组件或自定义 Hook 中调用
  • 这两条规则的本质都是为了保证 React 能稳定定位每个 Hook 的状态槽位。

第一条：只在最顶层调用​

错误写法：

if (visible) {
  const [count, setCount] = useState(0)
}

为什么不行？

因为 visible 一旦变化，Hook 调用顺序就会变化，React 后面拿状态会错位。

正确做法通常是：

const [count, setCount] = useState(0)

if (!visible) {
  return null
}

也就是“条件写在 Hook 后面”，而不是“让 Hook 出现在条件里”。

第二条：只在 React 函数里调用​

合法位置：

  • 函数组件
  • 自定义 Hook

不合法位置：

  • 普通工具函数
  • 类组件方法
  • 事件回调内部临时新建 Hook

因为 Hook 依赖的是 React 渲染过程中的调用上下文，脱离这个上下文就没有意义。

标准答法​

问：为什么 Hooks 有这两条规则？​

答：因为 React 需要依赖固定调用顺序和固定调用上下文来把每次 Hook 调用映射到正确的内部状态节点。如果顺序和上下文不稳定，状态就会错乱。

易错点​

  • 只会背规则，不知道底层原因。
  • 认为“偶尔在条件里用一次也没关系”。
  • 在普通函数里调用 Hook，希望复用逻辑。

速记要点​

  • 规则 1：顶层调用，顺序固定。
  • 规则 2：只在 React 组件或自定义 Hook 中调用。
  • 根因：React 依赖调用顺序定位状态。