React Learning
8 notes in this collection.
这个主题用于整理我对 React 的系统学习：不满足于「会用」，而是把每个概念追到它的设计动机和实现原理。
我想解决的问题
学习 React 的目标不是「会写 JSX」——那是最基本的一层。真正的学习路径分三层：
- 会用层：组件怎么写、状态怎么管、props 怎么传、事件怎么绑
- 理解层：Virtual DOM 为什么被发明、Fiber 架构解决了什么问题、Hooks 为什么取代了 Class
- 工程层：大型应用的状态管理怎么选、性能瓶颈怎么排查、测试策略怎么定
学习路径
- 第一阶段：核心概念 — 组件、JSX、props、state、事件处理、条件渲染、列表渲染
- 第二阶段：Hooks 深入 — useState、useEffect、useRef、useMemo、useCallback、自定义 Hooks
- 第三阶段：底层机制 — Virtual DOM diff 算法、Fiber 调和过程、Hooks 的链表存储
- 第四阶段：工程实践 — 状态管理（Context / Zustand）、性能优化（memo / useMemo）、测试（组件测试 / Hook 测试）
资源
React 应用中的数据流：从本地状态到服务器数据
前面的笔记讲了 React 的组件、State、Hooks 和渲染机制——都是「零件」层面的知识。这篇把视角升到「应用」层面：一个真实的 React 应用里，数据从哪来、怎么分类、怎么流转。用 5 张架构图覆盖：三种状态的分类（本地/共享/服务器）、数据请求的完整链路、Loading/Error/Empty/Success 四态机、表单的输入→校验→提交流程、以及状态管理工具的选型阶梯。核心观点：不是所有数据都该进 Context 或全局 Store。
2026-07-22React 组件：拆分、组合和复用 UI 的基本单元
组件是 React 最小的建筑单元。这篇笔记从「为什么需要组件」出发，拆解组件的本质（函数 + props → JSX）、组件的组合模式（children、组合 vs 继承）、组件的渲染规则（纯函数、props 不变则输出不变）、以及 5 种日常高频组件模式（受控/非受控、组合组件、render props、HOC、Slot）。目标是：不是为了学 API，而是为了建立「如何拆组件」的判断力。
2026-07-21React 数据流：组件之间怎样传递数据
React 组件树里，数据怎么从 A 组件传到 B 组件？这篇笔记用 5 张图覆盖 5 种核心模式：Props（父→子单向绑定）、Children（插槽式组合）、单向数据流（数据向下、事件向上）、状态提升（兄弟组件同步）、受控与非受控（谁握着方向盘）。每种模式都附带代码示例和判断标准，读完能回答「这个状态应该放在哪、通过什么方式传」。
2026-07-21声明式与命令式：React 和原生 DOM 的思维方式对比
React 最关键的范式转变是「声明式」取代「命令式」。这篇笔记用同一个功能（计数器、Todo List、搜索过滤）在原生 JS DOM 和 React 中的两种实现做并排对比，拆解声明式的三个核心优势（可预测、自描述、易测试）和一个真实代价（diff 开销），最后给出判断框架：什么时候声明式帮你省事，什么时候命令式更直接。
2026-07-21React Hooks 工具箱：从记忆到副作用的完整地图
Hooks 是 React 16.8 之后组件逻辑的核心载体。这篇笔记先给一张总图（5 大类 10 个 Hooks 的用途和关系），然后用 9 张图逐一拆解：useState（记事本）、useReducer（调度中心）、useContext（广播塔）、useReducer+Context（总部系统）、useRef（储物柜）、useEffect（外部世界同步器）、「你可能不需要 Effect」判断树、useMemo/useCallback（工厂缓存）、Custom Hook（工具包）。读完你能回答「这个场景该用哪个 Hook」。
2026-07-21React 的心智模型：UI 是状态的函数
React 最核心的心智模型只有一句话：UI = f(state)。理解了这句话，就理解了为什么 React 要发明组件、JSX、Virtual DOM、单向数据流这些概念。这篇笔记从「jQuery 时代的 UI 开发痛点」出发，推导出 React 的设计动机，然后拆解这个心智模型的三层含义。
2026-07-21React 渲染机制：从 setState 到 DOM 更新
setState 之后 React 到底做了什么？这篇笔记用 6 张图拆解 React 渲染的全链路：Trigger（触发）→ Render（计算）→ Commit（写入）三站地铁、Virtual DOM 蓝图与真实 DOM 建筑、Reconciliation 找不同游戏、Key 的停车位类比（以及 key=index 为什么会导致状态错位）、State 保存与重置的规则（同类型+同位置→保留，否则→重置）。读完你能解释 React 为什么快、为什么 key 不能乱给、以及 state 什么时候会被意外重置。
2026-07-21React State 与页面交互：从事件到状态更新
State 是 React 组件最核心的概念——它是组件用来「记住」交互信息的机制。这篇笔记用 6 张图覆盖 State 的全链路：事件触发（门铃）→ setState 通知重渲染（不等于直接修改变量）→ 渲染快照（每次渲染的 state 是常量）→ 更新队列（批量处理的原理）→ 不可变更新（为什么要用展开运算符而不是直接赋值）。读完你不仅会用 useState，还能解释闭包陷阱和批量更新的底层原因。
2026-07-21