虚拟DOM实现虚拟DOM思路渲染虚拟DOM说起虚拟DOM必不可少DOM-diff算法更新补丁

虚拟DOM其实就是JS按DOM结构生成的树形结构对象,或叫DOM对象

实现虚拟DOM思路

export function createElement (
 type:any, //接受元素类型
 props:any, // 元素属性
 children:[] //子元素
){
    //创建DOM对象
    return _createElement(type,props,children)
}

渲染虚拟DOM

export function render (_createElement){
    //根据type创建真实DOM
    
    //遍历props添加元素属性
    
    //遍历子节点
    //如果是虚拟DOM,递归render()渲染
    
    //将真实DOM插入页面内
}

说起虚拟DOM必不可少DOM-diff算法

// 每次只更新变化的DOM

//  对比两个树,采用先序遍历深度优先
// -先序(根左右),中序(左根右),后序(左右根)
// -深度优先:尽可能深的去找目标点,找不到返回目标点,继续尽可能深的去找
function diff(oldTree, newTree) {
    // 声明变量patches用来存放补丁的对象
  
    // 递归树 比较后的结果放到补丁里

    return patches;
}

更新补丁

function patch(node, patches) {
    
    // 给某个元素打补丁
    
    //把差异对象应用到真正的DOM树上（patch）
 
}