官术网_书友最值得收藏!

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。

注:此處列舉的View是Taro提供的視圖組件,暫且可以將該組件理解為HTML中的div元素。關于組件的具體內容請查看下節內容。

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,遍歷該數組并返回結果:

注:列表渲染一定要在生成的每一項中都添加唯一的key。

主站蜘蛛池模板: 普格县| 修文县| 屯昌县| 河北区| 林州市| 乌拉特后旗| 凤山市| 方山县| 洪雅县| 宣威市| 荆门市| 普格县| 响水县| 英超| 奉化市| 灌南县| 三门县| 喀什市| 乌拉特前旗| 巢湖市| 米林县| 嘉鱼县| 加查县| 东宁县| 寻乌县| 托里县| 祁门县| 光山县| 潞城市| 潢川县| 崇义县| 黄梅县| 扎鲁特旗| 吉林市| 安远县| 铁岭市| 普陀区| 苏尼特左旗| 嘉祥县| 平昌县| 湘潭县|