React 虚拟DOM详解

什么是虚拟DOM

react 中的 virtual DOM （虚拟DOM），其实就是JS对象。

众所周知，浏览器的DOM元素的渲染效率极低，对DOM的优化是前端开发人员一直以来很头疼的问题，而虚拟DOM就是针对真实的DOM元素渲染效率低下而问世的。虚拟DOM在内存中以JS对象的形式存在，模拟了真实DOM的所有结构，在将虚拟DOM渲染到页面上之前，我们的所有操作都在虚拟DOM上进行，你要知道：对JS对象的操作要比对DOM的操作快得多，所以虚拟DOM的出现使前端性能得到了极大的优化。

虚拟DOM模真实DOM的操作

假设我们有一个创建虚拟DOM的方法：createElement( tag, props, children )

createElement方法可以帮我们创建一个虚拟DOM，来模仿你想要的真实DOM的结构

参数：

tag：DOM元素的标签（ 'a' , 'p ', 'div' ...）

props：DOM元素的属性（ {className:'box' , id:'container' , style:{fontSize:'20px'} , key:1 , ...}）

children：DOM元素的内容（字符串或其他虚拟DOM元素组成的数组）

// 用 createElement 方法创建一个虚拟DOM的结构
let virtualDOM = createElement('div',{id:'container'},[
    createElement('p',{className:'msg',key:1},'这是一条消息'),
    createElement('p',{className:'msg',key:2},'这是另一条消息'),
    createElement(null,null,'这是一条没有标签包裹的文本'),
    createElement('button',{className:'btn',key:3},'按钮')
]);

现在，很简单的一个虚拟DOM结构已经创建完成了，显然，虽然它拥有自己的属性和结构，但是目前为止这个虚拟DOM只是一个JS对象而已，我们对它进行的任何操作都是在内存中完成的（虚拟DOM性能好的原因）。但是我们最终需要的是一个真实的DOM，所以我们还需要一个render方法：render( virtualDOM, DOM )

render 方法可以将你的虚拟DOM解析成真实的DOM并渲染到页面上

参数：

virtualDOM：需要解析的虚拟DOM

DOM：需要渲染在哪个DOM里

render(virtualDOM,document.getElementById('root'));

至此，一个简单的 virtualDOM 模拟真实DOM 的流程就结束了。

虚拟DOM原理

初始化：定义类型。

// 定义一个tag类型集合
const tagTypes = {
    HTML:"HTML",
    TEXT:"TEXT"
}


// 定义children类型集合
const childrenTypes = {
    // 子元素只有一个  说明是字符串
    single:"single",
    // 子元素是一个数组  数组里是多个元素
    many:"many",
    // 子元素是一个空  没有子元素
    empty:"empty"
}

createElement()

实现原理：根据你传入参数的类型，返回一个对应出来你想要的结构的整合后的JS对象。

// 创建虚拟dom的方法
function createElment(tag,props,children){
    
    // 定义tag类型
    let type;
    
    // 如果tag存在，那么该元素就是HTML元素，否则是字符串
    if(typeof tag === 'string'){
        type = tagTypes.HTML;
    }else{
        type = tagTypes.TEXT;
    }

    // 定义children类型
    let childrenType;
    
    // 如果children是文本的时候就创建一个文本虚拟dom
    // 如果children是数组的时候就创建一个有子节点的虚拟dom
    // 如果children是空的时候就创建一个空虚拟dom
    if(typeof children === 'string'){
        childrenType = childrenTypes.single;
        // createTextNode:创建文本DOM方法
        children = createTextNode(children)
    }else if(Array.isArray(children)){
        childrenType = childrenTypes.many;
    }else{
        childrenType = childrenTypes.empty;
    }

    // 返回虚拟dom对象
    return {
        el:null,
        type,
        tag,
        props,
        children,
        childrenType
    }
}

//创建文本虚拟dom，直接返回一个对应的文本虚拟DOM
function createTextNode(text){
    return {
        type:'text',
        tag:null,
        props:null,
        children:text,
        childrenType:childrenTypes.empty
    }
}

render()

// 渲染方法
function render(vnode, container){

    if(container.vnode){
        // 如果虚拟DOM已经存在，那么执行更新
        // 这一步是相当复杂的diff算法，单独开辟章节来讲，此处暂时只考虑首次渲染
    }else{
        // 如果虚拟DOM没有存在，那么执行挂载（首次渲染）
        mounted(vnode, container);
    }

    // 判断是初次渲染还是更新渲染
    container.vnode = vnode;
}

// 首次渲染函数
function mounted(vnode,container){
    
    let {type} = vnode;
    if(type === 'HTML'){
        // 渲染HTML元素方法
        mountedElement(vnode,container)
    }else{
        // 渲染文本元素方法
        mountedText(vnode,container)
    }
}

// 渲染HTML元素的方法
function mountedElement( vnode, container ){
    let { type, tag, props, children, childrenType } = vnode;
    // el是真是的DOM元素，此处创建tag对应的DOM元素并赋给el
    var el = document.createElement(tag);
    vnode.el = el;
    
    // 遍历设置props属性
    if(props){
        for(var key in props){
            /*  设置DOM的属性(方法在代码最后)
                语法:patchProps( 设置属性的元素, 属性的key值, 旧的value值, 新的value )  */
            patchProps(el,key,null,props[key])
        }
    }
    
    // 判断该元素的子元素的类型
    if(childrenType === childrenTypes.single){
        // 如果 childrenType 属性为 single 那么肯定是文本，用渲染文本方法将子元素渲染
        mountedText(children, el)
    }else if(childrenType === childrenTypes.many){
        // 如果 childrenType 属性为 many 则肯定是嵌套子元素，遍历后用首次渲染方法将子元素渲染（递归）
        children.forEach((item)=>{
            mounted( item, el )
        })
    }

    // 渲染完成后，最终要插入到父级里面（最高父级就是root）
    container.appendChild(el);
}

// 渲染文本虚拟dom的方法
function mountedText(vnode,container){
    // 创建一个对应的文本节点，直接插入父元素
    var textNode = document.createTextNode(vnode.children);
    vnode.el = textNode;
    container.appendChild(textNode);
}

// 挂载属性的方法(部分情况)
// patchProps( 设置属性的元素, 属性的key值, 旧的value值, 新的value )
function patchProps(el, key, oldVal, newVal) {
    switch (key) {
        case 'className':
            el.className = newVal;
            break;
        case 'id':
            el.id = newVal;
            break;
        case 'onClick':
            el.addEventListener("click", newVal);
            break;
        case 'style': {
            for (var sKey in newVal) {
                el.style[sKey] = newVal[sKey];
            }
            break;
        }
        default:
            if (key != 'key') {
                el.setAttribute(key, newVal);
            }

    }
}

至此，一个简单版的react中虚拟DOM的底层原理就实现啦

✿✿ヽ(°▽°)ノ✿

React 虚拟DOM详解

什么是虚拟DOM

虚拟DOM模 真实DOM的操作

虚拟DOM原理

推荐阅读更多精彩内容

虚拟DOM模真实DOM的操作