JSX（JavaScript XML）是 React 中用于描述 UI 的一种 语法扩展。它看起来很像 HTML，但实际上会被编译成普通的 JavaScript 函数调用（通常是 React.createElement()），从而构建 React 元素（React Elements）。下面从多个角度详细解释 JSX，并与 Vue 的模板语法进行对比。
注意精准的描述✅：JSX 是 JavaScript 的语法扩展
而不是❌：JSX是一种模版语法
JSX 是 JavaScript 的语法扩展，允许你在 JavaScript 代码中直接编写类似 HTML 的结构。它不是字符串，也不是 HTML，而是一种更直观地创建 React 元素的方式。
我们写的jsx代码：
const element = <h1>Hello, world!</h1>;
编译后等价于：
const element = React.createElement('h1', null, 'Hello, world!');
现在的编译工具不止有 Babel
- React Compiler (Forget) ：React 团队推出的实验性编译器，旨在通过静态分析自动优化
useMemo和useCallback等，目前可作为 Babel 插件 或集成到 Vite、Next.js 中使用。- SWC (Speedy Web Compiler) ：目前最流行的 Babel 替代品，由 Rust 编写。它的单线程编译速度比 Babel 快 20 倍，已被 Next.js 等主流框架选为默认编译器。
- esbuild：基于 Go 语言开发，以极速著称。它集成了转译和打包功能，是 Vite 在开发环境下的核心驱动引擎。
- tsc (TypeScript Compiler) ：如果你使用 TypeScript，
tsc本身就具备将 JSX 转译为 JS 的能力，无需 Babel 配合。
JSX本质上是 React.createElement() 函数调用的语法糖
JSX 返回的是什么？
JSX 表达式最终返回的是是一个普通 JavaScript 对象，我们管这个对象叫：React 元素（React Element） ，例如：
const el = <div className="box">Content</div>;
输出大致如下（简化版）：
{
type: "div",
props: {
className: "box",
children: "Content"
}
}
它是一个描述Dom结构的蓝图，最终构建成一个 虚拟DOM，然后通过 DIFF 算法，计算出最小变更，最后去更新真实的DOM。
JSX 的核心特点
表达式嵌入：使用 {} 嵌入任意 JavaScript 表达式。
const name = "Alice";
const element = <h1>Hello, {name}!</h1>;
这也是jsx 与传统模版语法最大的区别， 传统模版语法都有一套自己的语法规则，你必须去学习它定义的规则，增加学习成本；
而JSX 通过一个{}，让你可以在大括号内使用任意有效 javascript表达式，所以你不用去学习任何新的模版写法、指令，直接使用javascript原生能力；
- 变量与表达式
- 函数调用
- 条件判断
- 列表渲染等
所以说 jsx 是 JavaScript 的语法扩展
总结：
- JSX 是 JavaScript 的语法扩展：提供了更具可读性的声明式写法
- 返回的是一个js对象：它是虚拟DOM的基础
- {}写法，融合了js语法的全部能力：无需额外学习特定的模版语法
