basics
如何阅读本仓库（学习路径与章节依赖）
React 渲染两阶段：Render vs Commit（总览）
从“更新”到“页面变更”：一次 setState 的全链路鸟瞰
基础入门（建议先读）
event loop
浏览器多进程架构
事件循环概述
函数调用栈
线程介绍
刷新率与执行队列
setTimeout 原理详解
Promise 原理详解
事件循环机制（综合）
优先级队列
concurrent mode
并发模式：概念
案例演示并发模式
高优先级插队
插队的影响、与中断的区别
中断条件：shouldYield
React 中的任务与队列
ensureRootIsScheduled
合并多个更新触发
taskQueue 队列循环的启动与结束
时间切片是如何实现的
workLoop 循环完整逻辑
React 中的优先级设计
lane 模型
fiber
三种节点对象
FiberRootNode
Fiber 树
Fiber 树初始构建过程
workLoopConcurrent
栈结构与 workInProgress
执行上下文 executionContext
update lanes
render lanes
fiber lanes
附录：flags
hooks
hook 背景
hook 分类
hook 与闭包
hook 与 fiber
renderWithHooks
初始化 State Hook
初始化 effect Hook
环形链表详解
useReducer 与 useState 的区别
update 链表
初始阶段的状态更新
baseQueue 与 queue.pending
更新阶段的 dispatch
commitRoot
diff
React 更新机制概述
diff 策略
节点比较方式
reconcileChildFibers
reconcileSingleElement
reconcileChildrenArray
为什么不建议使用数字作为 key
event system
事件系统概述
事件插件
事件池
根节点事件绑定
事件触发
interview
useEffect 与 useLayoutEffect 的区别
为什么 hook 不能写在条件判断里
聊聊在 React 中，你对并发模式的理解
聊聊 React 的更新机制原理
setState 是同步还是异步的？
聊聊 useState 与 useReducer 的区别
聊聊闭包陷阱问题，以及如何解决
时间分片是如何实现的（任务拆分/中断/恢复）
聊聊 useState 的批处理更新机制
JSX 是如何转变成为真实 DOM 的
useCallback 的实现原理是什么
详细聊聊 React 的调度机制
聊聊 React 的优先级机制（Lane 模型）
React 的 Diff 算法是什么样的
详细聊聊 React 的事件系统是如何实现的
React Portals 上的事件是否会冒泡到父组件，原理是什么
useEffect 的实现原理是什么
请聊聊 useContext 的实现原理
react 18 in practice
React 18 自动批处理（Automatic Batching）与 flushSync
React StrictMode：为什么会“双调用”？（源码/机制视角）
Transition：startTransition / useTransition / useDeferredValue（机制视角）
Suspense：加载态边界如何设计（机制/架构视角）
Error Boundary：兜底、重试与上报（自研 vs Sentry）（机制/架构视角）
React 18 实战（并发特性与默认行为）
routing and navigation
路由与 URL State：统一心智模型（架构师视角）
TanStack Router（Vite / SPA）：Route Tree / Search / Loader / Prefetch（落地篇）
Next.js App Router：Segments / Layouts / Loading-Error-NotFound / Prefetch（落地篇）
路由与导航（TanStack Router / Next App Router）
data layer
状态分层：UI / Server / URL / Global（架构师视角）
TanStack Query：缓存模型与失效策略（Caching & Invalidation）
TanStack Query：乐观更新与一致性（Optimistic Updates & Consistency）
表单架构：React Hook Form 的受控/非受控、校验、性能与可测试性（架构师视角）
数据层（Server State / 表单 / 状态分层）
rendering and delivery
Hydration mismatch（React / Next.js）：成因、检测、排查清单与工程化规避
Next.js 缓存/重验证与一致性：避免「线上怎么不更新」事故（App Router）
CSR vs SSR vs SSG vs ISR：怎么选？边界是什么？（体验 + 成本 + 一致性）
Streaming SSR + Suspense：提升前端感知性能的利器
渲染与交付（CSR/SSR/Streaming/Hydration/缓存）
production readiness
前端可观测性体系：日志、指标与链路追踪
鉴权与 Web 安全：OAuth, JWT, XSS, CSRF, CSP
生产可用性（错误/可观测/鉴权/安全）
performance
前端性能定位 Playbook：从指标到归因
React 渲染性能优化：Memo, Context, 与虚拟化
资源与 Bundle 优化：代码分割、图片与 CDN
性能体系（定位 → 优化 → 度量）
engineering and architecture
组件体系与设计系统：构建规模化前端的基石
前端测试体系：RTL, E2E 与可测性设计
Monorepo 与依赖治理：pnpm 和 Turborepo
CI/CD 与质量门禁：构建可靠的自动化流程
BFF 与 API 设计：前端架构师的视角
工程与架构治理（规模化）
advanced
RSC/Server Actions 深水区：边界、约束与缓存一致性
微前端治理：样式、路由与通信
实时与离线：WebSocket, PWA 与 Service Worker
a11y, i18n 与合规：构建负责任的全球化应用
进阶专题（按业务需要选做）

basics
如何阅读本仓库（学习路径与章节依赖）
React 渲染两阶段：Render vs Commit（总览）
从“更新”到“页面变更”：一次 setState 的全链路鸟瞰
基础入门（建议先读）
event loop
浏览器多进程架构
事件循环概述
函数调用栈
线程介绍
刷新率与执行队列
setTimeout 原理详解
Promise 原理详解
事件循环机制（综合）
优先级队列
concurrent mode
并发模式：概念
案例演示并发模式
高优先级插队
插队的影响、与中断的区别
中断条件：shouldYield
React 中的任务与队列
ensureRootIsScheduled
合并多个更新触发
taskQueue 队列循环的启动与结束
时间切片是如何实现的
workLoop 循环完整逻辑
React 中的优先级设计
lane 模型
fiber
三种节点对象
FiberRootNode
Fiber 树
Fiber 树初始构建过程
workLoopConcurrent
栈结构与 workInProgress
执行上下文 executionContext
update lanes
render lanes
fiber lanes
附录：flags
hooks
hook 背景
hook 分类
hook 与闭包
hook 与 fiber
renderWithHooks
初始化 State Hook
初始化 effect Hook
环形链表详解
useReducer 与 useState 的区别
update 链表
初始阶段的状态更新
baseQueue 与 queue.pending
更新阶段的 dispatch
commitRoot
diff
React 更新机制概述
diff 策略
节点比较方式
reconcileChildFibers
reconcileSingleElement
reconcileChildrenArray
为什么不建议使用数字作为 key
event system
事件系统概述
事件插件
事件池
根节点事件绑定
事件触发
interview
useEffect 与 useLayoutEffect 的区别
为什么 hook 不能写在条件判断里
聊聊在 React 中，你对并发模式的理解
聊聊 React 的更新机制原理
setState 是同步还是异步的？
聊聊 useState 与 useReducer 的区别
聊聊闭包陷阱问题，以及如何解决
时间分片是如何实现的（任务拆分/中断/恢复）
聊聊 useState 的批处理更新机制
JSX 是如何转变成为真实 DOM 的
useCallback 的实现原理是什么
详细聊聊 React 的调度机制
聊聊 React 的优先级机制（Lane 模型）
React 的 Diff 算法是什么样的
详细聊聊 React 的事件系统是如何实现的
React Portals 上的事件是否会冒泡到父组件，原理是什么
useEffect 的实现原理是什么
请聊聊 useContext 的实现原理
react 18 in practice
React 18 自动批处理（Automatic Batching）与 flushSync
React StrictMode：为什么会“双调用”？（源码/机制视角）
Transition：startTransition / useTransition / useDeferredValue（机制视角）
Suspense：加载态边界如何设计（机制/架构视角）
Error Boundary：兜底、重试与上报（自研 vs Sentry）（机制/架构视角）
React 18 实战（并发特性与默认行为）
routing and navigation
路由与 URL State：统一心智模型（架构师视角）
TanStack Router（Vite / SPA）：Route Tree / Search / Loader / Prefetch（落地篇）
Next.js App Router：Segments / Layouts / Loading-Error-NotFound / Prefetch（落地篇）
路由与导航（TanStack Router / Next App Router）
data layer
状态分层：UI / Server / URL / Global（架构师视角）
TanStack Query：缓存模型与失效策略（Caching & Invalidation）
TanStack Query：乐观更新与一致性（Optimistic Updates & Consistency）
表单架构：React Hook Form 的受控/非受控、校验、性能与可测试性（架构师视角）
数据层（Server State / 表单 / 状态分层）
rendering and delivery
Hydration mismatch（React / Next.js）：成因、检测、排查清单与工程化规避
Next.js 缓存/重验证与一致性：避免「线上怎么不更新」事故（App Router）
CSR vs SSR vs SSG vs ISR：怎么选？边界是什么？（体验 + 成本 + 一致性）
Streaming SSR + Suspense：提升前端感知性能的利器
渲染与交付（CSR/SSR/Streaming/Hydration/缓存）
production readiness
前端可观测性体系：日志、指标与链路追踪
鉴权与 Web 安全：OAuth, JWT, XSS, CSRF, CSP
生产可用性（错误/可观测/鉴权/安全）
performance
前端性能定位 Playbook：从指标到归因
React 渲染性能优化：Memo, Context, 与虚拟化
资源与 Bundle 优化：代码分割、图片与 CDN
性能体系（定位 → 优化 → 度量）
engineering and architecture
组件体系与设计系统：构建规模化前端的基石
前端测试体系：RTL, E2E 与可测性设计
Monorepo 与依赖治理：pnpm 和 Turborepo
CI/CD 与质量门禁：构建可靠的自动化流程
BFF 与 API 设计：前端架构师的视角
工程与架构治理（规模化）
advanced
RSC/Server Actions 深水区：边界、约束与缓存一致性
微前端治理：样式、路由与通信
实时与离线：WebSocket, PWA 与 Service Worker
a11y, i18n 与合规：构建负责任的全球化应用
进阶专题（按业务需要选做）

Notes

Document not found

cd ..