React开发
本知识树专为具备 React 基础的开发者设计，目标是培养专家级 React 工程师。内容深度覆盖 React 核心机制、高级组件模式、Hooks 原理与最佳实践、现代状态管理、性能优化体系、测试自动化、服务端渲染与全栈框架、底层源码实现以及大型应用工程化方案。通过系统学习，你将掌握 Fiber 架构与并发特性、自定义渲染器开发、复杂应用状态设计、高精度性能调优、React 18/19 新特性的落地实践，并能够独立设计可扩展、高可维护的 React 应用架构。本知识树强调原理理解与实战结合，适合希望突破中级瓶颈、深入技术底层、承担技术领导角色的开发者。
Learning Outline
1React 核心机制与原理
深入理解 React 的运行时机制，从虚拟 DOM 到并发模式，为性能优化和高级应用打下坚实基础。
虚拟 DOM 与协调
掌握虚拟 DOM 数据结构与 Diff 算法的运作原理。
- circle虚拟 DOM 的设计初衷与优势
- circleReact Element 与 Fiber 节点的区别
- circleDiff 算法实现细节
- circle协调过程的优化边界
Fiber 架构与调度
解析可中断的异步渲染架构以及优先级调度机制。
- circleStack Reconciler 到 Fiber Reconciler
- circle双缓存树（current / workInProgress）
- circle调度器（Scheduler）与优先级模型
- circleuseTransition 与 useDeferredValue 的调度衔接
合成事件系统
React 事件委托、合成事件对象与原生事件的映射原理。
- circle事件委托与插件系统
- circle合成事件对象的池化与复用
- circle自定义合成事件与跨平台适配
Concurrent 特性详解
掌握 React 18+ 并发模式下的关键 API 和心智模型。
- circleSuspense 与 Transitions
- circleConcurrent 模式的启用与降级
- circleuseSyncExternalStore 与并发安全
2组件与组合模式高级
从组件设计到高阶模式，构建高复用性、可维护的组件体系。
组件设计原则
单一职责、组合优于继承、控制反转等原则在 React 中的体现。
- circle展示组件与容器组件模式
- circle受控组件与非受控组件抉择
- circle组件接口设计（Props 类型与默认值）
高阶组件与 Render Props
理解传统逻辑复用模式并将其迁移到 Hooks。
- circle高阶组件的实现与装饰器模式
- circleRender Props 与函数子组件
- circle从 HOC/Render Props 迁移到自定义 Hooks
组合与插槽模式
利用 children 与显式 props 实现灵活的布局与封装。
- circle复合组件模式（Compound Components）
- circleProps Getters 与 Renderer Props
- circle布局组件与边界渲染
高级组件优化模式
避免不必要的重渲染和性能陷阱。
- circle使用 React.memo 与自定义比较器
- circle用 useMemo/useCallback 固定引用
- circleContext 拆分与状态提升的取舍
3Hooks 深度解析与实践
从源码层面理解和掌握 Hooks 的运行规则、陷阱以及高级模式。
useState 与 useReducer 精要
状态更新合并、批量更新与函数式更新。
- circleuseState 的懒初始化与闭包陷阱
- circleuseReducer 与复杂状态逻辑
- circle自动批处理与 flushSync 的例外
副作用与生命周期映射
掌握 useEffect、useLayoutEffect 与 useInsertionEffect 的执行时机。
- circleeffect 清除机制与依赖数组比较
- circleuseLayoutEffect 与浏览器绘制
- circleuseInsertionEffect 与 CSS-in-JS
Ref 与 DOM 操作
useRef、forwardRef、useImperativeHandle 的深度组合。
- circleuseRef 的多重角色：可变数据与 DOM 引用
- circleforwardRef 与自定义 ref 暴露
- circleuseImperativeHandle 的适用场景与滥用风险
自定义 Hooks 设计模式
构建通用、可组合、可测试的自定义 Hook 库。
- circle提取通用逻辑：useFetch、useForm 等案例
- circleuseEvent（或 useStableCallback）模式
- circle服务端安全的 Hooks（useIsSSR 等）
Hooks 常见陷阱与最佳实践
避免常见的误用，确保 Hooks 的可靠运行。
- circle依赖数组的 exhaustive-deps 规则
- circle避免在条件语句中调用 Hooks
- circle大组件与过多 Hooks 的重构策略
4状态管理与数据获取
从本地状态到全局状态，再到服务端状态，构建完整的数据流方案。
React 内置状态方案
利用 Context 与自定义 Hooks 实现轻量级状态管理。
- circle多级 Context 组织与性能优化
- circleuseReducer + Context 实现简单全局 Store
- circle组合多个 Provider 的依赖注入模式
现代外部状态库深度使用
选择 Redux Toolkit、Zustand 或 jotai 进行规模化状态管理。
- circleRedux Toolkit 的切片与不可变更新
- circleZustand 的原子化订阅与中间件
- circle原子化状态管理库（jotai / Recoil）
服务端状态与缓存策略
使用 React Query、SWR 接管异步数据，消除重复请求与缓存困境。
- circleReact Query 的核心概念与缓存机制
- circle无限滚动与分页查询
- circle与全局状态的集成：避免双重状态源
状态规范化与持久化
设计可扩展的状态结构并实现离线和持久化。
- circlenormalizr 风格的数据扁平化
- circle持久化状态与 rehydration 策略
- circle离线优先与乐观更新设计
5路由与客户端渲染优化
实现高效、灵活的路由系统，并结合代码分割和预加载提升性能。
React Router 高级用法
掌控嵌套路由、动态路由匹配以及数据加载。
- circlev6 的变化与新数据 API
- circle嵌套路由与布局路由
- circle基于角色的权限路由
代码分割与懒加载
使用 React.lazy 和动态 import 实现按需加载。
- circleReact.lazy 与 Suspense 配合
- circle基于路由的代码分割策略
- circle资源预加载与优先级提示
导航状态管理与过渡动画
提升用户感知的性能和流畅度。
- circle使用 useNavigation 跟踪加载状态
- circle页面过渡动画库集成
- circle防止闪屏与数据缓存
6性能优化深入
从渲染、网络、资源等多维度进行全面的性能诊断与优化。
避免不必要的渲染
利用工具和技巧最小化组件渲染次数。
- circleReact Profiler 与渲染火焰图分析
- circle用 Memoization 优化计算开销
- circle对象与数组属性的稳定性
虚拟化长列表
处理大量数据列表的技术及最佳实践。
- circlereact-window 与 react-virtuoso 选型
- circle动态高度与自动测量
- circle虚拟化与语义化可访问性的兼顾
资源加载优化
优化字体、图片、脚本等关键资源。
- circle图片懒加载与响应式图片
- circle字体加载策略与 FOIT/FOUT 消除
- circle关键 CSS 内联与代码消除
生产环境性能监控
建立性能看板，持续追踪并优化。
- circleWeb Vitals 与 CLS、LCP、FID 指标
- circle自定义性能埋点与 User Timing API
- circleReact 18 的新性能 API：useId、useDeferredValue
7测试策略与自动化
构建可靠的测试金字塔，从单元到端到端，保障应用质量。
单元测试与组件测试
使用 Jest 和 React Testing Library 编写高效测试。
- circle渲染组件与查询元素
- circle模拟用户交互与事件
- circle测试 Hooks 与自定义 Hook
集成测试与 API Mock
验证多个模块协同工作的正确性。
- circleMock Service Worker (MSW) 拦截网络请求
- circle测试包含 Context 和 Store 的组件
- circle异步流程与定时器测试
快照测试与视觉回归
防止非预期的 UI 变化。
- circle组件快照的合理使用与限制
- circle视觉回归测试工具（Percy / Chromatic）
E2E 测试与可访问性
保障完整用户流程和基础可访问性合规。
- circleCypress 或 Playwright 测试关键流程
- circle自动化可访问性检查 (axe-core)
- circle测试数据管理与种子数据
8React 服务端渲染与全栈框架
掌握服务器端渲染、静态生成以及现代 React 框架的高级特性。
Next.js App Router 深度解析
从页面路由到 App 路由的迁移和优势。
- circleReact Server Components（RSC）与数据获取
- circle嵌套布局与模板
- circle中间件与 Edge Functions
流式渲染与 Suspense SSR
利用流式传输提升首屏渲染速度。
- circlerenderToPipeableStream 的原理与使用
- circle选择性 Hydration 与 Suspense 边界
- circle流式 SSR 的错误处理与回退
静态生成与增量静态再生 (ISR)
充分利用缓存和按需重新生成。
- circleStatic Site Generation (SSG) 策略
- circleISR 按需重生成与 Draft 模式
- circle增量后端缓存与 CDN 集成
其他全栈 React 方案
了解 Remix、Gatsby 等替代框架的专家级用法。
- circleRemix 的 loader/action 与嵌套路由
- circleAstro 中的 React 岛屿架构
- circle自定义 SSR 方案与代码分割
9React 底层原理与源码剖析
通过阅读核心源码理解React的运行机制，为自定义渲染器和深度调优打下基础。
Reconciler 与 Renderer 架构
从架构层面理解 reconciler 与不同渲染器之间的关系。
- circlereact-reconciler 包的核心方法
- circleHostConfig 协议与自定义渲染器
- circleReact DOM 渲染器的初始化与提交
Hooks 实现源码解析
剖析 Hooks 链表存储、调度和状态更新的实现。
- circleFiber 上的 hooks 链表结构
- circleuseState 的 dispatch 与 eagerState 优化
- circleuseEffect 的 scheduler 集成与清理循环
调度与更新机制源码
深入 Scheduler 包和 lanes 模型的代码实现。
- circle工作循环（workLoop）与 shouldYield
- circlelane 模型的二进制编码与合并
- circleSuspense 的内部状态切换
React 18 新特性源码分析
并发特性在源码中的映射。
- circleuseTransition 的调度标记
- circleOffscreen 组件与保持状态
- circleServer Components 的通信协议
10工程化与架构最佳实践
构建大规模、可维护、安全的 React 应用所需的所有工程化实践。
项目结构与模块化
设计松散耦合、高内聚的项目目录结构。
- circle按功能特性（feature）组织代码
- circle公共组件库与设计系统
- circleMonorepo 管理多包应用 (Turborepo/Nx)
类型系统与 TypeScript 进阶
利用 TypeScript 增强 React 项目的健壮性。
- circle泛型组件与类型推断
- circleDiscriminated Union 与状态模式
- circle全局类型声明与环境变量
样式方案与设计系统
选择可伸缩的 CSS 方案并维持一致性。
- circleCSS-in-JS 运行时 vs 零运行时方案对比
- circle设计令牌与主题化
- circle构建稳定的类名生成策略
安全与可访问性
防御常见攻击并确保所有人可用。
- circleXSS 防护与 dangerouslySetInnerHTML 的安全使用
- circleARIA 属性与键盘可操作性
- circle避免信息泄露与安全标头
CI/CD 与错误监控
自动化部署、质量检查与线上错误追踪。
- circleESLint 与 Prettier 的工程化配置
- circle自动化测试在 CI 中的执行策略
- circle错误边界与 Sentry/LogRocket 集成
- circle蓝绿部署与回滚策略