关于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>