擁抱 JSX，它是一個(gè)偉大的嘗試

blair 發(fā)布于2019-08-01 15:22 / 2422人閱讀

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

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

react 帶來了新的語法，JSX。是一個(gè)看起來像XML的JavaScript語法擴(kuò)展。

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

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

渲染的歷史 html 與腳本混合

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


Hello

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

MVC 模式

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

模板語言

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

前端渲染

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

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

JSX

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

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

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

核心變化

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

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

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

JSX的轉(zhuǎn)換

JSX 的最終是會(huì)轉(zhuǎn)化為 js，試過將html模板編譯為js模板的人就會(huì)知道，js模板是遠(yuǎn)遠(yuǎn)的比html效率高。首先是少了html模板的網(wǎng)絡(luò)請(qǐng)求，其次是在執(zhí)行的時(shí)候少了編譯的過程，因?yàn)樵谏蒵s文件的時(shí)候就已經(jīng)被編譯好了，不會(huì)再客戶端浪費(fèi)資源去編譯。

虛擬DOM

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

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

所以 React 有一個(gè)口號(hào)，就是

Learn Once, Write Anywhere

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