什么是JSX
- Facebook起草的JS扩展语法，被正式收录了
- 本质是一个JS对象，需要通过babel编译，最终会被转换为React.createElement
语法
在react 项目中，直接建立 .jsx 或者 .tsx 后缀的文件名，里面就可以书写jsx 的代码 标准： 直接定义一个变量，里面的变量的值是一个标签。 绑定参数使用 {} 进行绑定 如： const pCon = '我是p标签' const h1Dom: JSX.Element = ( <> <h1>我是h1</h1><p>{pCon}</p> </> );
效果：
语法注意事项
- 每个JSX表达式，有且仅有一个根节点,如果需要使用多个根节点，有以下两种做法：
。外层套一个标签
。React.Fragment:使用react的片段标签
- 每个JSX元素必须结束（XML规范）
我们在html中，img， input 等标签可以不需要使用结束标签，但是在jsx 中是需要使用闭合标签的，不然会报错，如下
两种方式是标签的闭合的两种方式，如下：
在JSX中嵌入表达式
jsx 也可以使用表达式，像在vue的 {{ }} 中一样，可以写表达式，在jsx 的语法是 { }这个里面写表达式
- 在JSX中使用注释： 使用 {/* 这是注释 */},window 下面使用 ctrl + l 可以打出：
- 将表达式作为内容的一部分
。null、undefined、false不会显示，不是说在js 中非空的值不显示哦
。处理对象，普通对象，不可以作为子元素，可以放置React元素对象
普通对象：
React元素对象：
。处理数组，数组都可以放置到页面中
- 将表达式作为元素属性
如果大家学过vue 的话，绑定元素的属性是通过 :属性名来进行绑定的，但是jsx 中绑定属性是通 属性名={ }来进行绑定
- 属性使用小驼峰命名法：jsx 中的class属性是关键字，需要使用className来代替
- 防止注入攻击：主要是防止<script>标签里面做一些js 脚本的攻击
。对敏感的<>自动编码
。dangerouslySetInnerHTML:标记需要使用页面，类似于vue的 v-html指令
元素的不可变性
- 虽然JSX元素是一个对象，但是该对象中的所有属性不可更改
- 如果确实需要更改元素的属性，需要重新创建JSX元素，从新reader 节点
这里可能大家会觉得，这么做很浪费性能，但是react 的dom 操作的是react 自己创建出来的虚拟dom, 不会导致浏览器的重绘和重排
