react本質：JSX如何轉化爲javascript

react中基本都使用JSX來開發，但JSX實際上是javascript的一種語法糖。

什麼是語法糖？

語法糖就是提供了一種全新的方式書寫代碼，可是其實現原理與以前的寫法相同。
語法糖能夠說是普遍存在於各類計算機代碼中，包括C語言中的a[i]其實就是*a+i的語法糖。而今天對於咱們來講，a[i]其實已經很廣泛和經常使用了，因此也沒有人提這是語法糖這回事了。由於終極來講，全部語言都是彙編語言的語法糖：）

簡單說，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

附錄

babel提供的一個在線轉換JSX爲javascript的地址
https://babeljs.io/repl/