2.1　JSX

2.1.1　JSX简介

JSX是一种用于描述UI的JavaScript扩展语法，React使用这种语法描述组件的UI。

长期以来，UI和数据分离一直是前端领域的一个重要关注点。为了解决这个问题，前端领域发明了模板，将UI的定义放入模板文件，将数据的逻辑维护在JS代码中，然后通过模板引擎，根据数据和模板文件渲染出最终的HTML文件或代码片段。大部分前端框架都实现了自己的模板，要使用这些模板，必须学习它们各自的模板语法，而且对于复杂的UI，模板语法也很难对其进行清晰的描述。

React致力于通过组件的概念将页面进行拆分并实现组件复用。React认为，一个组件应该是具备UI描述和UI数据的完整体，不应该将它们分开处理，于是发明了JSX，作为UI描述和UI数据之间的桥梁。这样，在组件内部可以使用类似HTML的标签描述组件的UI，让UI结构直观清晰，同时因为JSX本质上仍然是JavaScript，所以可以使用更多的JS语法，构建更加复杂的UI结构。

2.1.2　JSX语法

1．基本语法

JSX的基本语法和XML语法相同，都是使用成对的标签构成一个树状结构的数据，例如：

2．标签类型

在JSX语法中，使用的标签类型有两种：DOM类型的标签（div、span等）和React组件类型的标签（在2.2节详细介绍组件的概念）。当使用DOM类型的标签时，标签的首字母必须小写；当使用React组件类型的标签时，组件名称的首字母必须大写。React正是通过首字母的大小写判断渲染的是一个DOM类型的标签还是一个React组件类型的标签。例如：

3．JavaScript表达式

JSX可以使用JavaScript表达式，因为JSX本质上仍然是JavaScript。在JSX中使用JavaScript表达式需要将表达式用大括号“{}”包起来。表达式在JSX中的使用场景主要有两个：通过表达式给标签属性赋值和通过表达式定义子组件。例如：

注意，JSX中只能使用JavaScript表达式，而不能使用多行JavaScript语句。例如，下面的写法都是错误的：

不过，JSX中可以使用三目运算符或逻辑与（&&）运算符代替if语句的作用。例如：

4．标签属性

当JSX标签是DOM类型的标签时，对应DOM标签支持的属性JSX也支持，例如id、class、style、onclick等。但是，部分属性的名称会有所改变，主要的变化有：class要写成className，事件属性名采用驼峰格式，例如onclick要写成onClick。原因是，class是JavaScript的关键字，所以改成className；React对DOM标签支持的事件重新做了封装，封装时采用了更常用的驼峰命名法命名事件。例如：

当JSX标签是React组件类型时，可以任意自定义标签的属性名。例如：

5．注释

JSX中的注释需要用大括号“{}”将/**/包裹起来。例如：

2.1.3　JSX不是必需的

JSX语法对使用React来说并不是必需的，实际上，JSX语法只是React.createElement(component, props, ...children)的语法糖，所有的JSX语法最终都会被转换成对这个方法的调用。例如：

虽然JSX只是一个语法糖，但使用它创建界面元素更加清晰简洁，在项目使用中应该首选JSX语法。