模块一实验Virtual DOM 调和与 Diff 启发式算法
Virtual DOM & Fiber 双缓存实验
实时观察列表在有 Key 与无 Key 场景下，React Fiber Reconciler 的节点复用与重排差异。
🎮 交互式列表 Diff 变异模拟器
✅ 推荐实践：指定唯一 Key真实 DOM 变更次数: 0
Fiber 通过 Map 结构 key => Fiber 实现 O(1) 节点精准查找，复用已有 DOM，仅执行单纯位置位移。
React 架构设计
key="item-1"Virtual DOM 抽象层
key="item-2"Fiber 节点链表结构
key="item-3"启发式 Diff 双指针
key="item-4"❌ 缺陷实践：使用下标 index 或无 key被迫触发 DOM 修改: 0
头部插入会导致后续所有元素在 Diff 时被判定为“内容发生变化”，触发全量 DOM 文本与属性的强制更新！
React 架构设计
key="0" (错误)Virtual DOM 抽象层
key="1" (错误)Fiber 节点链表结构
key="2" (错误)启发式 Diff 双指针
key="3" (错误)💡 实验理论精析：Fiber 架构解决的核心痛点
1. 从 Stack Reconciler 到 Fiber 架构： 在 React 15 及更早版本中，VDOM 树的比对是通过递归执行的。一旦组件树庞大，递归执行时间超过 16.6ms（1帧的时长），主线程将被彻底卡死，导致用户掉帧与输入迟滞。
2. Fiber 的链表化与时间切片 (Time Slicing)： React 16+ 重构为 Fiber 双向链表结构（child, sibling, return 指针）。每个 Fiber 代表一个工作单元，配合浏览器的 requestIdleCallback 或内部 MessageChannel，React 能够在每一帧空闲时间内分片执行，支持随时让出主线程给高优先级的绘制与响应。