React虚拟DOM与Diff算法

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

对react的虚拟DOM和diff 算法简单总结

---

一、虚拟 DOM（Virtual DOM）

虚拟 DOM 是 React 中的一个重要概念，它是对真实 DOM 的抽象表示，使用 JavaScript 对象（JS Object）来表示 DOM 节点。createElement 函数会创建一个拥有属性和子节点的虚拟 DOM 节点。虚拟 DOM 不会直接操作页面的真实 DOM，而是通过对比当前和新的虚拟 DOM 树之间的差异，最终计算出一系列最小化的 DOM 更新操作。

使用虚拟 DOM 的原因是因为直接操作真实 DOM 的成本较高。频繁地操作 DOM 会导致页面的重新渲染，这会消耗大量的计算资源。虚拟 DOM 的出现允许我们先将修改缓存在虚拟 DOM 中，然后计算出最小化的 DOM 操作，降低了页面的渲染消耗。

二、Diff 算法

Diff 算法（区分算法）是 React 用于比较新旧两颗虚拟 DOM 树差异的算法。Diff 算法实际上是一种优化策略，以最小化 DOM 操作为目标。

React 的 Diff 算法可以分为以下三个层次：

• 节点类型不同：React 通过比较新旧虚拟 DOM 树中节点的类型。如果节点类型不同，React 会直接删除当前节点及其子节点，并创建新节点。

• 节点类型相同且是原生 DOM 节点：React 会比较节点的属性（attr），仅更新发生变化的属性。同样，React 会递归子节点并执行相应操作。

• 节点类型相同且是组件：React 会调用该组件的 render 方法以生成新的虚拟 DOM 树，然后再次执行 Diff 算法。组件的生命周期方法（如 componentWillReceiveProps, shouldComponentUpdate, componentWillUpdate 等）在这个阶段相继执行。

此可分为以下几个步骤：

1. 更新组件树：开始时，React 会将新旧两颗虚拟 DOM 树进行逐层对比。
2. 生成差异列表：对比过程中，React 会记录两棵树之间的差异，并将差异生成一个列表（事务）。
3. 最小化 DOM 操作：有了差异列表后，React 会根据差异列表计算出最小化的 DOM 操作来更新页面。

这种高效的 Diff 算法使得 React 在渲染性能上具有优势。通过将页面的实际更新操作最小化，React 可以高效地进行页面渲染，进而提升用户体验。