JSX语法

JSX是一种JavaScript的语法扩展，首先运用于React中，其格式比较像是模版语言，但事实上完全是在JavaScript内部实现的。元素是构成React应用的最小单位，JSX就是用来声明React当中的元素。React主要使用JSX来描述用户界面，但React并不强制要求使用JSX

JSX特点

React认为渲染逻辑本质上与其他UI逻辑内在耦合，比如，在UI中需要绑定处理事件、在某些时刻状态发生变化时需要通知到UI，以及需要在UI中展示准备好的数据。
JSX可以使用引号来定义以字符串为值的属性：
```
const element = <div tabIndex="0"></div>;
```
也可以使用大括号来定义以JavaScript表达式为值的属性：
```
const element = <img src={user.avatarUrl} />;
```
因为JSX的特性更接近JavaScript而不是HTML，所以React DOM使用camelCase（小驼峰）命名来定义属性的名称，而不是使用HTML的属性名称。例如：class变成了className，而tableindex则对应着tableIndex。

使用方法

嵌套格式

JSX标签是闭合式的，像XML/HTML一样在结尾处用/>表示：
```
const element = <img src={user.avatarUrl} />;
```
JSX标签同样可以相互嵌套：

嵌入表达式

在JSX中可任意使用JavaScript表达式，但要包含在大括号里，例如：2 + 2，user.firstName，以及formatName(user)都是可以使用的。

function formatName(user) {
    return user.firstName + ' ' + user.lastName;
}
const user = {
    firstName: 'Harper',
    lastName: 'Perez'
};
const element = (
    <h1>
        Hello, {formatName(user)}!
    </h1>
);
ReactDOM.render(
    element,
    document.getElementById('root')
);

书写JSX的时候一般都会带上换行和缩进，这样可以增强代码的可读性。与此同时在JSX代码的外面扩上一个小括号，这样可以防止分号自动插入的bug。
JSX本身其实也是一种表达式
在编译之后，JSX会被转化为普通的JavaScript对象。所以可以在if或者for语句里使用JSX，将它赋值给变量，当作参数传入，作为返回值都是允许的：
```
function getGreeting(user) {
    if (user) {
        return <h1>Hello, {formatName(user)}!</h1>;
    }
    return <h1>Hello, Stranger.</h1>;
}
```

防注入攻击

在JSX中嵌入用户输入是安全的：

const title = response.potentiallyMaliciousInput;
// 要接收到的可能含有危险内容的字符串放入大括号中，这是比较安全的做法
const element = <h1>{title}</h1>;

React DOM在渲染之前默认会过滤所有传入的值。它可以确保应用不会被注入攻击。所有的内容在渲染之前都被转换成了字符串。这样可以有效地防止XSS（跨站脚本攻击）。

表示对象

Babel转译器会把JSX转换成一个名为React.createElement()的方法调用。

下面两种代码的作用是完全相同的：

const element = (
    <h1 className="greeting">
        Hello, world!
    </h1>
);

const element = React.createElement(
    'h1',
    { className: 'greeting' },
    'Hello, world!'
);

React.createElement()这个方法首先会进行一些避免bug的检查，之后会返回一个类似下面例子的对象：

// 注意: 以下示例是简化过的（不代表在 React 源码中是这样）
const element = {
    type: 'h1',
    props: {
        className: 'greeting',
        children: 'Hello, world'
    }
};

这样的对象被称为“React 元素”。它代表所有显示在屏幕上的东西。React通过读取这些对象来构建DOM并保持数据内容一致。

执行流程

JSX -> createElement -> 虚拟DOM（JS 对象） -> 真实的DOM