什么是JSX

React的核心機(jī)制之一就是虛擬DOM：可以在內(nèi)存中創(chuàng)建虛擬的DOM元素。React利用虛擬DOM來減少對實(shí)際DOM的操作從而提升性能。當(dāng)然，虛擬DOM也可以通過JavaScript來創(chuàng)建，例如：

var child1 = React.createElement('li', null, 'First');
var child2 = React.createElement('li', null, 'Second');

createElement語法：

ReactElement createElement(
  string/ReactClass type,
  [object props],
  [children ...]
)
創(chuàng)建并返回一個(gè)新的指定類型的ReactElement。type  參數(shù)可以是一個(gè)html標(biāo)簽名字符串（如："div","span"等），或者是ReactClass(通過React.createClass 創(chuàng)建的)。

使用這樣的機(jī)制，我們完全可以用JavaScript構(gòu)建完整的界面DOM樹，正如我們可以用JavaScript創(chuàng)建真實(shí)DOM。但是，這樣的代碼可讀性差，于是React發(fā)明了JSX, 利用我們熟悉的HTML語法來創(chuàng)建虛擬的DOM:

var root = (
  <ul>
    <li>First</li>
    <li>Secont</li>
  </ul>
);

這兩段代碼是完全等價(jià)的，后者將XML語法直接加入到JavaScript代碼中，讓你能夠高效的通過代碼而不是模板來定義界面。之后JSX通過翻譯器轉(zhuǎn)換到純JavaScript再由瀏覽器執(zhí)行。
因此，JSX本身并不是什么高深的技術(shù)，可以說只是一個(gè)比較高級但很直觀的語法糖。它非常有用，卻不是一個(gè)必需品，沒有JSX的React也可以正常工作：只要你樂意用JavaScript代碼去創(chuàng)建這些虛擬DOM元素。

JSX語法

基本規(guī)則：遇到HTML標(biāo)簽（以< 開頭），就用HTML規(guī)則解析；遇到代碼塊（以{ 開頭），就用JavaScript規(guī)則解析。
例如：

var names = ['Alice', 'Emily', 'Kate'];
ReactDOM.render( 
  <div> 
  { 
    names.map(function (name) {
     return <div>Hello, {name}!</div> 
    }) 
  } 
  </div>,
 document.getElementById('example'));

輸出結(jié)果:

Hello, Alice!
Hello, Emily!
Hello, Kate!

小語法總結(jié)：

• JSX中 使用js表達(dá)式，表達(dá)式寫在{}：

ReactDOM.render(
  <div>{1 + 1}</div>,
  document.getElementById('example')
);

• JSX中 不能使用if else語句， 但可以使用三元運(yùn)算表達(dá)式來替代。

var person = <Person name={window.isLoggedIn ? window.name : ' '} />;

• JSX中注釋需要寫在花括號(hào)中

ReactDOM.render(
  <div>{/*注釋*/}</div>，
  document.getElementById('example')
);

• JSX中遇到數(shù)組，數(shù)組會(huì)自動(dòng)展開所以成員

var arr = [<h1>Alice</h1>, <h2>Emily</h2>];
ReactDOM.render(
  <div>{arr}</div>,
  document.getElementById('example')
);