擁抱 JSX，它是一個偉大的嘗試

原文： http://eyasweb.com/#/blog/detail/12

react 帶來了新的語法，JSX。是一個看起來像XML的JavaScript語法擴展。

有些同窗由於不喜歡或不習慣JSX語法，而拒絕學習React。有人以爲JSX看起來太怪異了，可是我以爲JSX是一個偉大的嘗試，是科學進步的表現，咱們不該該對他有任何偏見。

咱們從渲染的歷史角度解釋一下JSX的前瞻性

渲染的歷史

html 與腳本混合

在asp年代和php早期，人們的代碼都是html和腳本混合的就像這樣子

<?php $name = "world"; ?>
<h1>Hello <?php echo $name; ?></h1>

這種代碼的優勢是簡單。可是缺點是很是難以維護，項目一旦稍微複雜一點，維護它將是一個噩夢，這也決定了這種方式是寫不出複雜項目的。因此後來誕生了 MVC 模式的開發方式

MVC 模式

MVC 模式將 view 與邏輯分離了，view 只關心怎麼輸出變量。這種分離方式使得項目維護性和易用性大大的加強了，而且使得項目更加的規範化。

模板語言

MVC 使 view 與邏輯分離了，可是輸出變量仍是不方便，因此各類各樣的模板語言誕生了，好比什麼 Smarty、Twig、Haml、Liquid、Mustache等等，都是爲了更好的去渲染模板。這個時候利用模板引擎能夠在必定程度上實現組件化了。不過這種組件化只是字符串拼接級別的組件化而已。

前端渲染

隨着前端開發的高速發展，前端渲染慢慢登上歷史舞臺。MVC 模式中的 view 也慢慢的退化，然後端慢慢的演變成了api服務。

前端渲染直接就出現了各類的前端模板引擎，如underscore、Mustache、artTemplate等基於字符串的模板。另外 angular、vue等框架也創造了基於DOM的模板引擎。目前相信不少前端開發的人都已經習慣了這種模板開發方式。

JSX

那麼，渲染的歷史先進行到這裏，咱們回過頭來看看JSX。咱們看看JSX的語法，乍一看，它好像回到瞭解放前的那種 html和腳本混合 的模式。

const Hello = props => {
  const name = 'world';
  return <h1>Hello {{name}}</h1>
}

可是事實上真的是倒退的發展嗎？若是真的是倒退的發展，爲何 React 這個框架在最終不但沒有死掉，並且還火起來了呢？這裏必定是有緣由的。

核心變化

咱們縱觀渲染的歷史發展，他們都有一個共同的特色，都是以 html 爲中心，在 html 輸出變量，在 html 中嵌入條件判斷與循環。不管是腳本混合，模板語言，DOM模板，他們都是圍繞着 html而進行的。

而 JSX 是以 js 爲中心，在 js 中嵌入 html，是對js的擴展。js是一門腳本語言，自己就是爲處理邏輯而生的，在js中嵌入一部分html纔是更合理的作法。

以js爲中心，最明顯的好處就是，能夠更加精確和更加方便的控制輸出，而且 JSX 至關因而基於DOM的一種模板引擎，因此輸出的html更加的符合規範。

JSX的轉換

JSX 的最終是會轉化爲 js，試過將html模板編譯爲js模板的人就會知道，js模板是遠遠的比html效率高。首先是少了html模板的網絡請求，其次是在執行的時候少了編譯的過程，由於在生成js文件的時候就已經被編譯好了，不會再客戶端浪費資源去編譯。

虛擬DOM

JSX 的最大的好處在於，對虛擬DOM的集成。在渲染的時候，在邏輯中就已經明確的整個應用的結構，這時在內存中存儲一個DOM結構，在下次渲染的時候對比本來DOM，只渲染髮生了變化的一部分。有人說由於虛擬DOM 大大的提高了 React 性能。其實否則，我以爲虛擬DOM的渲染方式，跟傳統DOM操做也許會好一點，可是好的並不會很是明顯，由於對比DOM節點也是須要計算資源的。

虛擬DOM最大好處在於方便的跟其餘平臺的集成，好比 react-native 就是基於虛擬DOM，而後渲染出了原生控件，由於react組件能夠映射爲對應的原生控件。在輸出的時候，是輸出html DOM，仍是安卓控件，仍是IOS控件，這是由平臺決定了。

因此 React 有一個口號，就是

Learn Once, Write Anywhere

因此，react 的 JSX 是一個偉大的嘗試，咱們應該擁抱 JSX。