React 教程 · 起点

React 核心心智模型

把 React 当成一台 “状态 → UI” 的纯函数机器来理解，而不是一堆要背的 API。建立这个心智模型，React 那些“反直觉”的行为会变成可预测的。

基于版本React 19.2（含 React Compiler 1.0）
阅读时间约 4 小时 · 深度长文
读者定位会 JS、React 新手
代码验证基于 React 19 语义，未逐一本机运行

·这份教程为谁而写

适合谁

  • 能写现代 JavaScript：箭头函数、解构、map/filter、Promise/async。能读懂闭包是加分项——第 3 章会把它重新讲一遍。
  • 用过 HTML/CSS，知道 DOM 是什么，用 document.querySelector 改过页面节点。
  • 写过或读过至少一个 React 组件，但说不清“为什么这里会重渲染两次”“为什么改了变量界面却没动”。

不适合谁

  • 完全没碰过 JavaScript：先过一遍 javascript.info 或 MDN 的 JS 教程，再回来。
  • 想要 Next.js / 路由 / 状态管理库的工程实战：这是心智模型教程，工程栈是另一条线。先建模型，再上框架不会亏。
  • 已经能预测 re-render 次数、闭包捕获哪一帧、effect 的执行时机：直接读 React 源码或 overreacted.io，这里的内容对你太浅。

·读完之后你能做到什么

读完，你能仅凭阅读一段 React 代码，就预测它会重渲染几次、某个闭包捕获的是哪一帧的 state、effect 会在哪个时刻以什么顺序执行——不靠打 log 试错。

这是一个 5 年经验工程师能讲清、而官方文档不会替你串起来的能力。具体到可验证的动作：

  • 判断任意一次交互会触发哪些组件重渲染，并说清“重渲染”到底改了真实 DOM 的什么、没改什么。
  • 解释 setCount(count + 1) 连写三次为什么只加 1，并写出能加 3 的正确版本。
  • 看一眼依赖数组，就说出一个 effect 会在何时重新执行、它的清理函数何时运行。
  • 对一个值，判断它该放进 state、放进 ref，还是在渲染时直接算出来。
  • 判断一段逻辑该不该写成 effect——多数情况下不该。

一句话本质

React 的核心：UI 是 state 的纯函数。你不命令式地去改 DOM，而是声明“当前 state 下 UI 该长什么样”；React 把上一帧和这一帧 diff，最小化地更新真实 DOM。

两个支撑性的认知转折贯穿全篇：state 是快照，不是活变量（第 3 章）；useEffect 是“与外部世界同步”，不是生命周期钩子（第 4 章）。这三点一旦内化，几乎所有反直觉行为都会变得可预测。

现状速览 · 截至 2026-06

稳定：React 19.0（2024-12）确立了当前模型；并发特性 useTransition / useDeferredValue 已稳定。这份教程教的就是这套稳定核心。

正在变：React Compiler 1.0 于 2025-10 正式 GA——新代码基本不再手写 useMemo / useCallback / React.memo，编译器自动做记忆化；React 19.2（2025-10）加入 <Activity>、useEffectEvent。第 5 章会专门讲这对“何时手动优化”的影响。

已被取代：forwardRef、函数组件上的 propTypes/defaultProps、字符串 ref、旧 Context、class 生命周期框架——都已弃用或移除。Server Components 已走出 Next.js（React Router v7 起也支持）。本教程默认教函数组件 + Hook，不教 class。

读之前 · 关于“流畅感”的警告

这份教程会刻意在几处放慢、设置预测题和“刚好够不着”的挑战。原因是：读得顺 ≠ 学会了。读的时候若冒出这三句自我感觉，请警惕——它们往往是错觉：

“我读得很顺”——多半是熟悉感，不是掌握。换个场景就卡。
“我做题很快”——多半是题型眼熟，没真正调用到底层模型。
“我没卡壳”——多半是没碰到模型里真正硬的地方。卡壳是学习在发生，不是你笨。

对策只有一个：每章末的 self-check 先合上教程自己答，再展开对照。

·概念地图

下面这张图是整份教程的骨架。每个后续细节都会挂回它的某个节点。先扫一眼，不必现在理解每条边。

UI = f(state) 声明式 · 纯函数 组件 Component props 的纯函数 状态 State 一帧的快照 Props 输入 · 只读 渲染 Render 触发→渲染→提交 Hook 按调用顺序 Effect 与外部同步 是那个 f 输入·会变 输入·只读 state 变→重算 给 f 记忆 f 之外
图 0.1React 核心概念地图。注意三点：① 中心的 UI = f(state) 是所有细节挂靠的唯一主轴；② Props 与 State 是这个 f 仅有的两类输入——一类只读、一类会变；③ Effect 用虚线连接，因为它在 f 之外——它不是渲染的一部分，是逃生舱。

·三条学习路径

按目的选一条，不必每条边都啃。

只想建立正确的心智模型（最常见）
01 → 02 → 03 → 04 ——可暂时跳过 05 的前沿段，先把核心打牢。
要做技术选型 / 对比 Vue·Svelte
01 → 02 → 05 ——重点在第 5 章的备选方案对比表与 signals（细粒度响应式）对比。
要能带读 / review 别人的 React 代码
01 → 03 → 04 → 06 ——直奔 state / effect / 闭包陷阱，再用第 6 章的判别题校准。

·目录

01心智模型 · 声明式 vs 命令式、UI=f(state)、组件即纯函数、单向数据流 02渲染机制 · 触发→渲染→提交三步、虚拟 DOM 与协调、key、re-render 到底是什么 03状态 · state 是快照、归 React 所有、批处理、更新队列、不可变性 04副作用与 Hook · Hook 规则的底层、useRef、useEffect=同步、依赖数组、你可能不需要 Effect 05原理与前沿 · 设计权衡（备选方案表）、React 19 / Compiler / Server Components 06自测 · 三层题库 + 跨章判别场景 + 亲手画图

·学完之后往哪走

  • 状态管理库（Zustand / Jotai / Redux）：看清它们在“state 归 React 持有”之上加了什么、解决了哪种跨组件共享。
  • React Compiler 深入：自动记忆化的边界在哪、什么时候它帮不上忙、逃生舱怎么留。
  • Server Components：把“组件是纯函数”延伸到服务端／客户端的边界划分。
  • 并发特性（useTransition / Suspense）：把“渲染可以被打断”从原理变成手里的工具。
  • 性能调优：从“理解 re-render”进到“测量并消除多余 re-render”。