编写一下代码来看一下两者的异同:
<body>
<div id="demo"></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">
// 创立一个虚构 dom
const VDOM =(
<h1 id="title">
<span>Hello,React</span>
</h1>
)
// 获取实在 dom
const TDOM= document.getElementById('demo');
console.log(typeof VDOM);
console.log(typeof TDOM);
console.log((typeof VDOM) === (typeof TDOM));
console.log(` 虚构 DOM:`,VDOM);
console.log(` 实在 DOM:`, TDOM);
debugger
</script>
</body>
输入:
能够看出虚构 DOM 和实在 DOM 一样实质是 Object 类型对象
两者具体构造:
显然实在 DOM 比虚构 DOM 身上多很多货色,这是因为虚构 DOM 是 React 外部应用,外面次要蕴含 React 须要的内容,而无关货色被去除。