虚拟DOM学习与总结

虚拟DOM

　　虚拟DOM简而言之就是，用JS去按照DOM结构来实现的树形结构对象，一般称之为虚拟节点(VNode)

        优点：解决浏览器性能问题 ，真实DOM频繁排版与重绘的效率是相当低的,虚拟DOM进行频繁修改，然后一次性比较并修改真实DOM中需要改的部分（注意！），最后并在真实DOM中进行排版与重绘，减少过多DOM节点排版与重绘损耗。

例子1：

<div>我是文本</div>

let VNode = {
    tag:'div',
    children:'我是文本'      
}

例子2：

<div class="container" style="color:yellow"></div>

let VNode = {
    tag:'div',
    data:{
        class:'container',
        style:{
            color:'yellow'
        }
    },
    children:''
}

例子3：

<div class="container"> 
    <h1 style="color:red">标题</h1> 
    <span style="color:grey">内容</span>
    <span></span>
<div> 

let VNode = { 
    tag: 'div', 
    data:{ 
        class:'container' 
    }, 
    children:[ 
        { 
            tag:'h1', 
            data：null, 
            children:{ 
                data: { 
                    style:{ 
                        color:'red' 
                    } 
                }, 
                children: '标题' 
            } 
        }, 
        { 
            tag:'span', 
            data:null, 
            children:{ 
                data: { 
                    style:{ 
                        color:'grey' 
                    } 
                }, 
                children: '内容' 
            } 
        },
        {
            tag:'span',
            data:null,
            children:''
        }
    ] 
}

 看完了例子,聪明的你一定知道了什么是虚拟dom。

 snabbdom

 先看一眼github上的例子

 snabbdom有几个核心函数,h函数，render函数和patch函数。

 h函数

 用于创建VNode（virtual node虚拟节点），追踪dom变化的。

 React中通过babel将JSX转换为h函数的形式，Vue中通过vue-loader将模板转换为h函数。

假设在vue中我们有如下模板

<template>
    <div>
        <h1></h1>
    </div>
</template>

用h函数来创建与之相符的VNode：

const VNode = h('div',null,h('h1'))

得到的VNode对象如下：

const VNode = { 
  tag: 'div', 
  data: null, 
  children: { 
    tag: 'span', 
    data: null, 
    children: null 
  } 
}

 什么是虚拟DOM的挂载

虚拟DOM挂载：将虚拟DOM转化为真实DOM的过程

主要用到如下原生属性或原生方法：

• 创建标签：document.createElement(tag)

• 创建文本：document.createTextNode(text);

• 追加节点：parentElement.appendChild(element)

什么是虚拟DOM的更新

虚拟DOM更新：当节点对应得vnode发生改变时，比较新旧vnode的异同，从而更新真实的DOM节点。

let prevVNode = { 
    //... 
} 
let nextVNode = { 
    //... 
} 

//挂载 
render(prevVNode,container) 

//更新 
setTimeout(function(){ 
    render(nextVNode,container) 
},2000)

我们在更新的时候，又分为两种情况：

1. prevVNode和nextVNode都有，执行比较操作

2. 有prevVNode没有nextVNode，删除prevVNode对应的DOM即可

function render(vNode,container){ 
    const prevVNode = container.vNode; 
    //之前没有-挂载 
    if(prevVNode === null || prevVNode === undefined){ 
        if(vNode){ 
            mount(vNode,container); 
            container.vNode = vNode; 
        } 
    } 
    //之前有-更新 
    else{ 
        //之前有，现在也有 
        if(vNode){ 
            //比较 
        } 
        //以前有,现在没有,删除 
        else{ 
            //删除原有节点 
        } 
    } 
}

 

 render函数

 将VNode转化为真实DOM

 接收两个参数：

• 虚拟节点
• 挂载的容器

function render(VNode,container){ 
    //... 
}

 最终render代码

 

function render(vNode,container){ 
    const prevVNode = container.vNode; 
    //之前没有-挂载 
    if(prevVNode === null || prevVNode === undefined){ 
        if(vNode){ 
            mount(vNode,container); 
            container.vNode = vNode; 
        } 
    } 
    //之前有-更新 
    else{ 
        //之前有，现在也有 
        if(vNode){ 
            patch(prevVNode,vNode,container); 
            container.vNode = vNode; 
        } 
        //以前有,现在没有,删除 
        else{ 
            removeChild(container,prevVNode.el); 
            container.vNode = null; 
        } 
    } 
}

 

 

 

patch函数

 想了半天没想到怎么描述，我个人的理解就是，挂载更新，就是prevVNode 和 nextVNode 是如何进行对比的

 

我们现在将VNode只分为了两类：

1. 元素节点

2. 文本节点

那么 prevVNode 和 nextVNode 可能出现的情况只会有以下三种：

1. 二者类型不同

2. 二者都是文本节点

3. 二者都是元素节点，且标签相同

当二者类型不同时，只需删除原节点，挂载新节点即可：

function patch (prevVNode, nextVNode, container) { 
    removeChild(container, prevVNode.el); 
    mount(nextVNode, container); 
}

当二者都是文本节点时，只需修改文本即可

function patch (prevVNode, nextVNode, container) { 
    const el = (nextVNode.el = prevVNode.el) 
    if(nextVNode.children !== prevVNode.children){ 
        el.nodeValue = nextVNode.children; 
    } 
}

当二者都是元素节点且标签相同时，此时比较麻烦，考虑是一个patchElement函数用于处理此种情况

function patch (prevVNode, nextVNode, container) { 
    patchElement(prevVNode, nextVNode, container) 
}

最终 patch 函数的代码如下：

function patch (prevVNode, nextVNode, container) { 
    // 类型不同,直接替换 
    if ((prevVNode.tag || nextVNode.tag) && prevVNode.tag !== nextVNode.tag) { 
        removeChild(container, prevVNode.el); 
        mount(nextVNode, container);  
    } 
    // 都是文本 
    else if(!prevVNode.tag && !nextVNode.tag){ 
        const el = (nextVNode.el = prevVNode.el) 
        if(nextVNode.children !== prevVNode.children){ 
            el.nodeValue = nextVNode.children; 
        } 
    } 
    // 都是相同类型的元素 
    else { 
        patchElement(prevVNode, nextVNode, container) 
    } 
}

比较相同tag的VNode(patchElement)

因为tag相同，所以patchElement函数的功能主要有两个：

1. 检查prevVNode和nextVNode对应的元素属性是否一致(style、class、event等)，不一致更新

2. 比较prevVNode和nextVNode对应的子节点(children)

关于元素属性的比较与挂载阶段的逻辑基本一致，就不在此继续展开，我们主要考虑如何对子节点进行比较

子节点可能出现的情况有三种：

1. 没有子节点

2. 一个子节点

3. 多个子节点

所以关于prevVNode和nextVNode子节点的比较，共有9种情况：

1. 旧:单个子节点 && 新：单个子节点

2. 旧:单个子节点 && 新：没有子节点

3. 旧:单个子节点 && 新：多个子节点

4. 旧:没有子节点 && 新：单个子节点

5. 旧:没有子节点 && 新：没有子节点

6. 旧:没有子节点 && 新：多个子节点

7. 旧:多个子节点 && 新：单个子节点

8. 旧:多个子节点 && 新：没有子节点

9. 旧:多个子节点 && 新：多个子节点

前8中情况都比较简单，这里简单概括一下：

1.旧:单个子节点 && 新：单个子节点

都为单个子节点，递归调用patch函数

2.旧:单个子节点 && 新：没有子节点

删除旧子节点对应的DOM

3.旧:单个子节点 && 新：多个子节点

删除旧子节点对应的DOM，并将多个新子节点依次递归调用mount函数进行挂载即可

4.旧:没有子节点 && 新：单个子节点

直接调用mount函数疆新单个子节点进行挂载即可

5.旧:没有子节点 && 新：没有子节点

什么也不做

6.旧:没有子节点 && 新：多个子节点

将多个新子节点依次递归调用mount函数进行挂载即可

7.旧:多个子节点 && 新：单个子节点

删除多个旧子节点对应的DOM，递归调用mount函数对单个新子节点进行挂载即可

8.旧:多个子节点 && 新：没有子节点

删除多个旧子节点对应的DOM即可

9.旧:多个子节点 && 新：多个子节点

对于新旧子节点均为多个子节点的情况，是VNode更新阶段最复杂的情况，无论是React还是Vue都有不同的实现方案，这些实现方案也就是我们常说的Diff算法。

今天先不涉及比较复杂的Diff算法，关于Diff算法的内容，留到日后进行讲解，我们先通过最简单的方式来实现多个新旧子节点的更新（性能最差的做法）。

遍历旧的子节点，将其全部移除:

for (let i = 0; i < prevChildren.length; i++) { 
    removeChild(container,prevChildren[i].el) 
}

遍历新的子节点，将其全部挂载

for (let i = 0; i < nextChildren.length; i++) { 
    mount(nextChildren[i], container) 
}

最终的代码如下：

export const patchElement = function (prevVNode, nextVNode, container) { 

    const el = (nextVNode.el = prevVNode.el); 

    const prevData = prevVNode.data; 
    const nextData = nextVNode.data; 

    if (nextData) { 
        for (let key in nextData) { 
            let prevValue = prevData[key]; 
            let nextValue = nextData[key]; 
            patchData(el, key, prevValue, nextValue); 
        } 
    } 
    if (prevData) { 
        for (let key in prevData) { 
            let prevValue = prevData[key]; 
            if (prevValue && !nextData.hasOwnProperty(key)) { 
                patchData(el, key, prevValue, null); 
            } 
        } 
    } 
    //比较子节点 
    patchChildren( 
        prevVNode.children, 
        nextVNode.children, 
        el 
    ) 
} 


function patchChildren(prevChildren, nextChildren, container) { 
    //旧:单个子节点 
    if(prevChildren && !Array.isArray(prevChildren)){ 
        //新：单个子节点 
        if(nextChildren && !Array.isArray(nextChildren)){ 
            patch(prevChildren,nextChildren,container) 
        } 
        //新：没有子节点 
        else if(!nextChildren){ 
            removeChild(container,prevChildren.el) 
        } 
        //新：多个子节点 
        else{ 
            removeChild(container,prevChildren.el) 
            for(let i = 0; i<nextChildren.length; i++){ 
                mount(nextChildren[i], container) 
            } 
        } 
    } 
    //旧:没有子节点 
    else if(!prevChildren){ 
        //新：单个子节点 
        if(nextChildren && !Array.isArray(nextChildren)){ 
            mount(nextChildren, container)  
        } 
        //新：没有子节点 
        else if(!nextChildren){ 
            //什么都不做 
        } 
        //新：多个子节点 
        else{ 
            for (let i = 0; i < nextChildren.length; i++) { 
                mount(nextChildren[i], container) 
            } 
        } 
    } 
    //旧:多个子节点 
    else { 
        //新：单个子节点 
        if(nextChildren && !Array.isArray(nextChildren)){ 
            for(let i = 0; i<prevChildren.length; i++){ 
                removeChild(container,prevChildren[i].el) 
            } 
            mount(nextChildren,container)    
        } 
        //新：没有子节点 
        else if(!nextChildren){ 
            for(let i = 0; i<prevChildren.length; i++){ 
                removeChild(container,prevChildren[i].el) 
            } 
        } 
        //新：多个子节点 
        else{ 
            // 遍历旧的子节点，将其全部移除 
            for (let i = 0; i < prevChildren.length; i++) { 
                removeChild(container,prevChildren[i].el) 
            } 
            // 遍历新的子节点，将其全部添加 
            for (let i = 0; i < nextChildren.length; i++) { 
                mount(nextChildren[i], container) 
            }  
        } 
    } 

}

此文参考：

冰山工作室 http://www.bingshangroup.com/blog2/action2/jspool%EF%BC%9A%E9%99%88%E5%85%B6%E4%B8%B0/VNode2.html