技术深度解析
JSX 本质上是 `React.createElement` 调用的语法糖层。当开发者编写 `<div className="container">Hello</div>` 时，Babel 插件 `@babel/plugin-transform-react-jsx` 会将其转换为 `React.createElement('div', { className: 'container' }, 'Hello')`。这一转换发生在编译时，意味着解析过程零运行时开销——浏览器永远不会看到 JSX。新的 JSX 转换（React 17+，通过 `react/jsx-runtime`）通过自动导入 `jsx()` 和 `jsxs()` 函数进一步优化，减少了打包体积并实现了自动运行时检测。
编译流水线：
1. 解析器： 源代码被解析为 AST（抽象语法树）。JSX 元素表示为 `JSXElement` 节点。
2. 转换： 插件遍历 AST，将每个 `JSXElement` 转换为 `createElement` 或新 `jsx` 函数的 `CallExpression`。
3. 代码生成： 转换后的 AST 被序列化回 JavaScript，并添加适当的导入语句。
关键工程细节：
- 表达式插槽： 花括号 `{}` 允许嵌入任何 JavaScript 表达式，从而实现动态 props、条件渲染和数组映射。
- 片段语法： `<>...</>` 或 `<React.Fragment>` 避免了不必要的 DOM 包装器，减少了节点数量。
- 展开属性： `{...props}` 将对象合并到 props 中，实现了灵活的组件 API。
- 子元素作为 Props： JSX 将子元素视为 `children` prop，从而实现了插槽和渲染 props 等组合模式。
值得关注的 GitHub 仓库：
- [facebook/jsx](https://github.com/facebook/jsx)（1996 星标）：官方规范仓库，包含形式语法和未来提案的讨论。
- [babel/babel](https://github.com/babel/babel)（43k+ 星标）：主要的 JSX 转译器；近期更新聚焦于优化新转换。
- [swc-project/swc](https://github.com/swc-project/swc)（31k+ 星标）：基于 Rust 的 Babel 替代方案，提供 20 倍更快的 JSX 转译。
- [microsoft/TypeScript](https://github.com/microsoft/TypeScript)（100k+ 星标）：通过 `tsx` 文件和 `JSX.IntrinsicElements` 接口支持 JSX，实现类型安全的 HTML 属性。
基准数据：JSX 转译性能
| 工具 | 1000 个文件耗时 (ms) | 打包体积增加 | 生态系统成熟度 |
|---|---|---|---|
| Babel (v7) | 850 | ~2.5% | 非常高 |
| SWC | 42 | ~2.3% | 高 |
| esbuild | 38 | ~2.4% | 中等 |
| TypeScript Compiler | 1200 | ~2.6% | 非常高 |
*数据要点：SWC 和 esbuild 的转译速度比 Babel 快 20-30 倍，非常适合大型代码库。然而，Babel 的插件生态系统在自定义转换方面仍然最为成熟。*
关键参与者与案例研究
Meta（Facebook）： JSX 的原创者，于 2013 年随 React 一同发布。Meta 维护着 JSX 规范并推动其演进，包括 React 17 中的新 JSX 转换。Meta 的内部代码库几乎在所有 UI 中使用 JSX，从 Web（React）到移动端（React Native）。
Vercel（Next.js）： 作为最流行 React 框架背后的公司，Vercel 大力投资于基于 JSX 的模式。Next.js 13+ 引入了 React Server Components，这些组件使用 JSX 但在服务器端渲染，将 HTML 流式传输到客户端。这扩展了 JSX 在客户端渲染之外的应用范围。
Expo（React Native）： Expo 简化了 React Native 开发，并完全依赖 JSX 构建移动 UI。其 Snack 在线编辑器支持实时 JSX 编辑，展示了 JSX 如何实现跨平台代码复用。
Microsoft（TypeScript）： TypeScript 的 JSX 支持对企业级采用至关重要。`JSX` 命名空间允许开发者定义自定义元素类型并在编译时验证 props。例如，`JSX.IntrinsicElements['div']` 为所有 HTML 属性提供自动补全。
对比：JSX 与替代方案
| 特性 | JSX (React) | Vue 模板 | Svelte 模板 | Lit (Web Components) |
|---|---|---|---|---|
| 语法 | XML-in-JS | HTML-in-JS | HTML-in-JS | 模板字面量 |
| 运行时开销 | 无（编译时） | 无（编译时） | 无（编译时） | 极小（lit-html） |
| TypeScript 支持 | 一等公民 (tsx) | 良好（通过 Vetur） | 良好（通过 Svelte TS） | 良好（通过 lit-analyzer） |
| 学习曲线 | 中等（需掌握 JS） | 低（类 HTML） | 低（类 HTML） | 中等（Web Components） |
| 生态系统规模 | 最大 | 大 | 增长中 | 小众 |
*数据要点：JSX 的主要优势在于与 JavaScript 的紧密集成，无需模板指令即可实现复杂逻辑。然而，这对于习惯纯 HTML 的设计师来说，学习曲线更为陡峭。*
行业影响与市场动态
JSX 的影响力远超 React 本身。它影响了其他框架的设计：Vue 的 JSX 支持（通过 `@vue/babel-plugin-jsx`）、SolidJS 基于 JSX 的响应式系统，甚至非 UI 领域特定语言（如用于 PDF 生成的 React-PDF 中的 JSX）。