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，遍历该数组并返回结果：