JSX

JSX，是类 XML 语法的 ECMAScript 的语法扩展(extension)。它完美地利用 JavaScript 自带的语法和特征，并使用大家熟悉的 HTML 语法来创建虚拟元素。

React 通过创建与更新虚拟元素(virtual element) 来管理整个 VIrtual Dom 的。虚拟元素可以理解为真实元素的对应,它的构建与更新都在内存中完成，并不会真正渲染到 DOM 中去。JSX 中使用的"元素" 包括 DOM 元素与组件元素，分别对应原生元素与自定义元素。

JSX 基本语法

1. 使用类 XML 语法的好处是标签可以任意嵌套
使用类 XML 语法的好处是标签可以任意嵌套。
注意点:

• 定义标签时，只运行被一个标签包裹。原因是一个标签会被转译成对应的 React.creatElement 调用方法，最外层没有被包裹，显然无法转译成方法调用。
• 标签一定要闭合。

2. 元素类型
DOM 元素首字母小写，组件元素首字母大写。
JSX 还可以通过命名空间的方式使用组件元素，以解决组件相同名称冲突的问题，或者对一类组件进行归类。

• 注释
  在组件的子元素位置使用注释要用 {} 包裹起来。

• DOCTYPE
  DOCTYPE 头是一个特殊的标志，DOCTYPE没有闭合，也就是说没办法渲染它。

3. 元素属性
DOM 元素的属性是标准规范属性，但是有两个例外 --- class 和 for。因为在 JaveScript 中这两个单词都是关键词。

• class 属性改为 className；
• for 属性改为 htmlFor

在写自定义属性的时候，都由标准写法改成小驼峰写法。

• Boolean属性
  省略 Boolean 属性值会导致 JSX 认为 bool 值设为了 true。要传 false 时，必须使用属性表达式。
• 展开属性
  可以使用 ES6 rest/spread 特征来提高效率。
• 自定义 HTML 属性
  如果在 JSX 中往 DOM 元素中传入自定义属性，React 是不会渲染的。
  如果要使用 HTML 自定义属性，要使用 data- 前缀，这与 HTML 标准是一致的。
  然而在自定义标签中任意的属性都是被支持的。
  以 aria- 开头的网络无障碍属性同样可以正常使用。

4. JavaScript 属性表达式
属性值要使用表达式，只要用 {} 代替 "" 即可。
子组件也可以作为表达式使用。

5. HTML 转义
React 会将所有要显示到 DOM 的字符串转义，防止 XSS，所以，如果JSX中含有转义后的特殊字符，最后 DOM 中不会正确显示。

• 直接使用 UTF-8 字符；
• 使用对应字符的 Unicode 编码查询编码；
• 使用数组组装；
• 直接插入原始的 HTML；

此外 React 提供 dangerouslySetInnerHtml 属性，必满 React 转义字符，在确定必要的情况下可以使用它。