JSX（JavaScript XML） 是一种用于构建用户界面的 JavaScript 语法扩展，由 React 团队 率先引入。它允许开发者在 JavaScript 代码中直接嵌入类似 HTML 的标记，从而更直观地描述 UI 结构和组件。
核心特点：
类 HTML 语法：
在 JavaScript 中直接书写类似 HTML 的标签（如
、），用于定义 UI 组件。
示例：
jsx
Copy Code
const element =
Hello, JSX!
;
JavaScript 表达式嵌入：
通过 { } 包裹动态内容（变量、函数调用等）：
jsx
Copy Code
const name = "Alice";
const element =
Welcome, {name}!
;
组件化结构：
将 UI 拆分为独立组件（自定义标签）：
jsx
Copy Code
function Header() {
return
My App ;
}
// 使用组件
const app = ;
属性传递：
类似 HTML 属性，但使用驼峰命名（如 className、onClick）：
jsx
Copy Code
Submit
JSX 的本质：
编译后转为 JavaScript：
JSX 无法被浏览器直接执行，需通过工具（如 Babel）编译成 React.createElement() 函数：
jsx
Copy Code
// JSX
Hello
// 编译后
React.createElement("div", { id: "root" }, "Hello");
创建虚拟 DOM 对象：
React.createElement() 返回一个轻量的 虚拟 DOM 对象，描述页面结构，供 React 高效渲染和更新。
为什么使用 JSX？
直观性：
UI 结构可视化，降低代码理解成本。
高效性：
结合 JavaScript 逻辑能力，避免繁琐的字符串拼接。
类型安全：
与 TypeScript 结合时提供类型检查（如 .tsx 文件）。
开发者体验：
主流前端框架（React、SolidJS 等）广泛支持，生态完善。
常见误解：
❌ "JSX 是 HTML 模板"：
本质是 JavaScript 的语法糖，最终转化为函数调用。
❌ "JSX 只能用于 React"：
其他框架（如 Vue 的 JSX 支持、SolidJS）也可使用 JSX。
示例文件（App.jsx）：
jsx
Copy Code
import React from 'react';
// 自定义组件
function Welcome(props) {
return
Hello, {props.user}
;
}
// 主组件
function App() {
const userName = "Jane";
return (
<button onClick={() => alert("Clicked!")}>Click Me
);
}
export default App;
总结：
JSX 是 现代前端框架（尤其是 React）中描述 UI 的核心语法。它通过混合 HTML 的直观性与 JavaScript 的动态能力，解决了 UI 与逻辑分离的难题，显著提升了开发效率和代码可维护性。