虚拟DOM之更新

[chenqf]

虚拟DOM之更新

回顾

什么是虚拟DOM

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

例1

<div class="container" style="color:red">
<div>

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

例2

我是文本

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

例3

<div class="container">
    <!-- 子元素1 -->
    <!-- 子元素2 -->
<div>

let VNode = {
    tag: 'div',
    data:{
        class:'container'
    },
    children:[
        VNode1, // 对应子元素1
        VNode2  // 对应子元素2
    ]
}

完整的例子：

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

对应的VNode结构如下：

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: '内容'
            }
        },
    ]
}

什么是h函数

h函数作为创建VNode对象的函数封装，React中通过babel将JSX转换为h函数的形式，Vue中通过vue-loader将模板转换为h函数。

function h(tag = null,data = null,children = null){
    // ...
}

假如在Vue中我们有如下模板：

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

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

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

得到的 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)

render函数是做什么的

render函数的作用就是：将VNode转化为真实DOM

接收两个参数:

• 虚拟节点
• 挂载的容器

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

演示

通过 h函数 和 render函数，生成如下结构的html

容器：

<div id="container"></div>

像容器中插入如下html片段：

<div id="bingshan" class="c1 c2" style="background: rgba(0, 132, 255, 0.1); padding: 10px;">
    <span>我是span1</span>
    <br>
    <span>我是span2</span>
</div>

代码如下：

let container = document.getElementById('container');

let VNode = h('div',
    {
        style: {
            background: '#0084ff1a',
            padding:'10px'
        },
        id:'bingshan',
        class:['c1 c2'],
        onclick:function(){
            alert('VNode')
        }
    }, 
    [
        h('span',null,'我是span1'),
        h('br'),
        h('span',null,'我是span2')
    ]
)

// 挂载
render(VNode, container)

结果如下：

什么是虚拟DOM的更新

虚拟DOM的更新指的是：当节点对应的VNode发生变更时，比较新旧VNode的异同，更新真实DOM节点

虚拟DOM更新时依然会调用Render函数

本文暂不涉及Vue和React中当数据变化时是如何重新生成VNode以及如何调用Render函数的，在此通过手动调用的方式来模拟：

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

//挂载
render(prevVNode,container)

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

render

由于更新时需要获取prevVNode与nextVNode进行比较，所以在挂载时，将prevVNode存储在容器节点的属性上，方便更新时使用。

function render(VNode,container){
    //初始化渲染
    mount(vNode,container);
    container.vNode = vNode;
}

既然容器节点的属性存储了prevVNode，那么我们就可以在调用render函数时，通过判断是否有vNode这个属性，来判断是挂载还是更新。

function render(vNode,container){
    const prevVNode = container.vNode;
    //之前没有-挂载
    if(prevVNode === null || prevVNode === undefined){
        if(vNode){
            mount(vNode,container);
            container.vNode = vNode;
        }
    }
    //之前有-更新
    else{
        //....
    }
}

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

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{
            //删除原有节点
        }
    }
}

我们先考虑有prevVNode没有nextVNode的情况，此时需要删除prevVNode对应的DOM节点

那么如何获取prevVNode对应的DOM节点呢？

我们可以在挂载的阶段，将dom节点作为属性存储在prevVNode上：

function mountElement(VNode, container) {
    //省略...
    const el = createElement(tag);
    VNode.el = el;
    //省略...
}

function mountText = (VNode, container) {
    const el = createTextNode(VNode.children);
    vNode.el = el;
    appendChild(container, el);
}

再考虑有prevVNode也有nextVNode的情况，此时需要对二者进行对比，考虑实现patch函数

function patch(prevVNode,nextVNode,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)
            }
        }
    }

}