什么是虚拟 DOM#

虚拟 DOM（Virtual DOM）是一个 JavaScript 对象，它是对真实 DOM 的抽象表示。React 通过在内存中维护这个对象树来实现高效的页面更新。

1
// 虚拟 DOM 示例结构
2
{
3
  type: 'div',
4
  props: {
5
    className: 'container',
6
    children: [
7
      { type: 'h1', props: { children: 'Hello' } },
8
      { type: 'p', props: { children: 'World' } }
9
    ]
10
  }
11
}

虚拟 DOM 的优势#

1. 减少真实 DOM 操作 - 批量更新，减少回流重绘
2. 跨平台渲染 - React Native、React VR 等
3. 函数式 UI - UI 可以作为纯函数

Diff 算法#

React 使用协调（Reconciliation）算法来比较新旧虚拟 DOM 树，找出最小更新方案。

TIP

React 16 引入的 Fiber 架构带来了可中断的渲染能力，大大提升了用户体验。

总结#

理解虚拟 DOM 的工作原理能够帮助我们更好地编写高性能的 React 应用。

参考资料：React 官方文档