邂逅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