react本质：JSX如何转化为javascript

react中基本都使用JSX来开发，但JSX其实是javascript的一种语法糖。

简单说，JSX是一种更简便书写javascript的方式

由于DOM结构被我们写到了javascript文件里，由javascript来生成DOM结构

如果一直使用javascript来写DOM结构，那么render函数里就是一堆React.createElement

这样既不美观也不实用。

但是我们必须知道，JSX本质上就是javascript

在编译的时候，会由babel将JSX转化为javascript。

比如

<div className="aaa">
    <span>222</span>
      <span>333</span>
</div>

生成了

"use strict";

React.createElement("div", {
  className: "aaa"
}, React.createElement("span", null, "222"), React.createElement("span", null, "333"));

比如

function Comp(){
    return <div className='test'>test</div>
}

<Comp className="test2">222</Comp>

生成

"use strict";

function Comp() {
  return React.createElement("div", {
    className: "test"
  }, "test");
}

React.createElement(Comp, {
  className: "test2"
}, "222");

了解JSX的本质，只需要记住：JSX本质就是javascript

附录