第02節(jié)的HelloWorld程序從本質上能完成所有的工作。只是有一些開發(fā)效率問題，比如JavaScript代碼與標簽混寫在一起等。而使用JSX，則可以有效解決這些問題。
1.JSX定義
JSX即Javascript XML，它使用XML標記來創(chuàng)建虛擬DOM和聲明組件。是一種 JavaScript 的語法擴展。乍看起來可能比較像是模版語言，但事實上它完全是在 JavaScript 內部實現的。
2.重寫HelloWorld
import React from 'react';
import ReactDOM from 'react-dom';
var element=<h1>Hello, world!</h1>;
ReactDOM.render(
element, document.getElementById('root'));
我們來觀察一下聲明的這個變量：
這種看起來可能有些奇怪的標簽語法既不是字符串也不是 HTML。它就被稱為 JSX。
3.JSX實現原理
我們想要在瀏覽器里直接運行采用 JSX 語法的 JavaScript 顯然暫時是不可能實現的，在實際的生產過程中，我們需要利用 Babel 一類的轉譯器來將我們的 JSX 語法或者 ES6 語法轉譯成瀏覽器可以直接運行的 JavaScript，事實上 JSX 在經過轉譯之后，會變成 React 創(chuàng)建 Element 的一個方法。即第二節(jié)所寫demo實際就是babel轉換后的代碼來宮瀏覽器識別。
ReactDOM.render(
<h1>Hello world!</h1>,
document.getElementById('container')
)
//babel轉換后
ReactDOM.render(
React.createElement('h1',null,`Hello world!`),
document.getElementById('container')
)
4.JSX好處
通過上邊的demo你可以發(fā)現JSX的好處。
- 可以使用熟悉的語法仿照HTML來定義虛擬DOM。
- 程序代碼更加直觀。
- 與JavaScript之間等價轉換，代碼更加直觀。
- 可以任意地在 JSX 當中使用 JavaScript 表達式,具體見下章。
