阶段 2：框架级硬核实战（第 3–4 月）

总体目标：通过手写 mini-React 和相关原理，深入理解现代前端框架的核心机制（如虚拟 DOM、Diff 算法、Hooks、响应式系统和调度器）。这将帮助您从源头掌握 React/Vue 等框架的内部工作原理，提升代码优化和调试能力。

总体学习框架

目标：实现虚拟 DOM 基础，理解为什么需要 VDOM（高效更新真实 DOM）。
学习内容：
- h 函数：创建虚拟节点（VNode）的 hyperscript 函数。
- 虚拟节点：表示 DOM 的 JS 对象结构（type, props, children）。
- render：将 VNode 渲染到真实 DOM 的过程。
推荐资源：
- React 官方文档：虚拟 DOM 和内部机制。
- 文章：Dan Abramov 的“React as a UI Runtime” (GitHub 搜索)。
- 视频：Bilibili 搜索“手写 mini-React”（如“从零实现 React”系列）。
实战步骤：
- 手写 h 函数和 render：从简单 JSX-like 结构开始，实现 DOM 挂载。
- 创建 Demo：渲染一个计数器组件，观察 VDOM 如何减少 DOM 操作。
- 项目整合：在 app/frameworks/react/page.mdx 添加“虚拟 DOM”一节，包含代码示例和渲染流程图。

目标：掌握 DOM 更新的高效比较，实现最小更新。
学习内容：
- 同层比较：只比较同一层级的节点。
- key 优化：使用 key 来复用节点，避免全量重渲染。
- 实现最小更新：old VNode vs. new VNode 的 patch 逻辑。
推荐资源：
- React 源码分析：Reconciliation 。
- 文章：Christopher Chedeau 的“React’s Diff Algorithm” (搜索)。
- 工具：React DevTools 来可视化 Diff 过程。
实战步骤：
- 手写 Diff 函数：实现节点复用、插入/删除逻辑，处理带 key 的列表。
- 输出一套可运行的 Diff 逻辑：测试列表重排序场景，确保最小 DOM 操作。
- 项目整合：创建 app/plan/phase2/week11/page.mdx，记录 Diff 算法伪代码和测试用例。

目标：理解 Hooks 如何在函数组件中管理状态和副作用。
学习内容：
- useState：状态钩子，实现状态持久化和更新。
- useEffect：副作用钩子，处理依赖和清理。
- 闭包陷阱：Hooks 依赖数组的常见问题和解决方案。
推荐资源：
- React 官方：Hooks 规则。
- 书籍：《React Hooks in Action》。
- 视频：YouTube 搜索“React Hooks 内部原理”。
实战步骤：
- 手写 useState 和 useEffect：用数组模拟 Hooks 调用顺序。
- 测试闭包陷阱：创建一个计数器 + 定时器 Demo，修复 stale closure 问题。
- 项目整合：扩展 app/languages/javaScript/page.mdx 添加“Hooks 实现”笔记。

目标：实现 Vue3 的响应式核心，理解 Proxy-based 响应式。
学习内容：
- Proxy：拦截对象操作，实现响应式。
- effect：副作用函数的注册。
- track / trigger：依赖收集和派发更新。
推荐资源：
- Vue 官方：响应式基础。
- 文章：Evan You 的“Vue 3 Reactivity” (GitHub)。
- 工具：Vue DevTools 来观察响应式变化。
实战步骤：
- 手写响应式库：用 Proxy 包裹对象，实现数据变化触发 effect。
- 输出独立响应式库：测试 computed 和 watch 简单版本。
- 项目整合：在 app/frameworks/vue/page.mdx 添加响应式代码示例。

目标：理解任务调度在框架中的作用，实现时间切片。
学习内容：
- 任务优先级：高/低优先级任务的排序。
- time slicing：将长任务拆分成小块。
- requestIdleCallback：浏览器空闲时调度。
推荐资源：
- React 源码：Scheduler 。
- 文章：“Concurrent React” (React Conf 讲解)。
- Polyfill：requestIdleCallback 的浏览器兼容实现。
实战步骤：
- 手写简化版 Scheduler：实现优先级队列和时间切片。
- 测试长任务：模拟大量 Fiber 任务，确保不阻塞 UI。
- 项目整合：创建 app/plan/phase2/week15/page.mdx，记录调度器流程图。

目标：将前几周模块整合成完整 mini-React。
学习内容：
- 整合 Virtual DOM + Diff + Hooks + Scheduler。
- 优化整体框架：处理错误边界和并发模式基础。
推荐资源：
- GitHub 项目：搜索“mini-react” 开源实现作为参考。
- 书籍：《React Design Patterns and Best Practices》。
实战步骤：
- 组装所有模块：创建一个可运行的 mini-React，支持组件渲染和更新。
- 输出最终框架：构建一个 Todo List App，展示完整功能。
- 项目整合：创建 app/plan/phase2/summary/page.mdx，嵌入最终代码和架构图。