虚拟DOM的理解

虚拟DOM的理解

在JavaScript中创建一个DOM节点对象时，我们通常会考虑tag（标签）,props（属性）,children（子节点）这三项基本属性

所以我们可以创建相应的对象及属性{tag,props,children}来把他们存储在内存中

然后再执行渲染，再把他渲染后添加到真实DOM上面去

下面是一个示例代码

class VNode {constructor(tag,props,children){this.tag = tagthis.props = propsthis.children = children}
}function createElement(tag,props,...children){return new VNode(tag,props,children)
}function render(vnode){if(typeof vnode==="string"){return  document.createTextNode(vnode)}const element = document.createElement(vnode.tag)for(const [key,value] of Object.entries(vnode.props||{})){element.setAttribute(key,value)}for(const child of vnode.children){element.appendChild(render(child))}return element
}
//然后就可以快速的传节点来进行渲染了

需要注意的点:

代码中用到了数组的解构赋值[key,value] of xxx可以把键值对数组的值结构出来放到key和value变量中

Object.entries()可以把对象的可枚举属性，转化成键值对数组

通常默认创建的对象属性都是可枚举的，不可枚举的属性创建如下：

Object.defineProperty(user,userName,{enumerable:false
})

可枚举属性可以通过for in语句进行遍历