React 虚拟dom原理小结
虚拟DOM原理
简述
虚拟Dom相当于在真实dom和js中间加了一个缓存,将真实的dom转化成一个json对象,从而利用diff算法避免了不必要的dom操作,以此提高性能。
JS原生代码模拟实现
(引入babel.min.js)
实现思路:通过jsx新建虚拟DOM >> 根据虚拟DOM属性转换为JSON对象 >> 通过自定义render方法将JSON对象中节点信息取出,进行真实DOM操作
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script type="text/babel">
// 1、新建虚拟dom
let vDom = (
<div id="app" name="appName">
Hello World!
<ul>
<li>apple</li>
<li>banana</li>
</ul>
</div>
)
/*@jsx createElement*/ // @jsx babel的自执行指令
// 2、将dom信息转化为JSON对象
function createElement(nodeName, attr, ...args) {
return {nodeName: nodeName, attr: attr, children: [].concat(...args)}
}
// 3、定义render函数
render(vnode) {
// 通过vnode.split判断节点是否是文本
// 如果是文本
if (vnode.split) {
return document.createTextNode(vnode);
}
// 如果不是文本
let node = document.createElement(vnode.name);
// 添加属性
let attrs = vnode.attr;
Object.key(attrs).forEach((k) => {
node.setAttribute(k, attrs[k]);
});
// 新增子节点,因为子节点层级数目不定,因此需要递归
(vnode.children || []).forEach((n) => {
node.appenChild(render(n))
})
return node
}
// 4、最后通过调用render函数生成真实dom树添加至document中
let dom = render(vDom);
document.body.appendChild(dom);
</script>