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

xorpay 發(fā)布于2019-08-19 18:32 / 3224人閱讀

摘要：是一個看起來像的語法擴展。有人覺得看起來太怪異了，但是我覺得是一個偉大的嘗試，是科學(xué)進步的表現(xiàn)，我們不應(yīng)該對他有任何偏見。所以有一個口號，就是所以，的是一個偉大的嘗試，我們應(yīng)該擁抱。

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

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

有些同學(xué)因為不喜歡或不習(xí)慣JSX語法，而拒絕學(xué)習(xí)React。有人覺得JSX看起來太怪異了，但是我覺得JSX是一個偉大的嘗試，是科學(xué)進步的表現(xiàn)，我們不應(yīng)該對他有任何偏見。

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

渲染的歷史 html 與腳本混合

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


Hello

這種代碼的優(yōu)點是簡單。但是缺點是非常難以維護，項目一旦稍微復(fù)雜一點，維護它將是一個噩夢，這也決定了這種方式是寫不出復(fù)雜項目的。所以后來誕生了 MVC 模式的開發(fā)方式

MVC 模式

MVC 模式將 view 與邏輯分離了，view 只關(guān)心怎么輸出變量。這種分離方式使得項目維護性和易用性大大的增強了，并且使得項目更加的規(guī)范化。

模板語言

MVC 使 view 與邏輯分離了，但是輸出變量還是不方便，所以各種各樣的模板語言誕生了，比如什么 Smarty、Twig、Haml、Liquid、Mustache等等，都是為了更好的去渲染模板。這個時候利用模板引擎可以在一定程度上實現(xiàn)組件化了。不過這種組件化只是字符串拼接級別的組件化而已。

前端渲染

隨著前端開發(fā)的高速發(fā)展，前端渲染慢慢登上歷史舞臺。MVC 模式中的 view 也慢慢的退化，而后端慢慢的演變成了api服務(wù)。

前端渲染直接就出現(xiàn)了各種的前端模板引擎，如underscore、Mustache、artTemplate等基于字符串的模板。另外 angular、vue等框架也創(chuàng)造了基于DOM的模板引擎。目前相信很多前端開發(fā)的人都已經(jīng)習(xí)慣了這種模板開發(fā)方式。

JSX

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

const Hello = props => {
  const name = "world";
  return Hello {{name}}
}

但是事實上真的是倒退的發(fā)展嗎？如果真的是倒退的發(fā)展，為什么 React 這個框架在最終不但沒有死掉，而且還火起來了呢？這里一定是有原因的。

核心變化

我們縱觀渲染的歷史發(fā)展，他們都有一個共同的特點，都是以 html 為中心，在 html 輸出變量，在 html 中嵌入條件判斷與循環(huán)。無論是腳本混合，模板語言，DOM模板，他們都是圍繞著 html而進行的。

而 JSX 是以 js 為中心，在 js 中嵌入 html，是對js的擴展。js是一門腳本語言，本身就是為處理邏輯而生的，在js中嵌入一部分html才是更合理的做法。

以js為中心，最明顯的好處就是，可以更加精確和更加方便的控制輸出，并且 JSX 相當(dāng)于是基于DOM的一種模板引擎，所以輸出的html更加的符合規(guī)范。

JSX的轉(zhuǎn)換

JSX 的最終是會轉(zhuǎn)化為 js，試過將html模板編譯為js模板的人就會知道，js模板是遠遠的比html效率高。首先是少了html模板的網(wǎng)絡(luò)請求，其次是在執(zhí)行的時候少了編譯的過程，因為在生成js文件的時候就已經(jīng)被編譯好了，不會再客戶端浪費資源去編譯。

虛擬DOM

JSX 的最大的好處在于，對虛擬DOM的集成。在渲染的時候，在邏輯中就已經(jīng)明確的整個應(yīng)用的結(jié)構(gòu)，這時在內(nèi)存中存儲一個DOM結(jié)構(gòu)，在下次渲染的時候?qū)Ρ仍綝OM，只渲染發(fā)生了變化的一部分。有人說因為虛擬DOM 大大的提升了 React 性能。其實不然，我覺得虛擬DOM的渲染方式，跟傳統(tǒng)DOM操作也許會好一點，但是好的并不會非常明顯，因為對比DOM節(jié)點也是需要計算資源的。

虛擬DOM最大好處在于方便的跟其他平臺的集成，比如 react-native 就是基于虛擬DOM，然后渲染出了原生控件，因為react組件可以映射為對應(yīng)的原生控件。在輸出的時候，是輸出html DOM，還是安卓控件，還是IOS控件，這是由平臺決定了。

所以 React 有一個口號，就是

Learn Once, Write Anywhere

所以，react 的 JSX 是一個偉大的嘗試，我們應(yīng)該擁抱 JSX。