DOM与虚拟DOM的概念

DOM的本质：

    浏览器概念，浏览器从服务器端读取html页面，浏览器将html解析成一棵元素嵌套关系的dom树，用对象来表示页面上的元素，并提供操作dom对象的api。

虚拟DOM：

    框架概念，程序员用js对象来模拟页面上dom元素的嵌套关系( 本质 )，为了实现页面元素的高效更新( 目的 )

react中

//虚拟dom实质就是一个js对象可以声明变量直接使用
let el = <h2>hello, world!</h2>;
let el2 = React.createElement('h2', null, 'hello world')
//以上两种写法同样效果
ReactDOM.render(
    el,
    document.getElementById('root')
);
           

jsx语法转化过程

// 1、JSX
const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
)

// 2、JSX -> createElement
const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
)

// React elements: 使用对象的形式描述页面结构
// Note: 这是简化后的对象结构
const element = {
  type: 'h1',
  props: {
    className: 'greeting',
  },
  children: ['Hello, world']
}