JSX是如何渲染成DOM结构的

• 1、JSX是什么？
  JSX是JavaScript的一种语法扩展，它和模板语言很接近，但是它充分具备JavaScript的能力。

• 2、JSX语法是如何在JavaScript中生效的？
  因为JSX是JS的扩展，所以浏览器并不会像天然支持JavaScript支持JSX，所以我们需要用到Babel来解析。 JSX会被编译为React.createElement(),React.creacteElement()将会返回一个叫做“React Element(虚拟DOM)”的JS对象。
  

  image.png

• 3、Babel是什么？
  Babel是一个工具链，主要用于ECMAScript2015+版本的代码转换为向后兼容的JavaScript语法，以便能够运行在当前环境和旧版本的浏览器或其它环境中。

• 4、JSX的本质是？
  综合上述几个问题，可以得出结论，JSX的本质其实就是React.createElement()，虽然它看上去像是我们写的HTML。

• 5、虚拟DOM是如何渲染成真实DOM的？
  通过ReactDOM.render()

ReactDOM.render(
//需要渲染的元素
element,
//元素挂载的目标容器，一个真实DOM
container,
//回调函数，可选，用来处理渲染结束后的逻辑
callback
)