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

<ul className='list'>

    <li key='1'>1</li>

    <li key='2'>2</li>

</ul>

二、ReactElement（初识虚拟DOM）

组装：把传入的参数按一定的规范组装进element对象里然后return给了React.createElement，然后React.createElement把ReactElement对象返回给了开发者

三、ReactDom.render 渲染处理生成真实DOM渲染到页面中

ReactDom.render(

element,//需要渲染的元素（ReactElement）

container,//元素挂载的目标容器（一个真实DOM）

[callback]//回调函数，可选参数，可以用来处理渲染结束后的逻辑

)

例如： 

<body>

    <div id='root'></div>

</body>

const rootElement = document.getElementById('root');

ReactDOM.render(<App/>,rootElement);

虚拟DOM：核心算法的基石

组件初始化：调用render方法 --> 生成虚拟DOM --> 调用ReactDOM.render方法-->创建真实DOM

组件更新：调用render方法-->生成虚拟DOM --通过diff算法 -->定位出两次虚拟DOM的差异-->对发生变化的真实DOM做定向更新