JSX 是 JavaScript 的语法扩展，不是 HTML，而是一种用于声明式描述 UI 结构的简洁语法；它在编译时被转换为 React.createElement() 调用，最终生成 React 元素对象，驱动虚拟 DOM 更新。
jsx 是 javascript 的语法扩展，不是 html，而是一种用于声明式描述 ui 结构的简洁语法；它在编译时被转换为 `react.createelement()` 调用，最终生成 react 元素对象，驱动虚拟 dom 更新。
JSX（JavaScript XML）本质上不是模板语言，也不是 HTML 的变体，而是 JavaScript 的一种语法糖（syntactic sugar）。它的设计目标非常明确：让开发者能以接近 HTML 的直观方式编写组件结构，同时保持底层逻辑完全运行在 JavaScript 之上。
例如，这段看似 HTML 的代码：
const element = <h1 classname="greeting">Hello, JSX!</h1>;
在经过 Babel 等构建工具处理后，会被自动转译为标准 JavaScript：
const element = React.createElement(
'h1',
{ className: 'greeting' },
'Hello, JSX!'
);
React.createElement() 返回的是一个轻量级的纯 JS 对象（即 React 元素），形如：
{
type: 'h1',
props: {
className: 'greeting',
children: 'Hello, JSX!'
},
key: null,
ref: null
}
这个对象是 React 渲染流程的输入基础——它不直接操作 DOM，而是作为“蓝图”交由 React 协调器（Reconciler）比对、更新虚拟 DOM，并最终高效地同步到真实 DOM。
⚠️ 关键区别：JSX vs HTML
- HTML 是标记语言，运行在浏览器中；JSX 是 JavaScript 语法，必须经编译才能执行。
- JSX 中的 className 对应 HTML 的 class（因 class 是 JS 保留字）；htmlFor 替代 for；事件绑定使用 onClick 而非 onclick（遵循驼峰命名）；
- JSX 支持嵌入 JavaScript 表达式：{count + 1}、{user &&
}，这是原生 HTML 完全无法做到的； - JSX 必须有且仅有一个根元素（或使用 > 片段），而 HTML 文档可包含多个并列标签。
✅ 为什么推荐使用 JSX？
- 提升可读性与开发效率：UI 结构与逻辑同文件共存，组件内聚性强；
- 编译时检查：Babel 和 TypeScript 可提前捕获语法错误（如未闭合标签、非法属性）；
- 安全默认：JSX 自动转义插值内容（如 {userInput}），有效防范 XSS；
- 生态支持完善：主流工具链（Vite、Create React App、Next.js）开箱即用。
简言之，JSX 不是“加了 JS 的 HTML”，而是“用类 HTML 语法写的 JavaScript 函数调用”。理解这一点，是掌握 React 组件本质的重要一步。
