資訊專欄INFORMATION COLUMN
摘要：中基本都使用來開發(fā)，但其實(shí)是的一種語法糖。但是我們必須知道，本質(zhì)上就是在編譯的時(shí)候，會(huì)由將轉(zhuǎn)化為。比如生成了比如生成了解的本質(zhì)，只需要記住本質(zhì)就是附錄提供的一個(gè)在線轉(zhuǎn)換為的地址
react中基本都使用JSX來開發(fā)，但JSX其實(shí)是javascript的一種語法糖。
什么是語法糖？語法糖就是提供了一種全新的方式書寫代碼，但是其實(shí)現(xiàn)原理與之前的寫法相同。
語法糖可以說是廣泛存在于各種計(jì)算機(jī)代碼中，包括C語言中的a[i]其實(shí)就是*a+i的語法糖。而今天對(duì)于我們來說，a[i]其實(shí)已經(jīng)很普遍和常用了，所以也沒有人提這是語法糖這回事了。因?yàn)榻K極來說，所有語言都是匯編語言的語法糖：）
簡(jiǎn)單說，JSX是一種更簡(jiǎn)便書寫javascript的方式
由于DOM結(jié)構(gòu)被我們寫到了javascript文件里，由javascript來生成DOM結(jié)構(gòu)
如果一直使用javascript來寫DOM結(jié)構(gòu)，那么render函數(shù)里就是一堆React.createElement
這樣既不美觀也不實(shí)用。
但是我們必須知道，JSX本質(zhì)上就是javascript
在編譯的時(shí)候，會(huì)由babel將JSX轉(zhuǎn)化為javascript。
比如
222 333
生成了
"use strict";
React.createElement("div", {
className: "aaa"
}, React.createElement("span", null, "222"), React.createElement("span", null, "333"));
比如
function Comp(){
return test
}
222
生成
"use strict";
function Comp() {
return React.createElement("div", {
className: "test"
}, "test");
}
React.createElement(Comp, {
className: "test2"
}, "222");
了解JSX的本質(zhì)，只需要記住：JSX本質(zhì)就是javascript
附錄babel提供的一個(gè)在線轉(zhuǎn)換JSX為javascript的地址
https://babeljs.io/repl/
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/109432.html
摘要：基于的動(dòng)態(tài)數(shù)據(jù)綁定歸屬于筆者的與前端工程化實(shí)踐中的，本文中設(shè)計(jì)的引用資料參考學(xué)習(xí)與實(shí)踐資料索引，如果有對(duì)基礎(chǔ)語法尚存疑惑的可以參閱現(xiàn)代開發(fā)語法基礎(chǔ)與實(shí)踐技巧。 基于 JSX 的動(dòng)態(tài)數(shù)據(jù)綁定歸屬于筆者的 React 與前端工程化實(shí)踐中的，本文中設(shè)計(jì)的引用資料參考 React 學(xué)習(xí)與實(shí)踐資料索引，如果有對(duì) JavaScript 基礎(chǔ)語法尚存疑惑的可以參閱現(xiàn)代 JavaScript 開發(fā)：語...
摘要：需要提醒讀者的是，的很多例子都是通過來寫的，但這并不是語法，后面我們會(huì)有單獨(dú)的一小節(jié)講解的基本語法，不過目前為止我們先將跟多精力放在上。 書籍完整目錄 1.2 JSX 語法 showImg(https://segmentfault.com/img/bVvKLR); 官方文檔 https://facebook.github.io/react/docs/jsx-in-depth.html ...
摘要：但是它與里大部分的概率是保持一致的。但是如何將轉(zhuǎn)換成函數(shù)的調(diào)用呢就是干這件事情的。好了，讓我們看看是如何工作的。下面的圖片在流程圖中高亮了一個(gè)組件是如何工作的最后希望這篇文章能幫助你理解是如何工作的至少在中 英文原文鏈接 Virtual DOM很神奇，同時(shí)也比較復(fù)雜，難以理解。react,preact和相似的js庫都使用了virtual dom。然而，我找不到任何好的文章或者文檔，可以...
摘要：屬性我們還可以使用來書寫樣式，它會(huì)自動(dòng)幫我們編譯為格式內(nèi)容語法高亮建議使用配合該擴(kuò)展支持語法高亮擴(kuò)展開發(fā)項(xiàng)目，當(dāng)然你可以把文件當(dāng)作對(duì)待。 Omil 是什么？ Omil是一個(gè) webpack 的 loader，它允許你以一種名為單文件組件(SFCs)的格式撰寫 Omi 組件： ${this.data.title} export default class { test(){...
閱讀 931·2021-11-22 13:54
閱讀 2861·2021-09-28 09:36
閱讀 2996·2019-08-30 15:55
閱讀 1966·2019-08-30 15:44
閱讀 558·2019-08-29 12:31
閱讀 2575·2019-08-28 18:18
閱讀 1212·2019-08-26 13:58
閱讀 1399·2019-08-26 13:44
