React 从 0 到 1
沿 UI = f(state) 展开：从脚手架、组件组合、JSX 与快照，到 Hooks、请求缓存、状态管理、路由、错误边界与 Suspense，再到 Fiber、并发、测试与 SSR。每节包含机制、代码与自测。
读完之后你能
- 独立搭出带路由、请求缓存与测试的应用
- 用 UI = f(state) 解释渲染、快照与闭包
- 判断重渲染来源并选择优化手段
- 说清 Hooks、Fiber 与 Server Component 的边界
- 用 AI 产出候选实现，并用四个检查面完成评审
适合谁
- 会 JavaScript、想系统学 React 的前端
- 准备 React 面试、需要补并发与工程链路的开发者
读前准备
- JavaScript 基础：作用域、闭包、Promise、模块
- HTML 与 CSS 基础，会用 npm 与命令行
目录
建议按顺序阅读，每节末尾可跳转到对应题目自测
模块一 · 起步与渲染
0 / 5- 0118 分钟
起步：用 Vite 跑通第一个 React 应用
从装环境到跑起第一个组件，讲清 Vite 与 Next.js 的选择、入口文件做了什么、四个脚本的差异，以及 Fast Refresh 与 StrictMode 的实际影响。
- 0219 分钟
组件与组合：props、children 与拆分边界
组件是 React 的最小复用单位。这一节讲清 props 的约束、children 与具名插槽的用法、组合优于继承的落地方式，以及组件拆分与重挂载的边界。
- 0317 分钟
React 的心智模型：UI = f(state)
把 React 放回它解决的问题里：视图是状态的函数。这一节讲清声明式的三个推论、一次渲染的输入输出，以及状态与视图不同步的三种原因。
- 0417 分钟
JSX、状态与事件：先把交互跑通
JSX 只是语法糖，状态是快照，事件是闭包。这一节把这三件事拆开讲，并给出受控组件、列表 key 与批处理的正确用法。
- 0517 分钟
一次渲染到底发生了什么：render 与 commit
setState 之后并不是立刻改 DOM。这一节拆开 render 与 commit 两个阶段，解释双缓冲、StrictMode 双调用与副作用时机。
模块二 · Hooks 与数据
0 / 5- 0617 分钟
Hooks 为什么必须按顺序调用
Hooks 不是魔法，而是挂在 Fiber 上的链表。这一节讲清调用规则、依赖比较、闭包陷阱，以及自定义 Hook 的边界。
- 0718 分钟
副作用与数据：从 useEffect 到请求缓存
useEffect 的定位是"同步外部系统"，不是"生命周期钩子"。这一节讲清依赖与清理、请求竞态、缓存去重，以及什么时候该用数据请求库。
- 0819 分钟
请求与缓存：把服务端状态交给 TanStack Query
服务端状态和客户端状态不是一类东西。这一节讲清 queryKey、staleTime 与失效机制，用乐观更新和分页把列表页面写对，并说明什么时候不该引入请求库。
- 0919 分钟
错误边界、lazy 与 Suspense：让失败可控
渲染错误和接口错误不是一类问题。这一节讲清错误边界能捕获什么、代码分割的加载态怎么不闪烁，以及 Suspense 的边界该放在哪一层。
- 1020 分钟
状态管理：useReducer、Context 与外部 store 的分工
状态管理不是"选一个库"，而是把状态放到正确的层级。这一节讲清局部状态、Context 与 Zustand/Redux Toolkit 的边界，以及选择器如何避免全量重渲染。
模块三 · 路由、测试与服务端
0 / 3- 1119 分钟
路由：嵌套、鉴权与按页懒加载
路由是应用的骨架。这一节讲清路由表配置、嵌套布局与 Outlet、两种鉴权写法、懒加载与 errorElement，以及 URL 该怎么设计。
- 1219 分钟
测试：Vitest、RTL 与 Playwright 的分工
测试的价值不在覆盖率，而在"改错时能不能拦住"。这一节讲清 RTL 的查询哲学、Hook 测试与 Mock 边界，以及让 E2E 不摇的四个前提。
- 1320 分钟
SSR、Next.js 与 React 19：服务端与客户端的分界线
首屏快不快，取决于哪些工作放在了服务端。这一节讲清 CSR/SSR/SSG/ISR 的成本、水合失败的根因、Server 与 Client Component 的边界，以及 React 19 的 Actions。