jsx简介

这种看起来可能有些奇怪的标签语法既不是字符串也不是 HTML。

它被称为 JSX， 一种 Javascript 的语法扩展。 我们推荐在 React 中使用 JSX 来描述用户界面。JSX 乍看起来可能比较像是模版语言，但事实上它完全是在 Javascript 内部实现的。

在 JSX 中使用表达式

你可以任意地在 JSX 当中使用 Javascript 表达式，在 JSX 当中的表达式要包含在大括号里。

JSX 本身其实也是一种表达式（本质上就是一个对象）

在编译之后呢，JSX 其实会被转化为普通的 Javascript 对象。

这也就意味着，你其实可以在 if 或者 for 语句里使用 JSX，将它赋值给变量，当作参数传入，作为返回值都可以：

JSX 属性(传参字符串-->引号 ,  其他大括号表达)

你可以使用引号来定义以字符串为值的属性：

也可以使用大括号来定义以 Javascript 表达式为值的属性：

切记你使用了大括号包裹的 Javascript 表达式时就不要再到外面套引号了。JSX 会将引号当中的内容识别为字符串而不是表达式。

警告:（驼峰表达式）

因为 JSX 的特性更接近 Javascript 而不是 HTML , 所以 React DOM 使用 camelCase 小驼峰命名 来定义属性的名称，而不是使用 HTML 的属性名称。

例如，class 变成了 className，而 tabindex 则对应着 tabIndex。

JSX 防注入攻击

你可以放心地在 JSX 当中使用用户输入：

BooLeans, Null, Undefined...会被忽略需要转化为字符串

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

JSX 代表 Objects

Babel 转译器会把 JSX 转换成一个名为 React.createElement() 的方法调用。（本质上就是 我们使用jsx的语法写起来更加的方便，Babel内层还是会转义为基础的语法去生成DOM节点）

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

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

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