為什么要引入 JSX 這種語(yǔ)法

傳統(tǒng)的 MVC 是將模板放在其他地方，比如 <script> 標(biāo)簽或者模板文件，再在 JS 中通過(guò)某種手段引用模板。按照這種思路，想想多少次我們面對(duì)四處分散的模板片段不知所措？糾結(jié)模板引擎，糾結(jié)模板存放位置，糾結(jié)如何引用模板……下面是一段 React 官方的看法：

We strongly believe that components are the right way to separate concerns rather than "templates" and "display logic." We think that markup and the code that generates it are intimately tied together. Additionally, display logic is often very complex and using template languages to express it becomes cumbersome.

簡(jiǎn)單來(lái)說(shuō)，React 認(rèn)為組件才是王道，而組件是和模板緊密關(guān)聯(lián)的，組件模板和組件邏輯分離讓問(wèn)題復(fù)雜化了。顯而易見(jiàn)的道理，關(guān)鍵是怎么做？

所以就有了 JSX 這種語(yǔ)法，就是為了把 HTML 模板直接嵌入到 JS 代碼里面，這樣就做到了模板和組件關(guān)聯(lián)，但是 JS 不支持這種包含 HTML 的語(yǔ)法，所以需要通過(guò)工具將 JSX 編譯輸出成 JS 代碼才能使用。

JSX 是可選的

因?yàn)?JSX 最終是輸出成 JS 代碼來(lái)表達(dá)的，所以我們可以直接用 React 提供的這些 DOM 構(gòu)建方法來(lái)寫(xiě)模板，比如一個(gè) JSX 寫(xiě)的一個(gè)鏈接：

<a >Hello!</a>

用 JS 代碼來(lái)寫(xiě)就成這樣了：

React.createElement('a', {href: 'http://facebook.github.io/react/'}, 'Hello!')

你可以通過(guò) React.createElement 來(lái)構(gòu)造組件的 DOM 樹(shù)。第一個(gè)參數(shù)是標(biāo)簽名，第二個(gè)參數(shù)是屬性對(duì)象，第三個(gè)參數(shù)是子元素。

一個(gè)包含子元素的例子：

var child = React.createElement('li', null, 'Text Content');
var root = React.createElement('ul', { className: 'my-list' }, child);
React.render(root, document.body);

對(duì)于常見(jiàn)的 HTML 標(biāo)簽，React 已經(jīng)內(nèi)置了工廠方法：

var root = React.DOM.ul({ className: 'my-list' },
             React.DOM.li(null, 'Text Content')
           );

所以 JSX 和 JS 之間的轉(zhuǎn)換也很簡(jiǎn)單直觀，用 JSX 的好處就是它基本上就是 HTML（后面會(huì)講到有一些小差異），對(duì)于構(gòu)造 DOM 來(lái)說(shuō)我們更熟悉，更具可讀性。

關(guān)于 JSX 映射成 JS 對(duì)象，也就是 Virtual DOM 的內(nèi)部描述，參見(jiàn)Virtual DOM Terminology，如果你不想使用 JSX，直接使用 JS 就是用這里面提到的接口方法。