JSX代码变成DOM的原理--流程总结描述：
开发者编写JSX代码 --> Babel 编译 --> React.createElement调用 --> ReactElement调用
-->生成‘虚拟DOM’ 作为参数传入--->ReactDOM.render() 渲染处理-->真实DOM
JSX代码变成DOM的原理--流程步骤细节描述：
一、JSX是如何映射为DOM的：起步createElement
1、export function createElement(type,config,children)
type:用于标识节点的类型
config:以对象形式传入，数组所有的属性都会以键值对的形式存储在config对象中
children:以对象形式传入，它记录的是组件标签之间嵌套的内容
2、createElement是一个参数中介：参数数据格式化
入口 React.createElement
二次处理key、ref、self、source四个属性值
遍历 config ,筛选可以提进props里的属性
提取子元素，推入childArray（也即props.children）数组
可视化defaultProps
落脚点 结合以上数据作为入参，发起ReactElement调用
3、JSX语法糖：
React.createElement('ul',{
className:'list'
},React.createElement('li',{
key:'1'
},1),React.createElement('li',{
key:'2'
},'2'));
等价Html
- 1
- 2
二、ReactElement（初识虚拟DOM）
组装：把传入的参数按一定的规范组装进element对象里然后return给了React.createElement，然后React.createElement把ReactElement对象返回给了开发者
三、ReactDom.render 渲染处理生成真实DOM渲染到页面中
ReactDom.render(
element,//需要渲染的元素（ReactElement）
container,//元素挂载的目标容器（一个真实DOM）
[callback]//回调函数，可选参数，可以用来处理渲染结束后的逻辑
)
例如：
const rootElement = document.getElementById('root');
ReactDOM.render(
虚拟DOM：核心算法的基石
组件初始化：调用render方法 --> 生成虚拟DOM --> 调用ReactDOM.render方法-->创建真实DOM
组件更新：调用render方法-->生成虚拟DOM --通过diff算法 -->定位出两次虚拟DOM的差异-->对发生变化的真实DOM做定向更新