邂逅react(八)-虚拟DOM

一直听说虚拟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
本节分享完毕,能力有限有不足之处希望各位大神海涵