一. JSX的本质

JSX的本质是JavaScript的扩展，但是浏览器不支持JSX。

为了使它生效，JSX需要被编译为React.createElement()，React.createElement()会返回一个叫做ReactElement的JS对象，这个编译是由Babel完成的。

Babel是一个工具链，主要用于将ECMAScript 2015+版本的语法转换为向后兼容的JavaScript语法，以便能够运行在当前和旧版本的浏览器或其他环境中。

二. React.createElement工作原理

export function createElement(type, config, children)

React.createElement有3个参数：

• type：用于标识节点的类型
• config：以对象形式传入，组件所有的属性都会以键值对的形式存在config对象中
• children：以对象形式传入，记录的组件标签之间嵌套的内容

React.createElement(
  'ul',
  {className: 'list'}, 
  React.createElement('li', {key:'1'}, '1')
 )

React.createElement接受3个简单的参数，将它们转化为ReactElement需要的格式，return一个ReactElement的调用，ReactElement将实现DOM元素的创建，即虚拟Dom。

三. 虚拟Dom

ReactDom.render实现虚拟Dom的渲染：

ReactDom.render(
  element, //需要渲染的虚拟Dom（ReactElement）
  container, //挂载的容器（真实的Dom）
  [callback] //回调函数，处理渲染结束后的逻辑
)

const rootElement = document.getElementById('root');
ReactDom.render(
  // 这句将被转化为:
  // React.createElement( 'h1', null, 'Hello, world!' ),
  <h1>Hello, world!</h1>, 
  rootElement
);

四. 总结

JSX代码通过Babel被编译为React.createElement()，返回一个ReactElement的调用，创建虚拟DOM，再通过ReactDom.render()进行渲染成真实的Dom。