2.1 JSX

2.1.1 JSX簡介

JSX是JavaScript XML的縮寫，是一種用來描述UI的JavaScript語法糖（Syntactic Sugar），Taro支持使用該語法來描述組件的UI表現(xiàn)。初學(xué)JSX，你可能會抱怨該語法的零散與隨意，無法理解在JavaScript代碼中直接書寫HTML代碼。如果你此前使用原生JavaScript或jQuery開發(fā)過大型應(yīng)用，則你一定會抱怨代碼耦合度過高、代碼可維護(hù)性差、團(tuán)隊(duì)協(xié)同效率低，而正確使用JSX能很好地解決這些問題。初學(xué)時(shí)，你所謂的這些缺點(diǎn)正是它的優(yōu)點(diǎn)，寫法隨意，可讀性更好，更有利于組件封裝與復(fù)用，特別是結(jié)合Hooks使用，可以輕松做到狀態(tài)與視圖解耦合，從而使組件復(fù)用“更上一層樓”。

2.1.2 JSX語法

1.基礎(chǔ)語法

JSX通俗理解就是支持在JavaScript代碼中書寫HTML代碼，將JavaScript交互操作與HTML界面定義完美結(jié)合。我們來看使用JSX的一段簡單的代碼：

通過以上代碼，我們驚奇地發(fā)現(xiàn)，可以將類似HTML代碼片段賦值給一個(gè)變量，這種語法就是JSX。

2.值渲染與計(jì)算

既然是JavaScript與HTML的完美結(jié)合，也就是說，我們還可以在類似HTML代碼片段中使用JavaScript變量或執(zhí)行運(yùn)算等，在HTML中使用JavaScript變量的示例如下：

在HTML中執(zhí)行運(yùn)算：

通過以上兩個(gè)實(shí)例不難發(fā)現(xiàn)，在類似HTML代碼片段中使用JavaScript，只需使用{}操作符即可。可以理解為{}中的內(nèi)容是需要交給JavaScript去計(jì)算并輸出最終結(jié)果的。

3.屬性

我們在編寫HTML代碼時(shí)，經(jīng)常會在標(biāo)簽中定義很多屬性，例如：

· class，指定類名。

· style，定義標(biāo)簽樣式。

· ……

在JSX語法中同樣可以定義屬性，但值得一提的是，class等眾多DOM屬性在JavaScript中是關(guān)鍵字或保留字，所以不能使用。例如，在書寫JSX時(shí)需要用className代替class，因?yàn)閏lass在JavaScript中為關(guān)鍵字：

4.條件渲染

有時(shí)組件UI需要根據(jù)特定條件渲染特定內(nèi)容，例如定義了一個(gè)變量flag，當(dāng)變量為true時(shí)，頁面顯示“真”；當(dāng)變量為false時(shí)，頁面顯示“假”：

5.列表渲染

使用諸如數(shù)組結(jié)構(gòu)數(shù)據(jù)時(shí)，需要遍歷數(shù)據(jù)計(jì)算的最終UI結(jié)果。例如定義了一個(gè)數(shù)組變量fruits，數(shù)組中包含apple、peach、pear，遍歷該數(shù)組并返回結(jié)果：