Virtual DOM Diff算法

落日映苍穹つ 2022-11-29 05:58 206阅读 0赞

![format_png][]

Diff算法的作用是用来计算出 **Virtual DOM** 中被改变的部分，然后针对该部分进行原生DOM操作，而不用重新渲染整个页面。  
Diff算法有三大策略：

> 1.  Tree Diff
> 2.  Component Diff
> 3.  Element Diff

三种策略的执行顺序也是顺序依次执行。  
**Tree Diff** 是对树每一层进行遍历，找出不同，如图1所示。

![format_png 1][]

图1 Tree Diff

**Component Diff** 是数据层面的差异比较

1.  如果都是同一类型的组件(即：两节点是同一个组件类的两个不同实例，比如：<div id="before"></div>与<div id="after"></div>)，按照原策略继续比较Virtual DOM树即可
2.  如果出现不是同一类型的组件，则将该组件判断为dirty component，从而替换整个组件下的所有子节点

**Element Diff**真实DOM渲染，结构差异的比较

首先进行第一层比较，第一层都是R，不发生变化；然后进入第二层Component Diff，发现A组件没有，则删除A及其子组件B、C；最后比较第三层，创建A及其子组件B、C。

当节点处于同一层级时，Diff提供三种DOM操作：**删除**、**移动**、**插入**。

![format_png 2][]

图2 Element Diff

如图2所示，首先将OldVnode 和 NewVnode的首尾位置分别标记为oldS、oldE、newS、newE。

(1) oldS和newS相同，不发生变化，oldS++，newS++。

> oldS = a，oldE = d  
> newS = a, newE = c

(2) newS与OldVnode不匹配，oldS前面插入f，newS++。

> oldS = b，oldE = d  
> newS = f， newE = c

(3) newS与oldE相同，oldE移动到oldS前面，newS++，oldE--。

> oldS = b，oldE = d  
> newS = d， newE = c

(4) newE与oldE相同，不发生变化，newE--，oldE--。

> oldS = b，oldE = c  
> newS = e， newE = c

(5) 都不相同，oldS前插入newE，删除oldS，oldS++，newS++，newE--，oldE--。

> oldS = b，oldE = b  
> newS = e， newE = e

(6) oldS > oldE，Diff结束，最后结果为：a、f、d、e、c。

**最后附上核心源码分析：**  
**patch**

function patch (oldVnode, vnode) {
        // some code
        if (sameVnode(oldVnode, vnode)) {
            patchVnode(oldVnode, vnode)
        } else {
            const oEl = oldVnode.el // 当前oldVnode对应的真实元素节点
            let parentEle = api.parentNode(oEl)  // 父元素
            createEle(vnode)  // 根据Vnode生成新元素
            if (parentEle !== null) {
                api.insertBefore(parentEle, vnode.el, api.nextSibling(oEl)) // 将新元素添加进父元素
                api.removeChild(parentEle, oldVnode.el)  // 移除以前的旧元素节点
                oldVnode = null
            }
        }
        // some code 
        return vnode
    }
    
    patchVnode (oldVnode, vnode) {
        const el = vnode.el = oldVnode.el
        let i, oldCh = oldVnode.children, ch = vnode.children
        if (oldVnode === vnode) return
        if (oldVnode.text !== null && vnode.text !== null && oldVnode.text !== vnode.text) {
            api.setTextContent(el, vnode.text)
        }else {
            updateEle(el, vnode, oldVnode)
            if (oldCh && ch && oldCh !== ch) {
                updateChildren(el, oldCh, ch)
            }else if (ch){
                createEle(vnode) //create el's children dom
            }else if (oldCh){
                api.removeChildren(el)
            }
        }
    }

这个函数做了以下事情：

*  找到对应的真实dom，称为el
 *  判断Vnode和oldVnode是否指向同一个对象，如果是，那么直接return
 *  如果他们都有文本节点并且不相等，那么将el的文本节点设置为Vnode的文本节点。
 *  如果oldVnode有子节点而Vnode没有，则删除el的子节点
 *  如果oldVnode没有子节点而Vnode有，则将Vnode的子节点真实化之后添加到el
 *  如果两者都有子节点，则执行updateChildren函数比较子节点

**updateChildren**

[format_png]: /images/20221124/c13f3ac297d544da9912283cb9469999.png
[format_png 1]: /images/20221124/f9c852dc657e421cb087874d2a2d3cbd.png
[format_png 2]: /images/20221124/2d76644749574bf1bdd218033530dd24.png