第2章 React 核心概念

第 2 章 · React 核心概念

章节摘要：React 入门之后，真正区分「会写」与「懂 React」的，是核心概念这一层。本章从虚拟 DOM 与 Diff 算法讲起——这是 React 性能的秘密；再到生命周期与 Hooks——这是组件行为的地图；然后覆盖事件处理、条件与列表渲染、Context、Refs 六个主题。读完你会明白 key 为什么重要、闭包为什么坑、Context 和 Redux 的分工在哪，写起代码来不再靠试错。

这一章是全书信息密度最高的章节。第 1 章教你「怎么写出能跑的组件」，本章回答「组件为什么这样跑」。六个主题看似独立，实则是同一个心智模型的不同侧面：虚拟 DOM 讲 React 怎么渲染，生命周期讲副作用放哪，事件讲交互入口，条件与列表讲数据到界面的映射，Context 讲跨层共享，Refs 讲逃离声明式的后门。把这六块拼起来，你对 React 的认知就从「会用 API」升级为「理解机制」——遇到奇怪现象不再靠猜，而是能推断出「这是哪个机制在起作用」。

学习目标

阅读完本章，你应当能够：

1. 解释虚拟 DOM 的工作流程与 Diff 算法的比较策略，说明 key 的作用与选择原则
2. 用 useState、useEffect、useContext、useRef 解决函数组件的状态与副作用问题，避开闭包陷阱
3. 区分合成事件与原生事件，正确处理受控组件与非受控组件
4. 灵活运用条件渲染的四种写法与列表渲染的 key 策略
5. 判断何时该用 Context，何时该引入状态管理库
6. 理解 Refs 的三种创建方式与使用边界，知道何时不该用 Ref

读完本章后建议做一次「自我测验」：不看资料，用一句话解释虚拟 DOM 为什么要存在、key 为什么不能乱用、useEffect 的依赖数组在控制什么。这三句话如果能说清楚，本章就真正学到位了——它们也是面试里最常见的三个 React 基础题。

核心概念速览

六个主题的能力定位

这张图把六个主题按「渲染 → 交互 → 共享」三条线归类，与 mermaid 全景图是互补视角——那张看「章节顺序」，这张看「能力归属」。读全章后回看这张图，六个主题就不再是六个孤立知识点，而是「同一个 React 心智模型的不同侧面」。

这张全景图按「机制 → 组件 → 交互 → 展示 → 共享 → 后门」的递进关系排列。浏览一遍先建立印象：每一节解决什么问题、依赖前面哪一节。读完全章再回来看这张图，它应该能帮你把六个主题串成一条完整的知识链。

金句：虚拟 DOM 是「把界面当数据算」，Hooks 是「把逻辑当函数写」——这两件事想通，React 的核心概念就通了。

这句金句拆开看：虚拟 DOM 把界面抽象成可比较的 JavaScript 对象，于是「更新界面」变成了「比较对象差异」——这是把界面当数据处理；Hooks 让函数组件拥有状态与副作用，于是「逻辑复用」变成了「复用函数」——这是把逻辑当函数写。两条主线贯穿本章所有主题，也是 React 相对传统命令式 UI 开发最根本的两个思想转变。

子章节导航

2.1 虚拟 DOM 与 Diff 算法

虚拟 DOM 是真实 DOM 的内存表示，Diff 算法通过三层比较（Tree、Component、Element）找出差异最小化更新。key 的作用在这里彻底讲清——它是全章第一个「知道机制才敢放心用」的知识点。

2.2 生命周期与 Hooks

类组件的生命周期方法（constructor、componentDidMount、componentWillUnmount 等）与函数组件的 Hooks（useState、useEffect 等）如何对应，闭包陷阱怎么避开。这一节是全章的重点，第 1.4 节写过函数组件后，本节补上机制层面的理解。

2.3 事件处理

React 合成事件系统、事件委托、bind 与箭头函数、事件对象、受控与非受控组件。这是让界面「活起来」的一节，也是和原生 DOM 事件差异最集中的地方。

2.4 条件渲染与列表渲染

if/else、三元、逻辑与、map 列表、key 的唯一性与稳定性、动态表格实战。这是数据变成界面的两种核心映射，占比最高的日常渲染逻辑。

2.5 Context 与跨层状态

prop drilling 问题的解法：createContext、Provider、Consumer、useContext，以及何时该升级到状态管理库。理解它的广播式订阅模型，是判断「要不要换状态库」的前提。

2.6 Refs 与 DOM 访问

createRef、useRef、回调 Ref、forwardRef、useImperativeHandle，聚焦输入框、集成第三方库等场景。它是「声明式世界的后门」——能表达为状态变化的事别用它，必须直连 DOM 时才打开这扇门。

子章节之间的逻辑关系

2.1 渲染怎么发生（虚拟DOM/Diff）──► 2.2 组件怎么活（生命周期/Hooks）
     │                                    │
     ▼                                    ▼
2.3 用户怎么交互（事件）──► 2.4 界面怎么展示（条件/列表）
     │                                    │
     ▼                                    ▼
2.5 数据怎么共享（Context）──► 2.6 DOM 怎么直连（Refs）
​

第 2.1 节讲「渲染机制」，是理解一切行为的地基；第 2.2 节讲「组件生命周期」，回答副作用代码该放哪。事件与渲染是用户交互的两个面，条件与列表是数据到界面的两种映射。Context 解决跨层数据共享，Refs 提供逃离声明式世界的后门。六节前后衔接，共同构成 React 的核心心智模型。

换个角度看这张图，它其实回答了一个完整的问题链条：界面怎么被画出来（2.1）→ 组件怎么活过一生（2.2）→ 用户怎么和它交互（2.3）→ 数据怎么变成可见内容（2.4）→ 数据怎么跨层流动（2.5）→ 怎么在特殊场景直连 DOM（2.6）。沿着这条链走，每一节都为下一节提供上下文——比如没有 2.1 的 key 原理，2.4 的列表 key 建议就成了「背规则」；没有 2.2 的闭包陷阱，2.3 的连续点击错位就难理解。建议至少把 2.1 和 2.2 细读，其余几节可以按需精读。

前置知识与后续延伸

• 前置：第 1 章的函数组件、props/state、JSX 语法
• 为后续铺垫：Context 与状态管理库的对比在第 3.3 节、第 4.2 节展开；虚拟 DOM 与 Diff 是第 3.1 节性能优化的理论前提；Refs 在表单（第 3.4 节）中再次出现；生命周期与错误边界（第 3.8 节）直接相关
• 阅读建议：本章六节建议按顺序读，但不必一次读完。虚拟 DOM 与 Hooks 是「必读」优先级——它们是后续一切的基础；事件、条件与列表可以穿插在写代码时查阅；Context 与 Refs 在遇到对应问题时精读，效果更好