一直聽説虛擬dom這個概念,虛擬dom到底是什麼,下面我們一起探索,揭開這層神秘的面紗~~~
react中React.createElement形成的js樹就是虛擬dom

class App extends React.Component{//jsx寫法
        
        render(){
                        
               let obj=(
                    <div>
                        <header>我是頭部</header>
                        <div>
                            <h2>我是身體</h2>
                            <h2>我是body</h2>
                        </div>
                        <footer>我是尾部</footer>
                    </div>
                )                   
            console.log(obj)
            return obj
        }

    }

    ReactDOM.render(<App/>,document.getElementById('root'))

編譯後 並打印結果

class App extends React.Component {
  render() {
    let obj = /*#__PURE__*/React.createElement("div", null, 
    /*#__PURE__*/React.createElement("header", null, 
    "\u6211\u662F\u5934\u90E8"), 
    /*#__PURE__*/React.createElement("div", null, 
    /*#__PURE__*/React.createElement("h2", null, 
    "\u6211\u662F\u8EAB\u4F53"), /*#__PURE__*/
    React.createElement("h2", null, "\u6211\u662Fbody")), 
    /*#__PURE__*/React.createElement("footer", null,
    "\u6211\u662F\u5C3E\u90E8"));
    console.log(obj);
    return obj;
  }

}

ReactDOM.render( /*#__PURE__*/React.createElement(App, null),
document.getElementById('root'));

小結:jsx語法其實在底層是通過React.createElement創建一個js對象樹ReactElement,ReactElement通過render將虛擬dom映射到真實dom
本節分享完畢,能力有限有不足之處希望各位大神海涵