【Diff算法图解】带你探索React、Vue2.x的Diff算法

---

前言

我们都知道，在框架中，当dom节点发生变化时，并不会去改变所有的dom结构，而是对应的改变其中需要改变的部分。那我们思考一下，这里面的原理是什么呢？

在看文章之前，我们先来了解一下虚拟dom，然后慢慢分析，找到其中的奥妙！

一、Virtual DOM（虚拟dom）

Virtual DOM 其实就是一棵以 JavaScript 对象（VNode 节点）作为基础的树，用对象属性来描述节点，相当于在js和真实dom中间加来一个缓存。

我们需要对比虚拟dom和真实dom之间的差异，来进行响应的更新。

实现步骤可如下（以Vue为例）：

1. 用JavaScript对象结构表述dom树的结构，然后用这个树构建一个真正的dom树，插到浏览器的页面中。
2. 当状态改变了，也就是我们的state做出修改，vue便会重新构造一棵树的对象树，然后用这个新构建出来的树和旧树进行对比（只进行同层对比），记录两棵树之间的差异。
3. 把2记录的差异在重新应用到步骤1所构建的真正的dom树，视图就更新了。

这个时候我们应该就有疑问了，上面说要进行同层对比，应该怎么去进行对比呢？难道是暴力法一个个比吗？（开发者肯定不会这么傻）

没错！方法就是我们今天要谈的diff算法，下面开始进入正题！

我们在探索之前，首先来看一看diff算法的基本思路：

• 只比较同一级，不跨级比较
• tag不相同，直接删掉重建，不再深度比较
• tag和key，两者都相同，则认为是相同节点，不在深度比较

diff的过程就是调用名为patch的函数，比较新旧节点，一边比较一边给真实的DOM打补丁

patch: 可以简单的理解为给当前DOM节点进行更新，并且调用diff算法对比自身的子节点;

key:Vnode的唯一标识符（确保节点唯一性），来辨别节点是否相同。

二、React Diff

实现思想

思路：递增法，通过判断新节点的位置是否是递增的。由此来判断节点是否需要改变。

我们来观察这个图，很明显prevList的结点索引为0-1-2-3，而nextList的节点索引也是0-1-2-3，那么它就不需要进行移动。（每一项都比前一项大！）

移动节点

移动节点所指的节点是DOM节点。vnode.el指向该节点对应的真实DOM节点。patch方