React中的虚拟DOM与真实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>03 虚拟DOM与真实DOM</title>
</head>
<body>
<!-- 准备好一个容器 -->
<div id="test"></div>
<div id="demo"></div>
<!-- 引入react核心库 -->
<script src="../js/react.development.js"></script>
<!-- 引入react-dom 用于支持react操作DOM-->
<script src="../js/react-dom.development.js"></script>
<!-- 引入babel 用于将JSX 转换为 JS -->
<script src="../js/babel.min.js"></script>
<script type="text/babel"> /* 此处一定要写babel */
// 第一步 创建虚拟DOM
var VDOM = ( /* 此处一定不要写引号 */
<h1 id="title">
<span>HELLO React</span>
</h1>
)
// 第二步 渲染虚拟DOM到页面
ReactDOM.render(VDOM, document.getElementById("test"));
const TDOM = document.getElementById('demo')
console.log('虚拟DOM',VDOM);
console.log('真实DOM',TDOM);
debugger;
</script>
</body>
</html>
上述代码中的输出内容如下：
总结：
关于虚拟DOM
1. 本质是Object类型的对象（一般对象）
2. 虚拟DOM比较“轻”，真实DOM比较“重”，原因是虚拟DOM是React内部在用，无需真实DOM上那么多的属性。
3. 虚拟DOM最终会被React转化为真实DOM，呈现在页面上。