Back to Blog
· 3 min read

Virtual DOM

React

当你在 React 中修改状态时，页面是如何高效更新的？为什么直接操作真实 DOM 性能差，而虚拟 DOM 能解决问题？这篇文章将深入解析这个 React 最核心的机制。

虚拟 DOM 是 React 及其他现代前端框架的核心概念。理解它的工作原理，才能写出更高效的代码。

1. 什么是虚拟 DOM

虚拟 DOM 是一个 JavaScript 对象，用于表示真实 DOM 的结构：

// 这样的 JSX
<div className="container">
  <h1>标题</h1>
  <p>内容</p>
</div>

// 会被编译成这样的 JavaScript 对象（虚拟 DOM）
{
  type: 'div',
  props: { className: 'container' },
  children: [
    { type: 'h1', props: {}, children: ['标题'] },
    { type: 'p', props: {}, children: ['内容'] }
  ]
}

2. 工作原理

2.1 整体流程

graph TD
    A[State 变化] --> B[生成新虚拟 DOM]
    B --> C[Diff 算法比较]
    C --> D[计算最小变更]
    D --> E[批量更新真实 DOM]

2.2 步骤

function Counter() {
  const [count, setCount] = useState(0);

  // 点击按钮触发：
  // 1. setCount(1) 更新 state
  // 2. React 重新渲染组件
  // 3. 生成新的虚拟 DOM
  // 4. 与旧虚拟 DOM 比较（Diff）
  // 5. 计算最小变更
  // 6. 更新真实 DOM

  return (
    <div>
      <p>计数: {count}</p>
      <button onClick={() => setCount(c => c + 1)}>增加</button>
    </div>
  );
}

3. Diff 算法

3.1 核心原则

React 的 Diff 算法基于两个假设：

  1. 不同类型的元素产生不同的树：元素类型改变时，React 会销毁整个旧树，建立新树
  2. 开发者可以通过 key 暗示哪些子元素稳定

3.2 对比示例

// 旧
<ul>
  <li key="a">A</li>
  <li key="b">B</li>
</ul>

// 新 - 仅仅移动了位置
<ul>
  <li key="b">B</li>
  <li key="a">A</li>
</ul>

// React 只会交换位置，不会重新创建 DOM 节点

3.3 Key 的重要性

// ❌ 避免：使用数组索引作为 key
{items.map((item, index) => (
  <TodoItem key={index} item={item} />
))}

// ✅ 推荐：使用唯一 ID
{items.map(item => (
  <TodoItem key={item.id} item={item} />
))}

注意: Key 应该是稳定的、唯一的、不可变的。

4. 性能优化

4.1 避免不必要的渲染

// ❌ 每次渲染都创建新对象
function Component() {
  return <div style={{ color: 'red' }}>内容</div>;
}

// ✅ 使用 useMemo 或外部定义
const styles = { color: 'red' };
function Component() {
  return <div style={styles}>内容</div>;
}

4.2 合理使用 Key

// ❌ key 使用随机值会导致性能问题
items.map(item => (
  <Item key={Math.random()} />
))

// ✅ 稳定的 key 帮助 Diff 算法
items.map(item => (
  <Item key={item.id} />
))

4.3 组件拆分

// ❌ 大组件：任何变化都导致整个组件重渲染
function Dashboard() {
  const [user, setUser] = useState(null);
  const [posts, setPosts] = useState([]);
  const [comments, setComments] = useState([]);
  const [notifications, setNotifications] = useState([]);

  // 用户点击任意按钮，整个 Dashboard 都会重新渲染
  return (
    <div>
      <UserProfile user={user} />
      <PostList posts={posts} />
      <CommentSection comments={comments} />
      <NotificationPanel notifications={notifications} />
    </div>
  );
}

// ✅ 拆分后：变化隔离
// 每个子组件独立，使用 React.memo 避免不必要渲染
const UserProfile = memo(({ user }) => <div>{user.name}</div>);
const PostList = memo(({ posts }) => <ul>{posts.map(p => <li>{p.title}</li>)}</ul>);
const CommentSection = memo(({ comments }) => <div>{comments.length} 条评论</div>);
const NotificationPanel = memo(({ notifications }) => <div>{notifications.length} 条通知</div>);

function Dashboard() {
  const [user, setUser] = useState(null);
  const [posts, setPosts] = useState([]);
  const [comments, setComments] = useState([]);
  const [notifications, setNotifications] = useState([]);

  // 只有 user 变化时，UserProfile 才会重新渲染
  // posts, comments, notifications 的变化不会相互影响
  return (
    <div>
      <UserProfile user={user} />
      <PostList posts={posts} />
      <CommentSection comments={comments} />
      <NotificationPanel notifications={notifications} />
    </div>
  );
}

5. 优缺点总结

5.1 优点

优点说明
性能优化减少真实 DOM 操作次数
跨平台同一套代码可在多端运行
开发体验声明式 API，简化代码逻辑

5.2 缺点

缺点解决方案
首次渲染开销代码分割、懒加载
内存占用合理拆分组件
非最优解必要时直接操作 DOM

6. 真实 DOM vs 虚拟 DOM

// 直接操作真实 DOM（慢）
const element = document.getElementById('root');
element.innerHTML = '<div>内容</div>';
element.style.color = 'red';

// 虚拟 DOM（快）
// React 会在内存中比较差异，批量更新
setContent('内容');
setColor('red');
// 最终只执行一次 DOM 操作

7. 总结

虚拟 DOM 是 React 性能的核心：

  • 声明式: 描述”什么”，而非”如何”
  • 高效: Diff 算法最小化 DOM 操作
  • 跨平台: React Native、React 3D 等

理解虚拟 DOM 的工作原理，能帮助你更好地设计和优化 React 应用。

相关阅读