虚拟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的过程

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

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

创建标签：document.createElement(tag)
创建文本：document.createTextNode(text);
追加节点：parentElement.appendChild(element)

render函数

将VNode转化为真实DOM

接收两个参数：

虚拟节点
挂载的容器

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

patch函数

想了半天没想到怎么描述，我个人的理解就是，挂载更新，

虚拟DOM学习与总结

猜你喜欢