1 JSX是什么？
1.1 JSX 是一个基于 JavaScript + XML 的一个扩展语法。可以使用babel.js在浏览器中处理JSX。
- 它可以作为值使用
- 它并不是字符串
- 它也不是HTML
- 它可以配合JavaScript 表达式一起使用
1.2 JSX本质
JSX本质是React.createElement(component,props,children)函数的语法糖。
React17和17之前的差异
- 在 React 17 新增了 JSX-runtime，可以将 JSX 直接编译成 虚拟DOM;
- 在 React 17 之前，JSX 将会被编译成 React.createElement();
所以，在 17 及之后，如果模块中，只用到了 React 的 JSX ，则不需要引入 React 依赖
1.3 插值表达式：在JSX中可以使用{表达式}嵌入表达式。表达式指的是：产生值的一组代码的集合，例如：
- 变量
- 算术运算
- 函数调用
- ......
注意：分清楚表达式与语句的区别，if、for、while这些都是语句，JSX不支持语句。
2 各种类型内容在插值中的使用
2.1 JSX中的注释
{/*注释*/}
{/*
多行注释
*/}
2.2 JSX输出数据类型
2.2.1 JSX嵌入变量
1.基本类型：
- Number、String、Array类型时，可以直接显示；
- null、undefined、Boolean类型时，内容为空；（如果希望可以显示null、undefined、Boolean，那么需要转成字符串；转换的方式有：toString方法、空字符串拼接、String(变量)等方式；）
2.复合类型：
- 对象 --- 报错
- 数组 -- 数组展开之后，每一位都是一个子元素
- 函数 -- 报错
2.2.2 JSX嵌入表达式
运算表达式、三元运算符、执行一个函数
2.3 JSX使用
2.3.1 列表渲染
- 数组：将原有数据转换成数组，利用JSX可以插入数组的特性，映射出新数组
- 对象扩展：虚拟DOM和diff
2.3.2 条件渲染
- 三元运算符（?:）
- 与或运算符（|| &&）
2.3.3 在属性上使用表达式
JSX 中的表达式也可以使用在属性上，但是使用的时候需要注意：当在属性中使用 {} 的时候，不要使用引号包含。属性名使用驼峰命名。
3 JSX使用注意事项
- 必须有,且只有一个顶层的包含元素 - React.Fragment，即文档碎片，用于充当包含容器，并不会在DOM解析出来，react17之后也可以使用空标签（<></>）充当包含容器。
- JSX 不是html，也不是字符串，很多属性在编写时不一样
- className
- style
- 列表渲染时，必须有 key 值
- 在 jsx 所有标签必须闭合
- 组件的首字母一定大写，标签一定要小写
