🎓 Web前端框架技术 实验二·代码仓库: se3306-exp2
React 核心机制深度探索与交互实验系统
通过可视化仿真与真实交互演示，全面掌握 React 的底层虚拟 DOM、Fiber 双缓存架构、Hooks 状态心智模型与 React 18 并发渲染调度。
模块一底层架构
Virtual DOM & Fiber 调和
探究 JSX 到 VDOM 对象的转换过程，动态观察 Diff 算法在带 Key 与不带 Key 下的节点复用与重排差异。
• Fiber 双缓存树构建 (current / workInProgress)
• 启发式 Diff 策略 (同层比较、Key 匹配)
模块二状态心智
Hooks 深度工作坊
深入探究 useState 批处理更新、useEffect 清除机制、useMemo/useCallback 渲染耗时比对与 useReducer 集中状态树。
• 自动批处理 (Automatic Batching) 实验
• React.memo 避免不必要重渲染
模块三工程抽象
自定义 Hooks 封装库
工业级 Custom Hook 设计范式实战：防抖搜索 (useDebounce)、持久化存储 (useLocalStorage) 与事件监听清理。
• 状态逻辑与 UI 彻底解耦
• 复杂交互代码的高效复用
模块四前沿特性
React 18 并发与可中断渲染
在 10,000+ 繁重计算节点下，通过 useTransition 演示紧急更新与过渡更新的调度差异，消除输入掉帧。
• 阻塞渲染 vs 并发可中断调度实测
• FPS 帧率稳定与输入响应优先保障
🏗️ React 核心执行管线两阶段模型 (Render & Commit Pipeline)
理解现代 React 运行时的最核心心智：Render 阶段可异步中断与重启，Commit 阶段同步执行真实 DOM 突变。
第一阶段：Render Phase (渲染阶段)
纯计算 · 可中断 · 无副作用
- 调用函数组件生成新的 Virtual DOM 节点树。
- Fiber 调和器递归遍历 workInProgress 树，与 current 树执行 Diff。
- 为每个需要变更的 Fiber 打上 EffectTag 标记（如 Placement、Update、Deletion）。
- 在 React 18 并发模式下，高优先级任务（用户敲击按键）可随时打断该阶段。
第二阶段：Commit Phase (提交阶段)
DOM 变更 · 同步不可打断 · 执行副作用
- Before Mutation： 读取 DOM 快照（getSnapshotBeforeUpdate）。
- Mutation： 同步将 Render 阶段收集的 EffectList 应用到真实浏览器 DOM 树。
- Layout： 执行 useLayoutEffect 回调，更新 ref 引用。
- 异步调度： 浏览器绘制完成后，异步触发 useEffect 监听。