CoderPath

React 学习路线 ​

React 的难点不在 Hook 数量，而在于能否把 UI 描述、状态变化、外部同步和宿主框架职责 分开。全书从一个组件怎样描述界面开始，沿着身份、状态、Effect、并发更新和数据边界逐层推进，最后落到测试、性能与发布。正文入口见 React 系统课程。

阅读起点 ​

开始前应能读写 JavaScript 模块、函数、对象与数组方法，理解 Promise 和浏览器事件。若这些概念还不稳定，先完成 JavaScript 学习路线 中的值与控制、函数与作用域、异步和浏览器章节。

示例基线是 React 19 稳定版和现代浏览器。第一次运行可用 Vite 创建 React 项目，再把正文标为 App.jsx 的完整示例放进 src/App.jsx。课程只在确有必要时引入路由或测试工具；出现这类依赖时，正文会明确安装方式和它属于哪一层。

全书顺序 ​

先用事件和表单建立状态的直观认识，再观察列表身份与状态快照。第三章把共享状态和引用身份讲清，第四章进入 DOM 与外部系统，接着通过维护篇把类实例、资源和错误恢复补成连续知识链，第五、六章处理等待和异步交互。第七章继续追踪 URL、缓存与服务端生成的界面，最后用第八章的测试和测量核对行为。每章的小实验聚焦知识本身，可按同一顺序连续学习。

第一章：从 JSX 到稳定的组件身份 ​

先学会把界面拆成纯粹的组件描述，再看数据如何通过 props 流动。列表与表单把“元素长得一样”和“React 认为它们是同一个实例”的差别暴露出来，为后续状态保留打基础。

  1. JSX、组件与 Props
  2. 事件与受控表单
  3. 列表、key 与状态身份

第二章：状态快照、更新队列与结构 ​

事件处理器读到的是某次渲染的快照，更新请求则进入队列。理解这条时间线后，再学习怎样更新对象和数组、怎样避免冗余状态，以及组件位置与 key 为什么会决定状态保留或重置。

  1. 快照、队列与批处理
  2. 对象与数组的不可变更新
  3. 状态结构与保留

第三章：让状态变化拥有清楚的边界 ​

当多个事件会改变同一组状态时，用 reducer 把“发生了什么”和“状态怎样变化”分开；当远处组件需要读取它时，再引入 Context。接着比较自定义 Hook 与外部 store，最后追踪对象和函数的引用身份，为跳过重复渲染建立前提。

  1. 从状态到 Reducer
  2. Context 的边界
  3. 自定义 Hook 与外部 Store
  4. 引用身份与记忆化

第四章：Effect 只负责外部同步 ​

先删除本可在渲染或事件中完成的 Effect，再处理真正的外部系统：连接、订阅、请求与 DOM。清理函数不是“卸载回调”的别名，而是上一轮同步结束、下一轮同步开始之间的对称操作。

  1. 不需要 Effect 的情况
  2. 生命周期、清理与竞态
  3. Ref 与 DOM 边界
  4. 布局测量与命令式句柄
  5. Portal 与可访问标识

类组件维护篇：从实例到迁移 ​

现代函数组件仍是新代码主线；本篇在第四章后连续学习类实例、更新与资源协议，为下一章的错误边界建立前置。类组件在React19仍受支持，维护已有实现与升级React版本是两项不同工作。

  1. 类实例、this 与 setState 队列
  2. 挂载、更新与卸载：资源归谁所有
  3. 更新跳过、PureComponent 与提交前快照
  4. 类中的 Context、render props 与 HOC
  5. 错误边界：隔离范围、记录与恢复
  6. 渐进迁移：按状态与资源职责拆解
  7. React 17、18、19：版本、入口与行为演进

第五章：并发更新与等待边界 ​

并发渲染让 React 可以中断和重做低优先级工作，并不让 JavaScript 变成多线程。Transition、Deferred Value 与 Suspense 分别回答“哪些更新可以等”“旧结果能否暂留”和“哪一层显示等待状态”。

  1. Transition 与优先级
  2. Suspense、懒加载与错误边界
  3. useDeferredValue 与响应预算

第六章：React 19 Actions 与乐观交互 ​

表单提交通常同时包含异步工作、pending 反馈、可预期错误和最终确认。React 19 的 Actions 把这条流程接入 Transition；useActionState 与 useOptimistic 管理的是 UI 协议，服务端校验、幂等和权限仍由应用负责。

  1. Actions 与 pending 状态
  2. 乐观更新与回滚
  3. 表单、Server Action 与边界

第七章：URL、数据与缓存的职责分工 ​

React 核心负责渲染，不内置通用路由器或数据缓存。本章先用浏览器 URL 与请求生命周期理解稳定契约，再说明嵌套路由、错误边界、缓存失效和竞态应由宿主框架或数据层怎样接住。

  1. URL 状态与数据加载
  2. 路由错误边界与嵌套路由
  3. 缓存、失效与请求竞态
  4. 服务端渲染、水合与 Server Components

第八章：用测试、度量和发布闭环交付 ​

最后把“看起来能用”变成可复查结论：从用户可操作的语义测试开始，使用 Profiler 定位真实渲染成本，再建立发布、错误监控和升级回归的最小闭环。

  1. 组件测试与可访问性
  2. 性能剖析与渲染预算
  3. 发布、监控与升级

深入阅读 ​

为什么“同一个组件”会突然丢失状态 ​

先用列表、key 与状态身份观察重排，再在状态结构与保留中把组件类型、树中位置与 key 合成一条身份规则。这里的 key 不是传给组件的业务字段，而是 React 在同级子节点之间匹配实例的线索。

状态更新为什么没有立刻改变当前变量 ​

快照、队列与批处理解释事件处理器闭包里保存的是哪次渲染，并跟踪值更新与函数式更新进入队列后的计算顺序；随后用从状态到 Reducer把复杂更新收束为可单独验证的状态转换。

Effect 的依赖为什么不能靠“骗过 lint”解决 ​

不需要 Effect 的情况先区分派生计算、事件和外部同步；生命周期、清理与竞态再按每一次同步的开始与结束解释依赖和清理。问题通常不在依赖数组写得太多，而在 Effect 承担了不属于它的工作。

数据没变，为什么昂贵组件还是重新执行 ​

引用身份与记忆化从对象和函数每次重新创建开始，比较 memo、useMemo 与 useCallback 各自复用什么，再检查依赖遗漏怎样保留旧闭包。掌握这层关系后，并发实验中的慢子树才有清楚的更新边界。

弹层移到页面外，事件与焦点还归谁负责 ​

Ref 与 DOM 边界解释节点何时可用、何时必须清理；布局测量与命令式句柄继续追踪提交后的测量与有限命令接口；Portal 与可访问标识把 DOM 位置、React 事件路径和表单标识分开观察。

Transition、Deferred Value 和 Suspense 怎样配合 ​

Transition 与优先级从更新发起者标记非紧急工作，Deferred Value 与性能预算让消费者暂时继续使用旧值，而 Suspense、懒加载与错误边界在支持挂起协议的边界显示等待状态。三者改善调度和反馈，但不会替代缓存或取消请求。

乐观 UI 怎样避免“看似成功，实际丢数据” ​

乐观更新与回滚把预期状态与服务端确认状态分开；表单、Server Action 与边界继续处理校验、重复提交与信任边界；最后在缓存、失效与请求竞态中决定确认结果如何进入共享数据视图。

页面已有 HTML，为什么还需要水合 ​

在服务端渲染、水合与 Server Components中，先从 Node 生成页面，再让浏览器接管交互，并故意制造首屏不一致来观察恢复。随后区分服务端执行组件、生成 HTML 和客户端水合的关系，找到框架真正负责的构建与传输边界。

一次优化或升级怎样证明没有破坏行为 ​

先在组件测试与可访问性锁定用户可观察行为，再用性能剖析与渲染预算比较优化前后的提交成本，最终由发布、监控与升级清单把版本、回滚信号和线上错误串成同一条证据链。

类组件为什么不能只照着生命周期名字迁移 ​

实例与队列先解释this.state与更新请求，资源生命周期再把挂载、参数变化与卸载串成一个订阅合同。渐进Hooks迁移据此按资源拆分，而版本演进单独比较17、18、19与根入口，避免把更换写法误当成升级行为已验证。

用心记录每一步成长

Copyright © 2026-present Twiink