React中的虚拟DOM
⭐虚拟DOM的创建
虚拟DOM有两种创建方式，一种是通过jsx，一种是通过js
通过jsx：
<!-- type中一定要写babel -->
<script type="text/babel">
// 1.创建虚拟DOM
const VDOM = <h1 id="vdom">Hello,React</h1> //这里不写引号，因为值不是字符串
// 2.渲染虚拟DOM到页面
ReactDOM.render(VDOM,document.getElementById('test'));
</script>
通过js：
<script>
// 1.创建虚拟DOM，这里使用React的createElement方法，参数：(标签, 属性, 值)
const VDOM = React.createElement('h1',{id:'VDOM'},'Hello React');
// 2.渲染虚拟DOM到页面
ReactDOM.render(VDOM,document.getElementById('test'));
</script>
既然jsx和js都能创建虚拟DOM，那我们为什么不用原生js，反而多此一举使用jsx呢？
JSX的优势
在上述创建单个虚拟DOM时看似两种方式差别不大，但如果要创建多层嵌套DOM呢？
例如：p标签中包裹一个span标签
使用jsx：
const VDOM = <p><span>Hello React</span></p>
一步到位！
为了看起来更加舒适，我们会写成如下格式，以括号包裹代表其为一个整体：
const VDOM = (
<p>
<span>Hello React</span>
</p>
)
而如果使用js呢：
const VDOM = React.createElement('p',{},React.createElement('span',{},'Hello React'));
我们要在创建p标签时，内部再传入span标签作为其子标签，层层嵌套看得人眼花缭乱，所以我们在进行react开发时，都会使用jsx。
不过当babel将浏览器不能直接识别的jsx语法翻译为原生js时，最终代码仍是使用js的形式，使用jsx只是为了在开发维护人员看着更加舒适。
⭐虚拟DOM的本质
我们会创建虚拟DOM了，但它到底是什么呢？
我们来打印一下：
console.log(VDOM);
得到结果：VDOM就是一个Object
那么它和真实DOM有什么区别呢？
我们使用debugger查看一下
console.log(VDOM);
console.log(DOM);
debugger;
其中，VDOM是虚拟DOM，DOM是真实DOM，程序暂停后，我们将鼠标分别放到二者上面，会看到它们分别拥有的属性：
DOM的属性：
VDOM的属性：
很显然，VDOM虽然称作虚拟DOM，但它所含的属性并没有真实DOM那么多，所以我们常说虚拟DOM比较“轻”，便于操作，最终虚拟DOM需要经过React渲染才能成为真实DOM，出现在页面上。
