JSX

在 React 中，JSX 本质是 React.createElement() 函数的语法糖。它提供了一种更简洁、更直观的方式来描述 UI 结构，最终会被编译（通常是通过 Babel ）成纯 JavaScript 代码。

一、 JSX 是什么

• 类 XML 的 JavaScript 语法扩展
• 允许在 JS 中编写类似 HTML 的标记
• 非标准语法，需要编译转译

二、 编译

JSX

const element = <div className="greeting">你好，Tom!</div>;

编译后

const element = React.createElement(
  'div',
  { class: 'greeting' },
  '你好，Tom！',
);

三、底层实现

React.createElement() 接收三个参数：

• 组件/标签名（字符串或函数组件）
• 属性对象（props）
• 子元素（可多个）

返回 React Element 对象（普通 JS 对象，描述 UI 结构）

转译后大概长这样

const element = {
  type: 'div',
  props: {
    className: 'greeting',
    children: '你好，TOM！',
  },
};

特性	说明
不是模版语言	完整地 JavaScript 表达式能力（可嵌入变量、表达式、函数调用）
必须引入 React	即使使用 JSX 也需要导入 React
组件即函数	自定义组件的本质就是返回 JSX 的函数/类
编译时转换	开发环境需配置 Babel 插件（如 @babel/preset-react）

四、JSX 的限制

• 必须有唯一的根元素（可用 <></> 或 <div></div> 包裹）
• 标签名不能是数字开头
• 需闭合所有标签（包括自闭合的标签）

五、为什么需要 JSX

• 声明式编程：直观描述 UI 应该是什么样
• 类型安全：编译时检测语法错误
• 开发效率：使用 JSX 要比使用 React.createElement() 更高效
• JS 全能力：可直接在标记中使用任意 JS 表达式
• 可读性强：比纯 JS 函数更直观
• 工具支持好：编辑器高亮、自动补全