邂逅react(七)-jsx的本质

jsx到底是什么？其实jsx是React.createElment(component,props,children)的语法糖
createElement需要传入的三个参数:
1.type:当前的类型,是标签还是组件
2.config:所有属性和值都以对象的键值对的形式存储
3.children:存在标签里的内容
源码中的createElement

jsx语法在浏览器中是无法直接运行的,必须通过babel编译

class App extends React.Component{//jsx写法 必须引入babel编译后才能运行 否则报错
        
     render(){           
            return (
                <div>
                   <h2>hello React</h2>
                </div>
            );
        }
    }

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

以上代码编译后变成如下代码

class App extends React.Component {//不需编译 可直接运行
  render() {
    return /*#__PURE__*/React.createElement("div", null,    
    /*#__PURE__*/React.createElement("h2", null, "hello 
    React"));
    }
 }

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

createElement接收到type,config,children等参数后进行一系列处理最终返回ReactElement树，ReactElement形成了一个js对象树,这就是虚拟dom
后续更新虚拟dom