react笔记_03对比虚拟dom与真实dom

举例说明

<div id="test"></div>
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
  const vdom = (<h1 id='h1'> 我是h1标签 </h1>) 
  ReactDOM.render(vdom,document.getElementById('test'))
  const dom = document.getElementById('h1')
  console.log(vdom, Object.prototype.toString.call(vdom)) // '[object Object]'
  console.log(dom, Object.prototype.toString.call(dom)) // '[object HTMLHeadingElement]'
</script>

• 通过上述例子打印可以看出

• 1.虚拟dom的本质是一个对象；
• 2.虚拟dom比较“瘦”，真实dom比较“胖”
  • 原因是因为虚拟dom是在react内部使用的无需真实dom那么多的属性