JSX語法簡介

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