虚拟 DOM 是用 JavaScript 对象模拟真实 DOM 的轻量层，避免频繁重排重绘，支持批量更新与跨平台；React.createElement 等返回虚拟 DOM 对象，diff 算法仅同层级同 type 比较，key 用于标识可复用节点，列表渲染须用稳定唯一 key。
虚拟 DOM 是什么，为什么需要它
虚拟 DOM 不是浏览器原生概念，而是用 JavaScript 对象模拟真实 DOM 节点的结构。它本身不渲染、不响应事件，只是一层轻量的数据描述。核心价值在于：避免直接操作真实 DOM 带来的频繁重排重绘开销；为批量更新和跨平台（如 SSR、小程序）提供中间抽象层。
关键点：React.createElement 返回的就是一个虚拟 DOM 对象（Plain Object），形如 { type: 'div', props: { className: 'box' }, children: [...] }。Vue 的 h()、Preact 的 h 函数同理。
diff 算法只在同层级比较，且默认不跨类型移动节点
主流实现（React 16+、Vue 3）采用「双端对比 + 最小编辑距离启发式」，但前提是：diff 严格限制在相同 type（标签名或组件类型）的节点之间进行。一旦 type 改变（比如 div → span），整棵子树被丢弃重建，不会尝试复用。
常见误解：以为 diff 会智能“移动”节点。实际上，key 的作用只是告诉算法：“这个节点在旧列表里叫 A，在新列表里还叫 A，可以复用其状态（如 input 光标、组件实例）”。没有 key 或 key 错乱，会导致无谓的销毁重建。
立即学习“Java免费学习笔记（深入）”；
- 列表渲染必须用稳定唯一的
key，禁止用index -
props变化时，仅触发shouldComponentUpdate或memo判断，不等于跳过 diff - 函数组件每次 render 都生成新虚拟 DOM 树，diff 发生在新旧两棵树之间
简化版 diff 过程：从根节点开始递归比对
真实框架逻辑复杂，但主干流程可概括为三步：① 比较节点类型；② 若类型相同，更新 props 和事件；③ 递归比对子节点（children）。子节点 diff 分为单节点和多节点两种路径：
单节点（如 div 下只有一个 p）：直接递归比对子节点对象。
多节点（如 ul 下有多个 li）：进入列表 diff，此时才用到 key。算法会先快速比对头尾四组（oldStart/newStart、oldEnd/newEnd、oldStart/newEnd、oldEnd/newStart），找到可复用项，再 fallback 到哈希映射查找。
function diff(oldNode, newNode, parentDOM) {
if (!newNode) {
parentDOM.removeChild(oldNode.el);
} else if (!oldNode) {
const el = createElement(newNode);
parentDOM.appendChild(el);
} else if (oldNode.type !== newNode.type) {
// 类型不同，直接替换
const el = createElement(newNode);
parentDOM.replaceChild(el, oldNode.el);
} else {
// 类型相同，复用 DOM 节点，只更新 props & children
updateElement(oldNode.el, oldNode.props, newNode.props);
diffChildren(oldNode.children, newNode.children, oldNode.el);
}
}
diff 不等于 patch，真实 DOM 更新发生在 commit 阶段
diff 只是计算出「需要做什么」（如「删除第 2 个子节点」「将第 1 个子节点的 className 改为 'active'」），这些操作被收集为 effect list。真正的 DOM 修改（patch）是在 commit 阶段统一执行的，且不可中断——这也是 React 18 并发模式要解决的问题之一。
容易忽略的细节：useEffect、useLayoutEffect 的执行时机就卡在 commit 后的不同阶段；服务端渲染（SSR）时，diff 在 Node.js 环境运行，没有真实 DOM，所以必须靠 hydrateRoot 在客户端做水合校验。
