JSX语法详解

本文在官方文档的基础上，进行了扩展扩展补充和一些解读。基本涵盖了JSX语法的细枝末节，JSX语法本身并不复杂，也容易掌握。本文供学习参考使用。

一、基础 1、JSX是什么 JSX是一种像下面这样的语法：

const element =

Hello, world!

它是一种JavaScript语法扩展，在React中可以方便地用来描述UI。

本质上，JSX为我们提供了创建React元素方法（React.createElement(component, props, ...children)）的语法糖（syntactic sugar）。上面的代码实质上等价于：

var element = React.createElement( "h1", null, "Hello, world!" );

2、JSX代表JS对象 JSX本身也是一个表达式，在编译后，JSX表达式会变成普通的JavaScript对象。

你可以在if语句或for循环中使用JSX，你可以将它赋值给变量，你可以将它作为参数接收，你也可以在函数中返回JSX。

例如下面的代码：

var element = React.createElement( "h1", null, "Hello, world!" );

上面的代码在if语句中使用JSX，并将JSX作为函数返回值。实际上，这些JSX经过编译后都会变成JavaScript对象。

3、在JSX中使用JavaScript表达式 在JSX中插入JavaScript表达式十分简单，直接在JSX中将JS表达式用大括号括起来即可。

上面的代码中用到了函数调用表达式fromatName(user)。

在JavaScript中，表达式就是一个短语，Javascript解释器会将其计算出一个结果，常量就是最简单的一类表达式。常用的表达式有：

变量名； 函数定义表达式； 属性访问表达式； 函数调用表达式； 算数表达式； 关系表达式； 逻辑表达式； 需要注意的是，if语句以及for循环不是JavaScript表达式，不能直接作为表达式写在{}中，但可以先将其赋值给一个变量（变量是一个JavaScript表达式）:

4、JSX属性值 你可以使用引号将字符串字面量指定为属性值 或者你可以将一个JavaScript表达式嵌在一个大括号中作为属性值：

这里用到的是JavaScript属性访问表达式，上面的代码将编译为：

const element = React.createElement("img", { src: user.avatarUrl });

5、JSX的Children 首先JSX可以是一个不包含Children的empty tag。