说说React jsx转换成真实DOM的过程

1编译JSX

首先，JSX本质其实是javascript的语法扩展，和模板语言非常接近，但是其充分具备javascript的能力。但是其要在javascript生效的话，需使用到 Babel 进行编译，JSX在被编译后，会变成一个针对 React.createElement 的调用。

2React.createElement 内部流程

首先，React.createElement 会接收三个参数：
第一个参数为 type，字符串类型，用于标识节点的类型，比如，div、p等，也可以是React组件类型或 React fragment类型。
第二个参数为 config，这是一个对象类型的参数，组件的所有属性都会键值对的形式存储在config中。
第三个参数为 children，这也是一个对象类型的参数，它记录的是组件标签之间嵌套的内容，也就是所谓的子节点或子元素。

整体来说，createElement的大致流程为：
1.二次处理key、ref、self、source四个属性值；
2.遍历config，筛选可以提到props中的属性；
3.将children中的子元素推入childArray数组；
4.格式化defaultProps
5.将以上数据作为入参，发起ReactElement的调用，最终由ReactElement返回虚拟Dom对象

3最终将虚拟Dom传入ReactDom.render函数中，将其转变为真实Dom

流程

书写JSX代码 => Babel编译JSX => 编译后的JSX执行React.createElement的调用 => 传入到ReactElement方法中生成虚拟Dom => 最终返回给ReactDom.render生成真实Dom