一、JSX的本质是什么 ?
很多人误解JSX是HTML，这是错误的JSX的本质是：
JSX是JavaScript的语法拓展（syntax extension）
管方定义：
JSX is a syntax extension for JavaScript.
它不是模板的语言，不是HTML，不是字符串。它是：
JavaScript + XML-likes syntax
二、JSX会被编译成什么？
<h1>Hello</h1>
会被编译成
React.createElement('h1', null, 'hello')
在现代构建工具（如Vite 或者 Webpack）中，会被Babel转换成JS。所以：
JSX只是一个语法糖（syntactic sugar）.
三、JSX的底层结构
React.createElement本质结构
React.createElement(type, props, children)
例如：
<div className="box">Hello</div>
被编译为：
JSX 最终会被处理为 JS 对象
四、JSX不是HTML
JSX看起来像HTML，但它不是：区别：1️⃣ class → className
<div className="box"></div>
在 JavaScript 语言规范里，class是一个关键字（用来定义类，比如class App {}）。如果在 JSX 里直接写：
<div class="box"></div> ❎
Babel 在解析时会把class当成 JavaScript 的关键字，而不是 HTML 属性名，这样就会产生语法错误。
为了避免和 JS 的class关键字冲突，JSX 规定：
写 HTML 的class属性时，必须写成className
最终渲染到浏览器时，React 会自动把className转成标准的class属性
举例子：2️⃣ style 必须是对象
不是字符串3️⃣ 事件是驼峰命名
五、JSX里面可以写什么
JSX中只能写JavaScript表达式(expression)
例如：
{count}{user.name}{isLogin ? "YES" : "NO"}
不可以写语句：因为if是statement, 不是expression.问为什么jsx里面不可以使用if ? 因为JSX只接受expression.
六、JSX的核心能力：动态UI
JSX的最大能力：
UI = JavaScript
例如：这是React的威力；
七、JSX与Component的关系
jsx可以使用：
- HTML标签
- React Component
例如：
<MyConponent />
本质是：
八、JSX与Render机制
每次state改变：
setState(...)
React会：
- 重新执行组件函数
- 生成新的JSX
- 生成新的Virtual DOM
- Diff
- 更新真实DOM
JSX是这个流程的第一步
九、 JSX fragment (避免多余的dom)
JSX必须有一个根节点。错误：
return ( <h1></h1> <p></p>)
正确：
return ( <> <h1></h1> <p></p> </>)
Fragement的本质：
React.Fragment
十、JSX的核心规律总结
- JSX是语法拓展，不是HTML
- JSX会被编译成React.createElement
- JSX本质是JS对象
- JSX只能包含表达式
- JSX中Component必须大写
- JSX中必须有单一根节点
十一、 JSX的工程意义
JSX让：
- 逻辑和UI在同一文件中
- 组件高度封装
- UI可组合
这符合前端架构思想。
十二、JSX的终极本质总结
JSX是一种声明式的UI描述语言，本质是React对象生成器，用于构建Virtual DOM
