React的核心機制之一就是可以在記憶體中建立虛擬的DOM元素。React利用虛擬DOM來減少對實際DOM的操作從而提升效能。 

JSX簡介

JSX就是Javascript和XML結合的一種格式。React發明了JSX，利用HTML語法來建立虛擬DOM。當遇到<，JSX就當HTML解析，遇到{就當JavaScript解析。

如下(JS寫法)

var child1 = React.createElement('li', null, 'First Text Content');
var child2 = React.createElement('li', null
 
, 'Second Text Content');
var root = React.createElement('ul', { className: 'my-list' }, child1, child2);

等價於(JSX寫法)

var root =(
  <ul className="my-list">
    <li>First Text Content</li>
    <li>Second Text Content</li>
  </ul>
);

後者將XML語法直接加入JS中,通過程式碼而非模板來高效的定義介面。之後JSX通過翻譯器轉換為純JS再由瀏覽器執行。在實際開發中，JSX在產品打包階段都已經編譯成純JavaScript，JSX的語法不會帶來任何效能影響。另外，由於JSX只是一種語法，因此JavaScript的關鍵字class, for等也不能出現在XML中，而要如例子中所示，使用className, htmlFor代替，這和原生DOM在JavaScript中的建立也是一致的。JSX只是建立虛擬DOM的一種語法格式而已,除了用JSX,我們也可以用JS程式碼來建立虛擬DOM.

JSX語法介紹

大括號裡是JavaScript，不要加引號，加引號就會被當成字串。

三元表示式

JSX本身就和XML語法類似，可以定義屬性以及子元素。唯一特殊的是可以用大括號來加入JavaScript表示式.例如:

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

上述程式碼經過JSX編譯後會得到：

var person = React.createElement(
  Person,
  {name: window.isLoggedIn 
 
? window.name : ''}
);

陣列遞迴

陣列迴圈,陣列的每個元素都返回一個React元件。

var lis = this.todoList.todos.map(function (todo) {
  return  (
    <li>
      <input type="checkbox" checked={todo.done}>
      <span className={'done-' + todo.done}>{todo.text}</span>
    </li>
  );
});

var ul = (
  <ul className="unstyled">
    {lis}
  </ul>
);

JSX中繫結事件

JSX讓事件直接繫結在元素上。

<button onClick={this.checkAndSubmit.bind(this)}>Submit</button>

和原生HTML定義事件的唯一區別就是JSX採用駝峰寫法來描述事件名稱，大括號中仍然是標準的JavaScript表示式，返回一個事件處理函式。

React並不會真正的繫結事件到每一個具體的元素上，而是採用事件代理的模式：在根節點document上為每種事件新增唯一的Listener，然後通過事件的target找到真實的觸發元素。這樣從觸發元素到頂層節點之間的所有節點如果有繫結這個事件，React都會觸發對應的事件處理函式。這就是所謂的React模擬事件系統。儘管整個事件系統由React管理，但是其API和使用方法與原生事件一致。

JSX中使用樣式

在JSX中使用樣式和真實的樣式也很類似，通過style屬性來定義，但和真實DOM不同的是，屬性值不能是字串而必須為物件。

例如:

<div style={{color: '#ff0000', fontSize: '14px'}}>Hello World.</div>

或者

var style = {
  color: '#ff0000',
  fontSize: '14px'
};

var node = <div style={style}>HelloWorld.</div>;

要明確記住,{}裡面是JS程式碼,這裡傳進去的是標準的JS物件。在JSX中可以使用所有的的樣式，基本上屬性名的轉換規範就是將其寫成駝峰寫法，例如“background-color”變為“backgroundColor”, “font-size”變為“fontSize”，這和標準的JavaScript操作DOM樣式的API是一致的。

HTML轉義

在元件內部新增html程式碼,並將html程式碼渲染到頁面上。React預設會進行HTML的轉義，避免XSS攻擊，如果要不轉義，可以這麼寫：

var content='<strong>content</strong>';    

React.render(
    <div dangerouslySetInnerHTML={{__html: content}}></div>,
    document.body
);

自定義元件

元件定義之後，可以利用XML語法去宣告，而能夠使用的XML Tag就是在當前JavaScript上下文的變數名,該變數名就是元件名稱。

文章來源:
http://www.infoq.com/cn/articles/react-jsx-and-component