前端知识杂记(diff算法自解) diff算法 react

diff就是找不同，通过对比新旧VNode找出差异所在，然后将这些差异节点更新到DOM上，最终达到最少操作真实DOM而更新视图的目的。而对比新旧VNode并找出差异的过程就是Dom-Diff过程，也就是patch函数。同层比较，深度优先。

旧的VNode就是数据改变之前视图所对应的虚拟DOM节点；新的VNode就是数据改变以后将要渲染的新的视图所对应的虚拟节点；patch就是以新的VNode为标准去对比旧的VNode，如果新的VNode上有的节点而旧的VNode上没有那么就在旧的上面创建；

如果新的VNode上没有的节点而旧的VNode上有那么就在旧的上面删除；

如果新旧VNode都有的节点则以新的VNode为标准更新旧的VNode；让新旧VNode相同。

创建和删除就是简单的create和remove，而更新比较麻烦，就涉及到了节点类型：

如果新旧节点都是静态节点就是不受数据改变影响的节点则直接跳过；

如果新虚拟节点是文本节点，旧虚拟节点也是文本节点则判断内容是否一样，不一样直接替换文本，如果不是文本节点则直接设置为文本节点且内容一致；（setTextNode）

如果新旧节点都是元素节点要分两种情况：如果新节点没有子节点那么该节点就是个空节点，直接清空旧节点；如果新节点有子节点而旧节点没有子节点则需要在旧节点中创建；如果新旧节点都有子节点，则采取新头旧头，新尾旧尾，新尾旧头，新头旧尾，由两边向中间进行判断（四选一）。四个端点对应四个索引，头索引只能往后加一，尾索引只能向前减一，当头索引大于尾索引代表对比结束。如果新VNode先对比结束则将旧VNode子节点中剩余的节点按旧头旧尾索引删除，如果旧VNode先对比结束则将新VNode子节点中剩余的节点按新头新尾索引在旧VNode子节点中上新增；如果四种情况对比完仍没有发现相同节点则采用双层循环方式去查找子节点差异。

举例：自己电脑上有一份旧的电子需求文档，产品改需求后又出了一份新的纸质需求文档，开发需要一份新的电子需求文档，有两种做法：一是直接放弃旧的电子文档直接按新的文档重新敲一份，另一种则是拿新文档做标准去对比旧的电子文档，找出改的地方进行修改就可以了，这种做法很明显就省事很多，这就是diff的明眼可见的好处。其实中间找文档不同的过程比如先对比看下整体文档变没，看段落多了还是少了，再看段落内具体语句变没也就是vue中的tree-diff，component-diff，element-diff。

前端知识杂记(VUE模板编译)