react 虚拟 DOM 与 真实 DOM
上一篇博文我们介绍了 jsx 创建 DOM 的好处，那有一个问题啊，jsx 创建的虚拟 dom 究竟是个啥玩意儿啊？ 这篇博文来了解一下。
虚拟 DOM
想知道 jsx 创建的虚拟 dom 究竟是什么，其实很简单，有个相当流弊的工具来帮助我们探其真身！
对了，就是 console.log()， 啊哈哈哈哈哈！
我们直接打印一下创建的虚拟 dom 不就可以了嘛！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>虚拟DOM</title>
</head>
<body>
<!-- 准备好一个容器 -->
<div id="app"></div>
<!-- 引入react核心库 -->
<script type="text/javascript" src="../js/react.development.js"></script>
<!-- 引入react-dom 用于支持 react 操作 dom -->
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<!-- 引入 label，用于将 jsx 转化为 js -->
<script type="text/javascript" src="../js/babel.min.js"></script>
<!-- 此处必须写 text/babel -->
<script type="text/babel">
// 1. 创建虚拟dom
const VDOM = ( // 此处一定不要写双引号，因为不是字符串。
<h1 id="user">
<span>我是𝒆𝒅.</span>
</h1>)
// 2. 渲染虚拟dom到页面
ReactDOM.render(VDOM, document.getElementById("app"))
// 打印查看虚拟 dom
console.log("虚拟DOM---> ", VDOM)
</script>
</body>
</html>
保存刷新，我们看一下打印的结果：
通过打印的结果我们可以看到，这个虚拟 dom 就是 js 的一个一般对象，既不是数组，也不是函数。
如果不放心，我们可以直接打印一下他的类型：
<!-- 此处必须写 text/babel -->
<script type="text/babel">
// 1. 创建虚拟dom
const VDOM = ( // 此处一定不要写双引号，因为不是字符串。
<h1 id="user">
<span>我是𝒆𝒅.</span>
</h1>)
// 2. 渲染虚拟dom到页面
ReactDOM.render(VDOM, document.getElementById("app"))
// 打印查看虚拟 dom
console.log("虚拟DOM---> ", VDOM)
console.log("虚拟DOM类型---> ", typeof VDOM)
console.log("虚拟DOM类型---> ", VDOM instanceof Object)
</script>
保存刷新，看一下打印的结果。
好了，现在确定了，这个 jsx 创建的虚拟 dom 不是什么牛逼的东西，就是一个简单的、普通的、一半的 js 对象。
真实 DOM
上面我们说了一下虚拟 dom，那这玩意儿和 真实dom 有啥不一样呢？很简单嘛，输出一下真实dom 然后比对一下子就可以啦！加上这两行，打印一下真实 dom 是啥样的就行了 ！
// 获取一个真实 dom
const TDOM = document.getElementById('app')
console.log("真实DOM---> ", TDOM)
打个断点看一下各个 dom 的属性，因为不打断点直接执行，控制台会自动解析出标签，保存刷新看结果。
可以看到 虚拟 dom 就几个属性，但是 真实 dom 有好多好多属性呢！
本博文总结
关于虚拟 DOM：
- 本质是一个 Object 类型的对象，也就是一般对象。
- 虚拟 dom 比较“轻”，真实 dom 比较“重”，因为虚拟 dom 是 react 内部自己使用，不需要真实 dom 那么多的属性。
- 虚拟 dom 最终会被 react 转化成 真实 dom 渲染在页面上。
好了，今天的内容就到这里了吧，也没啥可以在说的了，就简单了解一下真实 dom 和虚拟 dom 的区别。
OK，结束了，拜了个拜！下篇博文见！
【本博文相关代码资料】： 我是𝒆𝒅. 的 gitee
