我們在原生DOM中，用js構(gòu)造dom的方式是這樣的：

var a = document.createElement("a")
a.setAttribute("class", "link")
a.setAttribute("href", "https://github.com/facebook/react")
a.appendChild(document.createTextNode("React"))

這個(gè)代碼應(yīng)該是大家比較熟悉的。當(dāng)你在寫代碼的時(shí)候會不會感覺很繁瑣呢，我們可以封裝一下：

//第一個(gè)參數(shù)為node名
//第二個(gè)參數(shù)為一個(gè)對象，dom屬性與事件都以鍵值對的形式書寫
//第三個(gè)到第n個(gè)為子node，它們將按參數(shù)順序出現(xiàn)，
//在這個(gè)例子中只有一個(gè)子元素，而且也是文本元素，所以可以直接書寫，否則還得React.createElement一下
var a = React.createElement("a", {
    className: "link",
    href: "https://github.com/facebook/react"
}, "React")

看完這個(gè)代碼，是不是感覺一下子要簡潔的多。
現(xiàn)在有個(gè)編譯工具，可以讓你用html語法來寫React.createElement，部署上線前編譯回來。你愿意嗎？
不管你的答案是什么，但這就是jsx的一半真相。

前面已經(jīng)回答過，在使用React的時(shí)候，可以不使用JSX,大概這樣寫：

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);

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

var root =(
  

    
First Text Content
    
Second Text Content
  
);

總結(jié)

這兩段代碼是完全等價(jià)的，后者將XML語法直接加入到JavaScript代碼中，讓你能夠高效的通過代碼而不是模板來定義界面。

之后JSX通過翻譯器轉(zhuǎn)換到純JavaScript再由瀏覽器執(zhí)行。

注意

在實(shí)際開發(fā)中，JSX在產(chǎn)品打包階段都已經(jīng)編譯成純JavaScript，JSX的語法不會帶來任何性能影響。
另外，由于JSX只是一種語法，因此JavaScript的關(guān)鍵字class, for等也不能出現(xiàn)在XML中，而要如例子中所示，使用className, htmlFor代替，這和原生DOM在JavaScript中的創(chuàng)建也是一致的。

相信大家在看完了上面的這些舉例后，心中的疑問自然而然就迎刃而解了。

因此，JSX本身并不是什么高深的技術(shù)，可以說只是一個(gè)比較高級但很直觀的語法糖。它非常有用，卻不是一個(gè)必需品，沒有JSX的React也可以正常工作：只要你樂意用JavaScript代碼去創(chuàng)建這些虛擬DOM元素。

看了上面的這些簡單的demo，大家肯定會拋出這樣的疑問：

為什么React官方推薦使用JSX呢？

等等。。。

使用React，不一定非要使用JSX語法，可以使用原生的JS進(jìn)行開發(fā)。
但是React作者強(qiáng)烈建議我們使用JSX，因?yàn)椋?/p>

JSX在定義類似HTML這種樹形結(jié)構(gòu)時(shí)，十分的簡單明了。

簡明的代碼結(jié)構(gòu)更利于開發(fā)和維護(hù)。

XML有著開閉標(biāo)簽，在構(gòu)建復(fù)雜的樹形結(jié)構(gòu)時(shí)，比函數(shù)調(diào)用和對象字面量更易讀。

可能說這些你會感覺比較模糊，下面來舉幾個(gè)看得見的例子。

前端界面的最基本功能在于展現(xiàn)數(shù)據(jù)，為此大多數(shù)框架都使用了模板引擎，

    Welcome back, {{person.firstName}} {{person.lastName}}!


    Please log in.

{{#if person}}
  Welcome back, {{person.firstName}} {{person.lastName}}!
{{else}}
  Please log in.
{{/if}}

模板可以直觀的定義UI來展現(xiàn)Model中的數(shù)據(jù)，你不必手動(dòng)的去拼出一個(gè)很長的HTML字符串，幾乎每種框架都有自己的模板引擎。

傳統(tǒng)MVC框架強(qiáng)調(diào)界面展示邏輯和業(yè)務(wù)邏輯的分離，因此為了應(yīng)對復(fù)雜的展示邏輯需求，這些模板引擎幾乎都不可避免的需要發(fā)展成一門獨(dú)立的語言。

如上面代碼所示，每個(gè)框架都有自己的模板語言語法。而這無疑增加了框架的門檻和復(fù)雜度。

使用JSX
正因?yàn)槿绱耍琑eact直接放棄了模板而發(fā)明了JSX?？瓷先ズ芟衲０逭Z言，但其本質(zhì)是通過代碼來構(gòu)建界面，這使得我們不再需要掌握一門新的語言就可以直觀的去定義用戶界面：掌握了JavaScript就已經(jīng)掌握了JSX。

這里不妨再引用之前文章舉過的例子，在展示一個(gè)列表時(shí)，模板語言通常提供名為Repeat的語法，例如在Angular中：

  

    
    {{todo.text}}
  

而使用JSX，則代碼如下：

var lis = this.todoList.todos.map(function (todo) {
  return  (
    

      
      {todo.text}
    
  );
});

var ul = (
  

    {lis}
  
);

可以看到，JSX完美利用了JavaScript自帶的語法和特性，我們只要記住HTML只是代碼創(chuàng)建DOM的一種語法形式，就很容易理解JSX。
而這種使用代碼構(gòu)建界面的方式，完全消除了業(yè)務(wù)邏輯和界面元素之間的隔閡，讓代碼更加直觀和易于維護(hù)。

你可以用 花括號 把任意的 JavaScript 表達(dá)式 嵌入到 JSX 中。
例如，2 + 2， user.firstName， 和 formatName(user)，這些都是可用的表達(dá)式。

function formatName(user) {
  return user.firstName + " " + user.lastName;
}

const user = {
  firstName: "Harper",
  lastName: "Perez"
};

const element = (
  

    Hello, {formatName(user)}!
  
);

ReactDOM.render(
  element,
  document.getElementById("root")
);

編譯之后，JSX 表達(dá)式就變成了常規(guī)的 JavaScript 對象。

這意味著你可以在 if 語句或者是 for 循環(huán)中使用 JSX，用它給變量賦值，當(dāng)做參數(shù)接收，或者作為函數(shù)的返回值。

function getGreeting(user) {
  if (user) {
    return 
Hello, {formatName(user)}!
;
  }
  return 
Hello, Stranger.
;
}

您可以使用雙引號來指定字符串字面量作為屬性值：

const element = 
;

您也可以用花括號嵌入一個(gè) JavaScript 表達(dá)式作為屬性值:

const element = 立即閉合它：

const element = ;
JSX 標(biāo)簽可能包含子元素：
const element = (
  

    
Hello!
    
Good to see you here.
  
);
JSX 防止注入攻擊
在JSX中嵌入用戶輸入是安全的：
const title = response.potentiallyMaliciousInput;
// This is safe:
const element = 
{title}
;
默認(rèn)情況下， 在渲染之前, React DOM 會格式化(escapes) JSX中的所有值。
從而保證用戶無法注入任何應(yīng)用之外的代碼。
在被渲染之前，所有的數(shù)據(jù)都被轉(zhuǎn)義成為了字符串處理。 以避免 XSS(跨站腳本) 攻擊。
JSX 表示對象
Babel 將JSX編譯成 React.createElement() 調(diào)用。
下面的兩個(gè)例子是是完全相同的：
const element = (
  

    Hello, world!
  
);
const element = React.createElement(
  "h1",
  {className: "greeting"},
  "Hello, world!"
);
React.createElement() 會執(zhí)行一些檢查來幫助你編寫沒有bug的代碼，但基本上它會創(chuàng)建一個(gè)如下所示的對象：
// 注意: 這是簡化的結(jié)構(gòu)
const element = {
  type: "h1",
  props: {
    className: "greeting",
    children: "Hello, world"
  }
};
結(jié)尾
關(guān)于JSX的介紹大概講到這里，看完這篇文章后，希望大家能能夠了解什么是JSX,React為什么推薦使用JSX等問題。
在下一節(jié)中來探索如何將 React 元素渲染到 DOM 上。
歡迎大家訪問我的blog，有更精彩的文章吆！
參考鏈接

https://facebook.github.io/re...

http://www.css88.com/react/do...

http://www.infoq.com/cn/artic...