想象一个场景：你正在装修房子。每次想换一幅画，都要把整面墙敲掉重新粉刷——这就是传统DOM操作。而现在，你只需要在iPad上设计好效果图，工人们只更换那幅画的位置——这就是虚拟DOM的智慧！打个比方：虚拟DOM就像装修前的3D效果图，每次修改都在效果图上调整，最后一次性告诉工人具体哪里需要改动。React和Vue正是用这种方式，让UI更新从"全屋装修"变成了"精准微调"。 # 第1课：虚拟DOM原理与Diff算法深度剖析 ## 虚拟DOM是什么？虚拟DOM（Virtual DOM）是真实DOM的JavaScript对象表示，它用轻量级的JS对象来描述DOM结构。 ```javascript // 真实DOM

Hello

World

// 虚拟DOM表示 { type: 'div', props: { className: 'container' }, children: [ { type: 'h1', props: {}, children: ['Hello'] }, { type: 'p', props: {}, children: ['World'] } ] } ``` **为什么需要虚拟DOM？** - DOM操作是昂贵的（浏览器需要重新计算样式、布局、绘制） - JS对象操作是轻量的 - 批量更新减少浏览器重排重绘 ## 虚拟DOM的工作流程 ```javascript // 简化的虚拟DOM工作流程 class VNode { constructor(type, props, children) { this.type = type; this.props = props || {}; this.children = children || []; } } // 1. 首次渲染：虚拟DOM → 真实DOM function render(vnode) { if (typeof vnode === 'string') { return document.createTextNode(vnode); } const el = document.createElement(vnode.type); // 设置属性 for (let key in vnode.props) { el.setAttribute(key, vnode.props[key]); } // 递归渲染子节点 vnode.children.forEach(child => { el.appendChild(render(child)); }); return el; } // 2. 更新时：新虚拟DOM vs 旧虚拟DOM → 找出差异 // 3. 应用差异到真实DOM ``` ## Diff算法核心策略 ### 1. 同层比较策略 ```javascript // Diff算法只比较同一层级的节点，不跨层级 // 旧树新树 //

A // B

// // 策略：同层级比较，节点类型不同直接替换整个子树 ``` ### 2. 节点类型比较 ```javascript // 类型不同 → 直接替换 // 旧：

内容

// 新：内容 // 结果：删除div，创建span // 类型相同 → 比较属性 // 旧：

内容

// 新：

内容

// 结果：只更新className属性 ``` ### 3. Key的作用 ```javascript // 没有key时的Diff（性能差） // 旧列表：[A, B, C, D] // 新列表：[A, C, B, D] // // 比较过程： // A vs A → 相同，保留 // B vs C → 不同，更新B为C // C vs B → 不同，更新C为B // D vs D → 相同，保留 // 结果：进行了2次更新操作 // 有key时的Diff（性能好） // 旧列表：[A, B, C, D] (key: 0,1,2,3) // 新列表：[A, C, B, D] (key: 0,2,1,3) // // 比较过程： // 通过key找到相同元素 // B和C位置互换，只移动节点，不更新 // 结果：只进行了2次移动操作，没有更新 ``` ## React与Vue的Diff差异 ### React的Diff实现 ```javascript // React的调和算法（简化版） function reconcileChildren(currentNode, workInProgressNode, nextChildren) { // 1. 遍历新旧children数组 // 2. 使用key进行匹配 // 3. 节点的增删改操作 // 核心思想： // - 两轮遍历 // - 第一轮：从左到右比较，尽量复用 // - 第二轮：处理剩余节点的增删改 } ``` ### Vue的Diff实现 ```javascript // Vue的patch算法（简化版） function patchVnode(oldVnode, vnode) { // 1. 相同节点直接返回 // 2. 比较新老节点的children // 3. 双端比较策略 // 核心思想： // - 四指针比较（首首、尾尾、首尾、尾首） // - 相同则移动指针，不同则查找key // - 最后处理剩余节点 } ``` ## 实现简易Diff算法 ```javascript // 简易Diff实现 function diff(oldNode, newNode) { // 1. 节点类型不同 if (oldNode.type !== newNode.type) { return { type: 'REPLACE', newNode }; } // 2. 文本节点 if (typeof oldNode === 'string' && typeof newNode === 'string') { if (oldNode !== newNode) { return { type: 'TEXT_UPDATE', text: newNode }; } return null; } // 3. 比较属性 const propPatches = diffProps(oldNode.props, newNode.props); // 4. 比较子节点 const childPatches = diffChildren(oldNode.children, newNode.children); return { type: 'UPDATE', propPatches, childPatches }; } function diffProps(oldProps, newProps) { const patches = []; // 查找新增和修改的属性 for (let key in newProps) { if (oldProps[key] !== newProps[key]) { patches.push({ key, value: newProps[key], type: 'SET' }); } } // 查找删除的属性 for (let key in oldProps) { if (!(key in newProps)) { patches.push({ key, type: 'REMOVE' }); } } return patches; } function diffChildren(oldChildren, newChildren) { const patches = []; const maxLen = Math.max(oldChildren.length, newChildren.length); for (let i = 0; i < maxLen; i++) { const oldChild = oldChildren[i]; const newChild = newChildren[i]; if (!oldChild) { // 新增节点 patches.push({ index: i, type: 'ADD', node: newChild }); } else if (!newChild) { // 删除节点 patches.push({ index: i, type: 'REMOVE' }); } else { // 递归比较 const patch = diff(oldChild, newChild); if (patch) { patches.push({ index: i, patch }); } } } return patches; } ``` ## 实际应用场景 ```javascript // React中的应用 function TodoList({ todos, filter }) { return (

))}

); } // key的使用让Diff算法能精确追踪每个todo项 // Vue中的应用 // v-for中的key同样用于优化Diff ``` ## 性能优化建议 ```javascript // 1. 使用稳定的key // ❌ 错误：使用索引作为key items.map((item, index) => ) // ✅ 正确：使用唯一ID items.map(item => ) // 2. 避免频繁重建组件 // ❌ 错误：在render中创建新组件 function App() { const Child = () =>

Child

; return ; } // ✅ 正确：在外部定义组件 const Child = () =>

Child

; function App() { return ; } // 3. 使用React.memo/memoization const MemoizedComponent = React.memo(Component, areEqual); ``` ## 小词典 - **虚拟DOM**：用JS对象描述DOM结构的轻量级表示 - **Diff算法**：比较新旧虚拟DOM，找出最小变化的算法 - **调和（Reconciliation）**：React中Diff算法的具体实现 - **Key**：帮助Diff算法识别哪些元素是稳定的标识 - **双端比较**：Vue采用的从两端同时比较的Diff策略 - **同层比较**：只比较同一层级的节点，不跨层级 ## 练习实现一个完整的虚拟DOM和Diff系统： 1. 创建VNode类，支持创建元素和文本节点 2. 实现render函数，将虚拟DOM转换为真实DOM 3. 实现diff函数，比较新旧虚拟DOM 4. 实现patch函数，将差异应用到真实DOM 5. 创建一个计数器应用，使用你的虚拟DOM系统 **预期输出：** ```javascript // 创建虚拟DOM const vdom = createElement('div', { className: 'app' }, createElement('h1', {}, '计数器'), createElement('p', {}, '点击次数：0'), createElement('button', { onClick: 'increment' }, '点击') ); // 渲染到真实DOM const app = render(vdom); document.getElementById('root').appendChild(app); // 更新 const newVdom = createElement('div', { className: 'app' }, createElement('h1', {}, '计数器'), createElement('p', {}, '点击次数：1'), createElement('button', { onClick: 'increment' }, '点击') ); const patches = diff(vdom, newVdom); patch(app, patches); ```