深入理解 JSX：React 的核心语法

aiguangyuan2025-06-05 10:04

1. 什么是 JSX？

JSX（JavaScript And XML）是 React 中最核心的概念之一，也是区别于 Vue 的一个重要特征（尽管 Vue 现在也支持 JSX 语法）。JSX 是一种在 JavaScript 中编写 HTML 代码片段的语法协议，它会在编译阶段被转换为标准的 JavaScript 代码，从而在运行时工作。

React 应用中，JSX 会通过编译工具（如 Babel）转换为 React 提供的运行时方法。转换过程可以表示为：jsx ＝> _jsx ＝> jsxProd ＝> createElement。

2. JSX 的基本示例

以下是一个简单的 JSX 示例：

javascript 复制代码

import React from 'react';
import ReactDOM from 'react-dom';

const element = <h1>Hello, world!</h1>;

ReactDOM.render(element, document.getElementById('root'));

3. JSX 的主要特点

3.1. 标签语法

类似 HTML 的语法，但可以直接在 JavaScript 代码中使用。

必须闭合所有标签，包括自闭合标签（如 <br />）。

3.2. 嵌入表达式

JSX 允许使用大括号 {} 嵌入 JavaScript 表达式：

javascript 复制代码

const name = 'Josh';
const element = <h1>Hello, {name}</h1>;

3.3. JSX 是一个表达式

JSX 编译后会变成普通的 JavaScript 对象，因此可以：

在条件语句和循环中使用；
赋值给变量；
作为函数参数或返回值；

javascript 复制代码

function greet(user) {
  if (user) {
    return <h1>Hello, {user}</h1>;
  }
  return <h1>Hello, Stranger.</h1>;
}

4. JSX 的转换原理

JSX 不能直接在浏览器中运行，需要通过编译工具（如 Babel）转换为纯 JavaScript 代码。以下是转换过程：

4.1. 原始 JSX 代码

javascript 复制代码

const element = <h1>Hello, world!</h1>;

4.2. 转换后的 JavaScript 代码

javascript 复制代码

import { jsx as __jsx } from "react/jsx-runtime";
var element = /*#__PURE__*/__jsx("h1", {
  children: "Hello, world!"
});

4.3. React 运行时等效代码

javascript 复制代码

var element = React.createElement('h1', null, 'Hello, world!');

5. 总结

JSX 是 React 开发中的核心语法，它结合了 JavaScript 的强大功能和 HTML 的直观表达方式。通过编译转换，JSX 最终会变成 React 能够理解的 JavaScript 代码。理解 JSX 的特点和转换原理，有助于开发者更好地编写和维护 React 应用，同时也能够更深入地理解 React 的工作机制。