持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第7天，点击查看活动详情
虚拟DOM与真实DOM
什么是虚拟DOM，什么是真实DOM呢？
我想，可能最直观的就是将两个对象给打印出来看了吧。
虚拟DOM
首先，我们打印下虚拟DOM，看看它究竟是什么来头。具体代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>虚拟DOM与真实DOM</title>
</head>
<body>
<!-- 测试容器 -->
<div id="test"></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>
<!-- 加载 babel 用于将 jsx 转为 js -->
<script type="text/javascript" src="../js/babel.min.js"></script>
<!-- 设置类型为babel -->
<script type="text/babel">
const VDOM = <h1 id='body'>虚拟DOM与真实DOM</h1>
ReactDOM.render(VDOM, document.getElementById('test'))
console.log('虚拟DOM', VDOM)
</script>
</body>
</html>
通过效果图可以看到，我们构建的这个虚拟DOM是一个Object对象，我们可以再打印下它的类型确认下。
<script type="text/babel">
const VDOM = <h1 id='body'><span>JSX build React DOM</span></h1>
ReactDOM.render(VDOM, document.getElementById('test'))
console.log('虚拟DOM: ', VDOM)
console.log('类型: ', typeof VDOM)
console.log('VDOM instanceof Object: ', VDOM instanceof Object)
</script>
看这效果图，我们可以更加确定这个虚拟DOM就是一个普通的Object对象了。
真实DOM
看了虚拟DOM，我们来看看真实DOM是什么样的吧。具体代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>虚拟DOM与真实DOM</title>
</head>
<body>
<!-- 测试容器 -->
<div id="test"></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>
<!-- 加载 babel 用于将 jsx 转为 js -->
<script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/babel">
const TDOM = document.getElementById('test')
console.log('真实DOM: ', TDOM)
</script>
</body>
</html>
通过打印出来的日志可以看到，真实DOM打印出来的是一个标签，我们没办法看到该对象，看来我们得借助debugger来看该对象的具体内容了。
debugger查看两个对象的差别
<script type="text/babel">
const VDOM = <h1 id='body'>虚拟DOM与真实DOM</h1>
ReactDOM.render(VDOM, document.getElementById('test'))
const TDOM = document.getElementById('test')
console.log('虚拟DOM: ', VDOM)
console.log('真实DOM: ', TDOM)
debugger
</script>
虚拟DOM对象参数：
真实DOM对象参数：
通过debugger可以看到,虚拟DOM对象只有几个属性，而真实DOM对象的属性却有很多。
小结
通过上面的案例，我们可以得到一下结论：
- 虚拟DOM本质是Object类型的对象
- 虚拟DOM是React内部使用，无需真实DOM那么多属性，所以比较"轻"
- 虚拟DOM最终会被React转化为真实DOM呈现在页面上
