关于JSX底层处理机制
1）首先，编写的JSX语法，编译为虚拟DOM对象（virtualDOM）
虚拟DOM对象：框架内部构建的一套对象体系（对象的相关成员都是React内部规定的），基于这些属性描述出所构建视图中的DOM节点的相关特征。
a. 基于babel-preset-react-app，把JSX编译为React.createElement(...)的格式（可以去babel官网测测）
React.createElement(ele,props,...children)
*ele：元素标签名或组件
*props:元素的属性集合对象，未设置则为null
*children：当前元素的子节点
b. 再把createElement方法执行，创建出虚拟dom虚拟DOM对象【JSX元素/JSX对象/ReactChild对象】
virtualDOM={ $$typeof:Symbol(react.element), ref:null, key:null, type:标签名或组件 props：{ children：多个为[]/一个的时候直接显示值 }， }
2）然后，把构建的virtualDOM渲染为真实DOM
真实DOM：浏览器中所渲染出来的DOM元素。
通过render方法将构建的virtualDOM插入到root根元素中渲染为真是DOM。
注： 第一次渲染页面是直接从virtualDOM到真实DOM（第一次渲染完成后，会把创建的虚拟DOM缓存起来）；但后续视图更新的时候，会按照数据的变化，而重新将JSX编译为新的虚拟DOM（全部重新编译），然后通过DOM-Diff算法对比新旧虚拟DOM，计算出补丁包（Patch），把patch补丁包进行渲染更新~
补丁包（patch）:两次视图差异的部分。
