React 学习笔记（4）：虚拟 DOM 和真实 DOM 的比较

例子代码：

<script type="text/babel" > /* 此处一定要写babel */
	//1.创建虚拟DOM
	const VDOM = (  /* 此处一定不要写引号，因为不是字符串 */
		<h1 id="title">
			<span>Hello,React</span>
		</h1>
	)
	//2.渲染虚拟DOM到页面
	ReactDOM.render(VDOM,document.getElementById('test'))

	const TDOM = document.getElementById('demo')
	console.log('虚拟DOM',VDOM);
	console.log('真实DOM',TDOM);
	debugger;
	// console.log(typeof VDOM);
	// console.log(VDOM instanceof Object);
	/* 
	关于虚拟DOM：
		1.本质是Object类型的对象（一般对象）
		2.虚拟DOM比较“轻”，真实DOM比较“重”，因为虚拟DOM是React内部在用，无需真实DOM上那么多的属性。
		3.虚拟DOM最终会被React转化为真实DOM，呈现在页面上。
	 */
</script>

浏览器打印：

 

个人总结：

• 虚拟 DOM 的本质是 JavaScript 中普通的对象字面量，只不过这个对象字面量能够很好的描述真实 DOM（虚拟 DOM 是真实 DOM 的一种抽象描述），并且能以虚拟 DOM 为蓝本创建真实的 DOM 节点。