jsx
-
概念：JSX 将 HTML 语法直接加入到 JavaScript 代码中，再通过翻译器转换到纯JavaScript 后由浏览器执行。在实际开发中，JSX 在产品打包阶段都已经编译成纯 JavaScript，不会带来任何副作用，反而会让代码更加直观并易于维护。尽管JSX是第三方标准，但这套标准适用于任何一套框架。
-
JSX 基本语法
-
定义标签时，必须被一个标签包裹
-
标签一定要闭合
-
元素类型：对应规则是 HTML 标签首字母是否为小写字母，其中小写首字母对应 DOM 元素，而组件元素自 然对应大写首字母
-
元素属性：在 JSX 中，不论是 DOM 元素还是组件元素，它们都有属性。不同的是，DOM 元素的属性 是标准规范属性，但有两个例外—— class 和 for ，这是因为在 JavaScript 中这两个单词都是关键 词。因此，我们这么转换：
- class 属性改为 className
- for 属性改为 htmlFor
- 而组件元素的属性是完全自定义的属性，也可以理解为实现组件所需要的参数
- Boolean ：
<Checkbox checked={true} /> 可以简写为 <Checkbox checked /> ，反之 <Checkbox checked={false} /> 就可以省略 checked 属性- 自定义 HTML :如果要使用 HTML 自定义属性，要使用 data- 前缀，这与 HTML 标准也是一致的
-
JavaScript 属性表达式:属性值要使用表达式，只要用 {} 替换 "" 即可
-
HTML 转义:React 会将所有要显示到 DOM 的字符串转义，防止 XSS。
- 直接使用 UTF-8 字符 ©
- 使用对应字符的 Unicode 编码查询编码
- 使用数组组装
<div>{['cc ', <span>©</span>, ' 2015']}</div>- 直接插入原始的 HTML
- React 提供了 dangerouslySetInnerHTML 属性。正如其名，它的作用就是避免 React 转 义字符，在确定必要的情况下可以使用它：
<div dangerouslySetInnerHTML={{__html: 'cc © 2015'}} />
