JSX了解及其语法规则

React为方便View层组件化，承载了构建HTML结构化页面的职责。从这点上来看，React与其他JavaScript模板语言有着许多异曲同工之处，但不同之处在于React是通过创建与更新虚拟元素(virtual element)来管理整个Virtual DOM的。

JSX将HTML语法直接加入到JavaScript代码中，再通过翻译器转换到纯JavaScript后由浏览器执行。在实际开发中，JSX 在产品打包阶段都已经编译成纯JavaScript，不会带来任何副作用，反而会让代码更加直观并易于维护。

编译过程由Babel 的JSX编译器实现。（JSX语法实际上是由 html语法 和 Javascript语法 组合而成，它本身是不能直接被浏览器识别的，所以需要我们执行一次编译，它把JSX编译成JavaScript才能执行，这个编译的过程是由Babel这个转换器来完成，就像我们的ES6转码也交给Babel来进行）

JSX的特点

React 使用 JSX 来替代常规的 JavaScript。
JSX 是一个看起来很像 XML 的 JavaScript 语法扩展。
JSX 执行更快，因为它在编译为 JavaScript 代码后进行了优化。
它是类型安全的，在编译过程中就能发现错误。
使用 JSX 编写模板更加简单快速。
JSX防止了XSS攻击

1. 语法要求

1）标签一定要闭合——由于它是XML的基本语法，语法比较严谨，所以必须要闭合。
2）定义标签时，只允许被一个标签包裹——也就是最外层的标签没有同级的兄弟元素 / 标签，否则运行时就会报错。可以使用一个空标签当顶级标签

3） 可以在 JSX 中使用 JavaScript 表达式。表达式写在花括号 {} 中。
4）JSX 中不能使用 if else 语句，但可以使用三元运算。
5） React 推荐使用内联样式。

6）注释：需要写在花括号中

7）数组：JSX 允许在模板中插入数组，数组会自动展开所有成员

2.元素类型

小写首字母对应DOM元素
大写首字母对应组件元素自然 ——首字母大写的话会被错误认为是组件
注释使用js注释方法

3.元素属性

class属性改为className ——在JSX语法中，class不能叫class，原因class是我们ES6的关键字代表类
for属性改为htmlFor ——for是js语法的关键字，所以在JSX语法中也不能叫for
Boolean属性:省略Boolean属性值会导致JSX认为bool值设为了true——所以BOOLean属性会默认设置成true,与过去的编程思想是不一样的，我们过去只要不设定一般默认为false

4. JavaScript属性表达式

属性值要使用表达式，只要用 {} 替换 " " 即可
<input type=“text” value={val ? val : " "}/> ——对于vue语法，大括号外面还要加双引号，但是对于我们的JSX语法我们不需要。

5.HTML转义

React会将所有要显示到DOM的字符串转义，防止XSS。
后台传过来的数据带页面标签的是不能直接转义的，转义的写法比如:

解析：这里定义了一个App组件，通 过dangerouslySetInnerHTML={{__html:abc}}> 对DOM字符串进行转义——可以注意到下面有个dangrouslySetInnerHTML很长，这是在建议不要使用这种指令，提醒用户这种操作有危险性。