软件技术 · 知识点深化 · 前端
React 核心原理：虚拟 DOM、Diff、Hooks、Fiber
React 不是直接操作真实 DOM，而是先在内存里维护一棵虚拟 DOM 树，状态变化时做 Diff 算出最小操作批量更新真实 DOM。Hooks 让函数组件有状态，Fiber 把渲染切片可中断。这一页讲透前端最热门框架的内核。
① 怎么学（4 步走，约 70 分钟）
先建立直觉再抠细节，按这四步走最稳：
1看图建立直觉（10 分钟）
读②③：先在脑子里画出本课核心结构图。
2记完整体系（15 分钟）
读④：把对比表和公式看懂，不要急着背。
3跟例题走一遍（20 分钟）
精读⑤：看三个例题怎么用知识点解题。
4刷题纠错（剩余时间）
做⑦⑩，错题回⑥诊断。
本课小目标学完你要能：① 解释虚拟 DOM 为什么快；② 说出 Diff 策略；③ 解释 Hooks 规则；④ 理解 Fiber 时间切片。
② 一图看懂：React 核心全景
读法：中心是本课主题，四条分支展开核心维度，下方是典型应用与高频易错点。
③ 本质直觉：虚拟 DOM 就是"草稿纸"
直接改真实 DOM 很慢（浏览器要重排重绘）。React 先在内存里用 JS 对象表示一棵 DOM 树（虚拟 DOM）。状态变了，新树和旧树做 Diff，算出最小改动，批量更新真实 DOM。
Diff 策略：同层比较（不跨层移动）；不同类型直接替换；列表用 key 标识移动复用。
Hooks：useState 让函数组件有状态；useEffect 处理副作用；useMemo/useCallback 缓存。规则：只能在顶层调，不能在 if/循环里调，因为 React 靠调用顺序对应 state。
Fiber：React16 后把渲染拆成小片（时间切片），每片执行完看有没有高优任务，可中断先处理高优，避免掉帧。
key 的作用列表 Diff 靠 key 识别哪些项移动了，避免重新创建。用 index 当 key 在顺序变化时会出 bug。
④ 完整知识体系
核心概念对比
| 概念 | 作用 | 注意 |
|---|
| 虚拟 DOM | JS 对象描述 UI | 减少真实 DOM 操作 |
| Diff | 新旧树对比 | 同层比较+key |
| useState | 函数组件状态 | 异步批处理 |
| useEffect | 副作用 | 依赖数组控制执行 |
| useMemo/useCallback | 缓存计算/函数 | 别滥用 |
| Fiber | 可中断渲染 | 时间切片 |
Diff 三种策略Tree Diff 同层 + Component Diff 类型不同替换 + Element Diff key 复用
useEffect 依赖[] 只跑一次；[a] a 变跑；无依赖每次渲染都跑
为什么 Hooks 不能条件调用
React 用链表按调用顺序存 state。if 里调 Hook 会打乱顺序，下次渲染对应错 state。
⑤ 应用场景与例题
例1 为什么列表要用 key？
用 index 当 key 有什么问题？
列表插入/删除时 index 会变，React 误判组件身份导致状态错乱。用稳定 id 作 key。
例2 useEffect 什么时候执行？
首次渲染后执行；依赖数组变化后执行；无依赖每次渲染后执行。return 的清理函数在下次执行前和卸载时跑。
例3 虚拟 DOM 一定比直接操作快吗？
不一定。首次渲染虚拟 DOM 有创建开销。优势在频繁小更新：Diff 批量更新比手动操作 DOM 快。
做题心法React 把命令式 DOM 变成声明式数据驱动，框架算最小更新。
⑥ 高频错误诊断（4 条）
错误1：在 if 里调 useState违反 Hooks 规则，顺序错乱。
错误2：列表用 index 作 key顺序变化时状态错乱。
错误3：useEffect 漏写依赖闭包拿到旧值。
错误4：过度 useMemo本身有开销，不是所有计算都要缓存。
⑦ 考点真题演练（5 题）
考点分布
| 考法 | 出题形式 | 应对 |
|---|
| VDOM | 问为什么快 | 减少真实DOM操作 |
| Diff | 问 key 作用 | 识别移动复用 |
| Hooks | 问规则 | 顶层调用顺序固定 |
| Fiber | 问解决什么 | 长任务可中断 |
真题basic1. React 中列表渲染推荐用什么作 key？
真题mid2. Hooks 不能在什么地方调用？
真题mid3. useEffect 传入 [] 依赖数组意味着？
真题hard4. Fiber 架构主要解决什么问题？
真题hard5. 虚拟 DOM 相比直接操作 DOM 的优势？
⑧ 必背知识点卡
虚拟 DOM：JS 对象描述 UI
Diff：同层+类型+key
key：稳定 id，别用 index
Hooks：顶层调用，顺序固定
useEffect：依赖数组控制执行
Fiber：时间切片可中断
批处理：state 更新合并一次渲染
⑨ 动手输出：解释 React 状态更新流程
场景：点击按钮改 state，页面怎么更新？
① 触发：setCount 更新状态。
② 渲染：组件重新执行生成新 VDOM。
③ Diff：新旧 VDOM 对比找差异。
④ 提交：最小改动批量更新真实 DOM。
⑤ Hooks：按顺序对应 state 和 effect。
口述思路数据变了重新算 VDOM，框架帮你算最小改动。
⑩ 分层练习（基础 + 中档 + 拔高）
▍基础 6 题
基础1虚拟 DOM 是什么？
JS 对象描述真实 DOM。
基础2Diff 同层比较什么意思？
不跨层移动节点。
基础3key 的作用？
列表 Diff 识别项。
基础5useEffect [] 什么时候跑？
挂载后一次。
▍中档 5 题
中档1为什么用 index 当 key 有问题？
插入删除时 index 变，状态错乱。
中档2useMemo 和 useCallback 区别？
memo 缓存值，callback 缓存函数。
中档3state 更新是同步还是异步？
React 18 自动批处理，异步。
中档4useEffect 清理函数什么时候跑？
下次 effect 前和卸载时。
中档5Component Diff 不同类型？
直接替换整棵子树。
▍拔高 5 题
拔高1Fiber 时间切片原理？
把渲染拆成单元，每单元检查是否让出主线程。
拔高2React 18 并发特性？
useTransition 标记非紧急更新可中断。
拔高3为什么虚拟 DOM 不是银弹？
首次渲染有开销，小项目直接 DOM 更快。
拔高4key 为什么不能用随机数？
每次渲染 key 变，导致节点重建。
拔高5useRef 和 useState 区别？
ref 变化不触发渲染，state 变化触发。
⑪ 记忆口诀 + 7 天复习计划
三句口诀① VDOM 是草稿，Diff 找差异最小改。② Hooks 顶层调顺序，key 稳定别用 index。③ Fiber 切片可中断，批处理一次渲染。
| 天 | 任务 | 自检 |
|---|
| 第 1 天 | 读②③，画 VDOM Diff 流程 | 五步说清 |
| 第 2 天 | 背核心表 + 基础 6 题 | 概念记住 |
| 第 3 天 | 做中档 5 题，写一个自定义 Hook | 代码能跑 |
| 第 4 天 | 做拔高 5 题，讲 Fiber | 时间切片 |
| 第 5 天 | 做⑦真题 5 题 | 限时每题 2 分钟 |
| 第 6-7 天 | 合书口述 Hooks 规则 | 不看资料 |
← 返回软件技术总览