⚛️

React 实战：从 Hooks 到源码

系统掌握 React 19 全貌：JSX 编译原理、Hooks 底层机制、状态管理选型、性能优化体系、工程化最佳实践，直到 Fiber 架构与 Reconciler 源码解析。覆盖 React 18→19 核心变更，适合初学者到架构师的完全指南。28章，完全免费。

28

章节

免费

永久

开始阅读 →

目录

JSX 本质与编译过程

JSX 不是 HTML——深入编译转换、createElement 调用链与 React 19 新 JSX 变换

组件模型：函数组件与类组件的本质差异

为什么函数组件取代了类组件，闭包陷阱、render 语义与组件身份

Props、State 与数据流设计

单向数据流的设计哲学，Props 不可变性，状态提升与组件通信模式

事件系统深度解析

合成事件、事件委托机制、React 17 事件系统重构与原生事件混用陷阱

useState：状态更新的批处理与异步机制

状态快照、批量更新（React 18 自动批处理）、函数式更新与状态初始化

useEffect：副作用的正确使用方式

依赖数组的真正含义、清理函数、常见误用模式与 React 19 的变化

useRef 与 DOM 操作：refs 的完整使用手册

ref 的三种用途、forwardRef、useImperativeHandle 与 React 19 ref 作为 prop

useMemo 与 useCallback：何时优化，何时过度

记忆化的真实成本、引用稳定性、正确判断是否需要优化的决策框架

useContext：依赖注入与性能陷阱

Context 传播机制、不必要的重渲染、拆分 Context 的策略与 use() Hook

自定义 Hook：抽象、复用与设计模式

何时提取自定义 Hook、常用模式（useFetch/useLocalStorage/useDebounce）与设计原则

Context 的边界：什么问题它解决不了

Context 不是状态管理库——性能问题、组织问题与何时需要外部方案

Zustand：极简状态管理的设计哲学

Zustand 核心 API、中间件体系、与 React 的集成原理及源码解读

Redux Toolkit：企业级状态管理完全指南

RTK 现代写法、createSlice/createAsyncThunk、RTK Query 数据获取与缓存

原子化状态：Jotai、Valtio 与 Recoil 横向对比

三种原子化方案的设计差异、适用场景与性能特征，如何选型

Re-render 原理：React 何时重新渲染以及如何阻止

触发重渲染的所有条件、渲染树传播规则与精准优化策略

React.memo 与渲染控制的完整体系

memo 的浅比较机制、与 useMemo/useCallback 的协作、何时 memo 无效

代码分割、懒加载与 Suspense 边界

React.lazy、动态 import、Suspense fallback 设计与错误边界协作

React Profiler 实战：定位和修复性能瓶颈

DevTools Profiler 使用方法、火焰图解读、真实案例分析与优化验证

TypeScript + React：类型安全的组件设计

组件 Props 类型、泛型组件、事件类型、Hooks 类型推导与常见类型陷阱

测试策略：Vitest + React Testing Library 完全指南

单元测试、集成测试、用户行为测试、Mock 策略与 CI 集成

错误边界与错误处理体系

ErrorBoundary 实现、错误上报、React 19 错误处理改进与生产环境策略

可访问性（a11y）工程实践

语义化 HTML、ARIA 属性、键盘导航、屏幕阅读器测试与自动化检查

项目架构与工程化最佳实践

目录结构设计、组件分层、barrel exports 争议、monorepo 方案与代码规范

Fiber 架构：React 为什么重写了渲染引擎

Stack Reconciler 的瓶颈、Fiber 节点数据结构、工作循环与可中断渲染

Reconciler 与 Diff 算法源码解析

reconcileChildFibers 实现、三条 Diff 规则、key 的作用与 Diff 算法复杂度

Scheduler：React 的并发调度系统

优先级模型、时间切片、MessageChannel 实现、与浏览器帧的协作

Hooks 链表：useState 和 useEffect 的底层实现

Hook 对象结构、mount/update 两套 dispatcher、闭包与链表的关系

React 19 新特性全解：Actions、use()、编译器与并发改进

React 19 所有新特性详解、与 React 18 的差异对比、迁移指南与未来方向

💬 留言讨论