- Taro多端開發(fā)權(quán)威指南:小程序、H5與App高效開發(fā)實(shí)戰(zhàn)
- 李佩忠編著
- 813字
- 2021-05-19 18:01:16
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。
注:此處列舉的View是Taro提供的視圖組件,暫且可以將該組件理解為HTML中的div元素。關(guān)于組件的具體內(nèi)容請查看下節(jié)內(nèi)容。
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é)果:

注:列表渲染一定要在生成的每一項(xiàng)中都添加唯一的key。
- 通信工程設(shè)計(jì)與案例
- 電子線路
- Android移動應(yīng)用開發(fā)基礎(chǔ)教程(微課版)
- Rust Standard Library Cookbook
- 全業(yè)務(wù)運(yùn)營下網(wǎng)絡(luò)融合實(shí)現(xiàn)
- 電子技術(shù)進(jìn)階500問
- Mentor PADS VX2.7(中文版)電子設(shè)計(jì)速成實(shí)戰(zhàn)寶典
- 液晶電視機(jī)檢修手冊
- LTE移動通信技術(shù)
- TD-LTE原理與網(wǎng)絡(luò)規(guī)劃設(shè)計(jì)(“十二五”國家重點(diǎn)圖書出版規(guī)劃項(xiàng)目)
- 電路基礎(chǔ)實(shí)驗(yàn)與實(shí)踐
- 尋跡電力電子
- TD-LTE網(wǎng)絡(luò)規(guī)劃原理與應(yīng)用
- 移動通信技術(shù)
- 新型手機(jī)現(xiàn)場維修實(shí)錄