虚拟 DOM 与真实 DOM

概述

1. 虚拟DOM本质是Object类型的对象(一般对象)
2. 虚拟DOM比较轻, 真实DOM比较重, 因为虚拟DOM是React内部在用, 无需真实DOM上那么多属性
3. 虚拟DOM最终会被React转化成真实DOM, 呈现在页面上

验证

// 1. 创建虚拟 DOM
const VDOM = (
  <h1 id="title">
    <span>Halo React</span>
  </h1>
);
// 2. 渲染虚拟 DOM 到页面
ReactDOM.render(VDOM, document.getElementById("app"));

console.log('虚拟 DOM:', VDOM) // { ... }
console.log(typeof VDOM) // object
console.log(VDOM instanceof Object) // true

const TDOM = document.getElementById('demo')
console.log('真实 DOM:', TDOM)

// 打断点查看
debugger

• 虚拟DOM

• 真实DOM