2.1 JSX

2.1.1 JSX簡介

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

2.1.2 JSX語法

1.基礎語法

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

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

2.值渲染與計算

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

在HTML中執行運算：

通過以上兩個實例不難發現，在類似HTML代碼片段中使用JavaScript，只需使用{}操作符即可。可以理解為{}中的內容是需要交給JavaScript去計算并輸出最終結果的。

3.屬性

我們在編寫HTML代碼時，經常會在標簽中定義很多屬性，例如：

· class，指定類名。

· style，定義標簽樣式。

· ……

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

4.條件渲染

有時組件UI需要根據特定條件渲染特定內容，例如定義了一個變量flag，當變量為true時，頁面顯示“真”；當變量為false時，頁面顯示“假”：

5.列表渲染

使用諸如數組結構數據時，需要遍歷數據計算的最終UI結果。例如定義了一個數組變量fruits，數組中包含apple、peach、pear，遍歷該數組并返回結果：