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

一、JSX的本质

实际上，jsx仅仅只是 React.createElement(component, props, …children) 这个函数的语法糖。

所有的jsx最终都会被转换成React.createElement的函数调用。

createElement需要传递三个参数:

参数一:type

当前元素的类型;
如果是标签元素，那么就使用字符串表示, 例如 “div”;
如果是组件元素，那么就直接使用组件的名称;

参数二:config

所有jsx中的属性都在config中以对象的属性和值的形式存储;
比如传入className作为元素的class;

参数三:children

存放在标签中的内容，以children数组的方式进行存储;
当然，如果是多个元素呢?React内部有对它们进行处理，处理的源码在下方

二、React.createElement的过程

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

三、流程

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