雖然JSX是擴充套件到ECMAScript的類XML語法，但是它本身並沒有定義任何語義。也就是說它本身不在ECMAScript標準範圍之內。它也不會被引擎或者瀏覽器直接執行。通常會利用很編譯器前處理器來將這些JSX轉化為標準的ECMAScript。

吐槽：雖然JSX出發點是好的，而且寫起來也很簡單，但是對於要在JS中寫類HTML格式的內容，我的內心是排斥的，感覺非常不習慣。這不是我熟知的web開發啊！有種在開發app的感覺，一個個自定義的元件。

想看看他是怎麼編譯JSX，於是我看了下用JS的寫法寫元件，主要的方法就是React.createElement：

React.createElement(
  type,
  [props],
  [...children]
)
 

第一個引數type是型別，也就是名字，比如h1、div、自定義元件名等~ 第二個引數[props]其實就是各種屬性，我們在JS中怎麼寫屬性的，在這裡就怎麼寫。比如img.src="",div.className=""這樣的，那麼屬性就是這麼寫的{className:"",src:""}，屬性名和JS保持一致。 第三個引數，其實就是無限延展當前節點的子節點，你想有多少個就有多少個。

來看一眼官方文件的轉化，這個是我用React.createElement來轉義的JSX，這樣一個套一個的寫法，什麼時候才是個頭。強烈的求生欲使我放棄了JS的寫法，轉投JSX的寫法了：

相比較這種無限巢狀的寫法，JSX友善太多了。從語義化的角度來說，JSX的可讀性也是很好滴。（為自己學習JSX強行找理由。）

深入瞭解JSX的物件

上一節提到，

let element=<h1 className="aaa">A爆了</h1>
//等同於
let element=React.createElement(
  "h1",
  {className:"aaa"},
  "A爆了"
)

那麼是不是我直接let {type,props,children}=element就可以得到 h1、{className:"aaa"}和A爆了了呢？我還是太天真了。type確實是h1，但是props打出來是{className: "aaa", children: "A爆了"}。咦？怎麼children

{
    type:"h1",
    props:{
        className:"aaa",
        children:"A爆了"
    }
}

JSX的花式寫法（內含錯誤演示）

JSX有許多中寫法，看的我是眼花繚亂，不如來分析分析這些寫法的奧祕，為什麼要這麼寫，然後找一種自己喜歡的方式來寫。這裡我會以let element=XXX為例子，然後大家可以直接ReactDOM.render(element, document.getElementById('root'));這樣渲染。

寫法一：一個標籤內嵌純文字

我習慣在寫JS的時候，將這些標籤寫在字串中，然後拼接起來。看到這麼寫，真的覺得是個bug，瀏覽器一定會報錯的！然而在react中，不會報錯的，這是正確的。

let element=<h1 className="aaa">A爆了</h1>
ReactDOM.render(element, document.getElementById('root'));

錯誤寫法演示：無標籤純文字

那如果是純文字呢？華麗麗地報錯了。說名JSX還是需要標籤包裹的。

let element=A爆了

寫法二：一個標籤巢狀標籤混合文字

那麼我們多加幾個子元素進，也是OK的，沒什麼毛病。

let element=<h1 className="aaa">aaa<span>A爆了</span>bbbb</h1>

寫法三：Fragment包裹所有！

錯誤寫法演示：多個標籤並列

如果是很多個並列地兄弟節點呢？突然興奮！報錯了~果然不能皮。為什麼呢？大家都是正正經經的HTML標籤啊。