虚拟 DOM
虚拟 DOM（Virtual DOM）是存在于内存中的界面描述：每个节点是一个普通 JS 对象 { type: "div", props: {...}, children: [...] }。数据变化时，React 先在内存里生成一棵新树，与旧树对比（Diff），算出最小差异，最后只把差异部分更新到真实 DOM。
它解决的核心痛点是“频繁整页重绘很慢”：真实 DOM 操作贵在排版/重绘，虚拟 DOM 把多次修改合并、只做必要更新。但虚拟 DOM 并非“比真实 DOM 快”，而是让你用声明式的写法获得接近手写优化的性能，同时代码可维护。
- 虚拟 DOM = 内存里的 JS 对象树，描述界面而非真实节点
- Diff 算法按“同层比较 + key 标识”找出最小改动
- 价值在于声明式写法 + 足够好的性能，不是玄学加速
JS
// 虚拟 DOM 的本质：普通 JS 对象 console.log("虚拟 DOM 节点长这样："); const vnode = { type: 'div', props: { style: { color: 'tomato' } }, children: ['你好, ', { type: 'b', props: null, children: ['React'] }], }; console.log(vnode); // React 内部大致流程： // render(<App/>) -> 生成 vdom -> 真实 DOM // setState(...) -> 新 vdom -> Diff 对比 -> 只更新差异部分 // 手写一个极简 Diff 的思路（理解即可） function diff(oldNode, newNode) { if (oldNode.type !== newNode.type) { return { action: 'replace', node: newNode }; // 类型不同：整个替换 } if (oldNode.children !== newNode.children) { return { action: 'update', node: newNode }; // 内容不同：更新属性/文本 } return null; // 没变化：跳过 }
本节要点虚拟 DOM 是内存里的对象树；每次更新先 Diff 出最小差异，再批量提交真实 DOM。
