说说react 中jsx语法糖的本质？

一、什么是jsx

jsx本质是一个语法糖，通过babel转成React.createElement函数，在babel官网上可以把jsx转成React的JS语法

• 首先解析出来的话，就是一个createElement函数
• 然后这个函数执行完后，会返回一个vnode
• 通过vdom的patch或者是其他的一个方法，最后渲染一个页面

jsx是一种语法扩展，<></>这种写法就是jsx，jsx编写的组件通过预处理babel解析后，再交给React库渲染到指定的父容器下，形成最终html页面。

jsx中组件名字，必须以大写字母开始

二、jsx语法规则？

1. 定义虚拟DOM时，不要写引号
2. 渲染数据使用{ }
3. 内联样式：要用style={{ }}的样式去写
4. 只有一个跟标签
5. 标签是必须闭合的
6. 样式的类名要用className，不能用class
7. 绑定事件用的是onClick，onChange

三、jsx的优点

• jsx执行更快，因为它在编译为JavaScript代码后进行了优化
• 它的类型安全的，在编译过程中就能发现错误
• 使用jsx编写模板更加简单快速