⚡ 30 秒速记

• 核心判断：Hooks 用稳定调用顺序把函数组件的多次执行与内部状态槽位对应起来
• 原理主线：围绕 「从源码调用流程看原理：Hooks 的正常」、「站在底层视角，重现 PersonalIn」、「核心机制」 建立输入、状态变化与输出之间的因果关系
• 文章范围：解析了 React Hooks 的工作原理、使用原则及其背后的机制，帮助开发者理解如何正确使用 Hooks 以及避免常见的使用误区。
• 边界与代价：条件调用会破坏槽位映射，闭包会保留某次渲染快照；严格模式重跑用于暴露副作用问题
• 工程落地：工程上把依赖数组当作数据流声明，优先消除不必要副作用并保证清理可重复执行

Hooks 依靠固定的调用顺序，把函数组件每次执行时的调用位置与对应状态关联起来。 首次渲染时，mountState 会创建 Hook 对象并按顺序组成单向链表；更新时，updateState 再沿着已有链表依次读取状态。React 不会根据 name、career 这类变量名匹配状态，只认调用位置，所以在条件语句中跳过某个 Hook，后续状态就可能错位，甚至触发“调用数量少于预期”的报错。工程上应只在 React 函数顶层调用 Hook，不要放进条件、循环或嵌套函数。

这篇文章不要按 API 清单来背。先用上面的 Mind Map 建立全局结构，再通过交互 DEMO 观察正常路径和边界路径如何改变状态；阅读正文时重点核对每一步的输入、负责执行的参与者、产生的中间状态以及最终可观察结果。遇到版本敏感结论，要把“历史实现”“当前行为”和“工程兼容策略”分开说明；遇到性能或架构取舍，则用实际指标、失败现象和验证手段支撑判断。

版本校准： 本文若分析 ReactDOM.render、旧生命周期或栈调和，应把它视为理解架构演进的历史路径。React 19 已移除 ReactDOM.render，当前客户端入口使用 createRoot；并发渲染也必须区分可中断的渲染阶段与同步提交阶段。迁移前对照 React 19 官方升级指南。

React 团队面向开发者给出了两条 React-Hooks 的使用原则，原则的内容如下：

• 只在 React 函数中调用 Hook；
• 不要在循环、条件或嵌套函数中调用 Hook。

从现象看问题：若不保证 Hooks 执行顺序，会带来什么麻烦

先来看一个小 Demo：

import React, { useState } from "react";

function PersonalInfoComponent() {
  // 集中定义变量
  let name, age, career, setName, setCareer;

  // 获取姓名状态
  [name, setName] = useState("修言");

  // 获取年龄状态
  [age] = useState("99");

  // 获取职业状态
  [career, setCareer] = useState("我是一个前端，爱吃小熊饼干");

  // 输出职业信息
  console.log("career", career);

  // 编写 UI 逻辑
  return (
    <div className="personalInfo">
      <p>姓名：{name}</p>
      <p>年龄：{age}</p>
      <p>职业：{career}</p>
      <button
        onClick={() => {
          setName("秀妍");
        }}
      >
        修改姓名
      </button>
    </div>
  );
}

export default PersonalInfoComponent;