React Hooks 设计动机与工作模式|原理篇 | 前端进阶之旅

⚡ 30 秒速记

核心判断：Hooks 用稳定调用顺序把函数组件的多次执行与内部状态槽位对应起来
原理主线：围绕「React-Hooks 设计动机初探」、「重新理解类组件：包裹在面向对象思想下的“」、「深入理解函数组件：呼应 React 设计」建立输入、状态变化与输出之间的因果关系
文章范围：解析了React Hooks的设计动机、工作原理及其对类组件和函数组件开发模式的影响，帮助开发者理解Hooks如何简化状态管理、复用逻辑和优化组件结构，是学习现代React开发不可错过的原理指南。
边界与代价：条件调用会破坏槽位映射，闭包会保留某次渲染快照；严格模式重跑用于暴露副作用问题
工程落地：工程上把依赖数组当作数据流声明，优先消除不必要副作用并保证清理可重复执行

Hooks 让函数组件拥有状态和副作用能力，同时依靠稳定的调用顺序把每次渲染与内部状态对应起来。 函数组件每次渲染都是一次新的函数调用，所以回调会捕获当次渲染中的 props 和状态，而不是像类组件那样通过可变的 this 读取最新值。useState 管理单个状态，useEffect 承接订阅、请求和操作 DOM 等副作用。异步回调要留意闭包捕获的旧值，Hook 也不能放进条件分支破坏调用顺序。

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

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

# React-Hooks 设计动机初探

# 何谓类组件（Class Component）

所谓类组件，就是基于 ES6 Class 这种写法，通过继承 React.Component 得来的 React 组件。以下是一个典型的类组件：

class DemoClass extends React.Component {
 
  // 初始化类组件的 state
  state = {
    text: ""
  };
  // 编写生命周期方法 didMount
  componentDidMount() {
    // 省略业务逻辑
  }
  // 编写自定义的实例方法
  changeText = (newText) => {
    // 更新 state
    this.setState({
      text: newText
    });
  };
  // 编写生命周期方法 render
  render() {
    return (
      <div className="demoClass">
        <p>{this.state.text}</p>
        <button onClick={this.changeText}>点我修改</button>
      </div>
    );
  }
}