1 JSX是什么？
1.1 JSX 是一個基于 JavaScript + XML 的一個擴(kuò)展語法?？梢允褂胋abel.js在瀏覽器中處理JSX。
- 它可以作為值使用
- 它并不是字符串
- 它也不是HTML
- 它可以配合JavaScript 表達(dá)式一起使用
1.2 JSX本質(zhì)
JSX本質(zhì)是React.createElement(component,props,children)函數(shù)的語法糖。
React17和17之前的差異
- 在 React 17 新增了 JSX-runtime，可以將 JSX 直接編譯成 虛擬DOM;
- 在 React 17 之前，JSX 將會被編譯成 React.createElement();
所以，在 17 及之后，如果模塊中，只用到了 React 的 JSX ，則不需要引入 React 依賴
1.3 插值表達(dá)式：在JSX中可以使用{表達(dá)式}嵌入表達(dá)式。表達(dá)式指的是：產(chǎn)生值的一組代碼的集合，例如：
- 變量
- 算術(shù)運(yùn)算
- 函數(shù)調(diào)用
- ......
注意：分清楚表達(dá)式與語句的區(qū)別，if、for、while這些都是語句，JSX不支持語句。
2 各種類型內(nèi)容在插值中的使用
2.1 JSX中的注釋
{/*注釋*/}
{/*
多行注釋
*/}
2.2 JSX輸出數(shù)據(jù)類型
2.2.1 JSX嵌入變量
1.基本類型：
- Number、String、Array類型時，可以直接顯示；
- null、undefined、Boolean類型時，內(nèi)容為空；（如果希望可以顯示null、undefined、Boolean，那么需要轉(zhuǎn)成字符串；轉(zhuǎn)換的方式有：toString方法、空字符串拼接、String(變量)等方式；）
2.復(fù)合類型：
- 對象 --- 報錯
- 數(shù)組 -- 數(shù)組展開之后，每一位都是一個子元素
- 函數(shù) -- 報錯
2.2.2 JSX嵌入表達(dá)式
運(yùn)算表達(dá)式、三元運(yùn)算符、執(zhí)行一個函數(shù)
2.3 JSX使用
2.3.1 列表渲染
- 數(shù)組：將原有數(shù)據(jù)轉(zhuǎn)換成數(shù)組，利用JSX可以插入數(shù)組的特性，映射出新數(shù)組
- 對象擴(kuò)展：虛擬DOM和diff
2.3.2 條件渲染
- 三元運(yùn)算符（?:）
- 與或運(yùn)算符（|| &&）
2.3.3 在屬性上使用表達(dá)式
JSX 中的表達(dá)式也可以使用在屬性上，但是使用的時候需要注意：當(dāng)在屬性中使用 {} 的時候，不要使用引號包含。屬性名使用駝峰命名。
3 JSX使用注意事項(xiàng)
- 必須有,且只有一個頂層的包含元素 - React.Fragment，即文檔碎片，用于充當(dāng)包含容器，并不會在DOM解析出來，react17之后也可以使用空標(biāo)簽（<></>）充當(dāng)包含容器。
- JSX 不是html，也不是字符串，很多屬性在編寫時不一樣
- className
- style
- 列表渲染時，必須有 key 值
- 在 jsx 所有標(biāo)簽必須閉合
- 組件的首字母一定大寫，標(biāo)簽一定要小寫
