資訊專欄INFORMATION COLUMN
摘要：是一個看起來像的語法擴展。有人覺得看起來太怪異了，但是我覺得是一個偉大的嘗試，是科學進步的表現，我們不應該對他有任何偏見。所以有一個口號，就是所以，的是一個偉大的嘗試，我們應該擁抱。
原文： http://eyasweb.com/#/blog/detail/12
react 帶來了新的語法，JSX。是一個看起來像XML的JavaScript語法擴展。
有些同學因為不喜歡或不習慣JSX語法，而拒絕學習React。有人覺得JSX看起來太怪異了，但是我覺得JSX是一個偉大的嘗試，是科學進步的表現，我們不應該對他有任何偏見。
我們從渲染的歷史角度解釋一下JSX的前瞻性
渲染的歷史 html 與腳本混合在asp年代和php早期，人們的代碼都是html和腳本混合的就像這樣子
Hello
這種代碼的優點是簡單。但是缺點是非常難以維護，項目一旦稍微復雜一點，維護它將是一個噩夢，這也決定了這種方式是寫不出復雜項目的。所以后來誕生了 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 Hello {{name}}
}
但是事實上真的是倒退的發展嗎？如果真的是倒退的發展，為什么 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文件的時候就已經被編譯好了，不會再客戶端浪費資源去編譯。
虛擬DOMJSX 的最大的好處在于，對虛擬DOM的集成。在渲染的時候，在邏輯中就已經明確的整個應用的結構，這時在內存中存儲一個DOM結構，在下次渲染的時候對比原本DOM，只渲染發生了變化的一部分。有人說因為虛擬DOM 大大的提升了 React 性能。其實不然，我覺得虛擬DOM的渲染方式，跟傳統DOM操作也許會好一點，但是好的并不會非常明顯，因為對比DOM節點也是需要計算資源的。
虛擬DOM最大好處在于方便的跟其他平臺的集成，比如 react-native 就是基于虛擬DOM，然后渲染出了原生控件，因為react組件可以映射為對應的原生控件。在輸出的時候，是輸出html DOM，還是安卓控件，還是IOS控件，這是由平臺決定了。
所以 React 有一個口號，就是
Learn Once, Write Anywhere
所以，react 的 JSX 是一個偉大的嘗試，我們應該擁抱 JSX。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/49875.html
摘要：是一個看起來像的語法擴展。有人覺得看起來太怪異了，但是我覺得是一個偉大的嘗試，是科學進步的表現，我們不應該對他有任何偏見。所以有一個口號，就是所以，的是一個偉大的嘗試，我們應該擁抱。 原文： http://eyasweb.com/#/blog/detail/12 react 帶來了新的語法，JSX。是一個看起來像XML的JavaScript語法擴展。 有些同學因為不喜歡或不習慣JSX語...
摘要：譯文原文來自寫在前面使用已經蠻長一段時間但是在新項目開始之際都是東拼西湊其他項目的配置來使用如果要自己從零開始寫一個完整項目的配置估計得費死勁所以在發布版本之際正是時候來認真從零開始學習了是一個出自的庫用于構建用戶交互界面是一個非常厲害的有 譯文,原文來自https://scotch.io/tutorials/s...寫在前面,使用webpack已經蠻長一段時間,但是在新項目開始之際,...
摘要：長文預警字，圖。開發并不是因為，也不是為了取代。不知道從官方介紹來看，可以認為它是下一代是如何腦補出來的。只是一個原型或實驗性產品。所以，不是要取代，也不是下一代，也不是要放棄重建生態。的目前是要擁抱瀏覽器生態。 這幾天前端圈最火的事件莫過于 ry(Ryan Dahl) 的新項目 deno 了，很多 IT 新聞和媒體都用了標題：下一代 Node.js。這周末讀了一遍 deno 的源碼，...
摘要：它不過是硬幣的另一面。因此，既然我們能夠接受與通過這種方式混合在一塊兒，那么是時候讓介入并向我們展示硬幣的另一面了第三階段的并不是一個激進的改變，是因為我們這個行業從一開始就注定和應該是在一起的。 React框架剛剛發布的時候，JSX顛覆了很多人的想法。習慣了HTML標簽與JavaScript代碼分離的前端工程師們，看到JSX大概都會不禁吐槽：這些奇怪的標簽出現在JavaScript里...
摘要：面對越來越火的，我們公司今年也逐漸開始擁抱。綜上所述，我個人覺得是要刪除相關的東西，降低項目復雜度。但是有一個例外情況。這個配置項有三個值可選擇，分別是和。模式會生成，在使用前不需要再進行轉換操作了，輸出文件的擴展名為。 拋轉引用 現在越來越多的項目放棄了javascript，而選擇擁抱了typescript，就比如我們熟知的ant-design就是其中之一。面對越來越火的typesc...
閱讀 1438·2021-09-22 15:43
閱讀 2154·2019-08-30 15:54
閱讀 1154·2019-08-30 10:51
閱讀 2082·2019-08-29 18:35
閱讀 426·2019-08-26 11:58
閱讀 2476·2019-08-26 11:38
閱讀 2432·2019-08-23 18:35
閱讀 3627·2019-08-23 18:33
