本文我们总结一下有关diff算法的相关内容和实现原理

开门见山，直接先给出大家diff算法的概念

diff算法可以看作是一种对比算法，对比的对象是新旧虚拟Dom。顾名思义，diff算法可以找到新旧虚拟Dom之间的差异，但diff算法中其实并不是只有对比虚拟Dom，还有根据对比后的结果更新真实Dom。

上面的概念我们提到了虚拟Dom，相信大家对这个名词并不陌生，下面为大家解释一下虚拟Dom的概念，以及diff算法中为什么要对比虚拟Dom，而不是直接去操作真实Dom。

虚拟Dom，其实很简单，就是一个用来描述真实Dom的对象

它有六个属性，sel表示当前节点标签名，data内是节点的属性，children表示当前节点的其他子标签节点，elm表示当前虚拟节点对应的真实节点（这里暂时没有），key即为当前节点的key，text表示当前节点下的文本，结构类似这样。

那么虚拟Dom有什么用呢。我们其实可以把虚拟Dom理解成对应真实Dom的一种状态。当真实Dom发生变化后，虚拟Dom可以为我们提供这个真实Dom变化之前和变化之后的状态，我们通过对比这两个状态，即可得出真实Dom真正需要更新的部分，即可实现最小量更新。在一些比较复杂的Dom变化场景中，通过对比虚拟Dom后更新真实Dom会比直接更新真实Dom的效率高，这也就是虚拟Dom和diff算法真正存在的意义。

在介绍diff算法原理之前还需要简单让大家了解一下h函数，因为我们要靠它为我们生成虚拟Dom。这个h函数大家应该也比较熟悉，就是render函数里面传入的那个h函数。

h函数可以接受多种类型的参数，但其实它内部只干了一件事，就是执行vnode函数。根据传入h函数的参数来决定执行vnode函数时传入的参数。那么vnode函数又是干什么的呢？vnode函数其实也只干了一件事，就是把传入h函数的参数转化为一个对象，即虚拟Dom。

执行h函数后，内部会通过vnode函数生成虚拟Dom，h函数把这个虚拟在return出去。

明确了h函数是干什么的，我们可以简单用h函数生成两个不同的虚拟节点，我们将通过一个简易版的diff算法代码介绍diff对比的具体流程。

比较的第一步就是执行patch，它相当于对比的入口。既然是对比两个虚拟Dom，那么就将两个虚拟Dom作为参数传入patch中。patch的主要作用是对比两个虚拟Dom的根节点，并根据对比结果操作真实Dom。

patch函数的核心代码如下，注意注释。