`JSX`

1. 开发阶段：编写`JSX`

2. 打包阶段：通过`babel`转译成`React.createElement()`

3. `render`阶段：执行`React.createElement()` 形成 `ReactElement`，再通过`ReactDom.render()` 转换成真实`dom`;


`React`元素

{

type:'div',//标签

props:{

id:'title',

children:'hello',//如果是多个子的话，是Array类型

}

}

`ReactDom.createElement`

const REACT_ELEMENT = Symbol('react.element');

/**

* 创建React元素

* @param type 标签

* @param config 配置

* @param children 子元素，可能多个

* @returns React.Element

*/

function createElement(type, config, children) {

  const { __source, __self, ref, key, ...props } = config;

if (arguments.length > 3) {

props.children = Array.prototype.slice.call(arguments, 2);

} else {

props.children = children;

}

return {

$$typeof: REACT_ELEMENT,//html标签类型

type,//标签名:如div

props,//属性:如id,className

key,//用于dom:diff

ref,//真实dom

};

}