JSX底层处理机制

第一步：把我们编写的JSX语法，编译为虚拟DOM对象(VirtualDOM)

虚拟DOM对象：框架自己内部建构的一套对象体系(对象的相关成员都是React内部规定的)基于这些属性描述出我们所构建视图中的DOM节点的相关特征。

@1基于babel-preset-react-app把JSX编译为React.createElement(...)这种格式

只要是元素节点，必然会基于createElement进行处理

React.createElement(ele,props,...children)

ele:元素标签名(组件)

props：元素的属性集合，如果没有设置任何属性，则此值为null

children：第三个及以后的参数，都是当前元素的子节点

@2在把createElement方法执行，创建出virtualDOM对象

virtualDOM = {
    $$typeof:Symbol(react.element),
    ref:null,
    key:null,
    type:标签名[或组件]
    // 存储了元素的相关属性 && 相关子节点信息
    props:{
            元素的相关属性,
            children:子节点信息[没有子节点则没有这个属性、属性值可能是一个值，也可能是一个数组]
    }}

第二步：把构建的virtualDOM，渲染为真实DOM

真实DOM：浏览器页面中，最后渲染出来让用户看得见的DOM元素

补充说明：第一次渲染页面是直接从virtualDOM->真实DOM，但是后期更新视图的时候，就直接经过DOM-DIFF对比，计算出补丁包PATCH（两次视图差异的部分），把PATCH补丁包进行渲染。