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']
}