JSX 是什么？全面解析与实际应用指南

阿贾克斯的黎明

于 2025-07-18 22:23:12 发布

阅读量479

点赞数 20

CC 4.0 BY-SA版权

分类专栏：前端文章标签：前端

本文链接：https://blog.csdn.net/m0_57836225/article/details/149454237

前端专栏收录该内容

580 篇文章

订阅专栏

一、JSX 基础概念

JSX（JavaScript XML）是一种 JavaScript 的语法扩展，它允许你在 JavaScript 代码中编写类似 XML 的结构。JSX 并不是 JavaScript 的官方标准，而是一种被广泛采用的语法糖，主要用于 React 框架中构建 UI 组件。

1.1 JSX 基本语法

JSX 看起来很像 HTML，但实际上它是 JavaScript 对象。以下是一个简单的 JSX 示例：

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

这个 JSX 元素会被编译成以下 JavaScript 代码：

const element = React.createElement('h1', null, 'Hello, JSX!');

1.2 JSX 中的表达式

在 JSX 中可以嵌入 JavaScript 表达式，只需用花括号 {} 包裹即可：

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

1.3 JSX 属性

JSX 元素可以有属性，类似于 HTML 标签的属性：

const element = <a href="https://example.com">Click me</a>;

需要注意的是，有些属性名在 JSX 中使用驼峰命名法，例如 class 变为 className，for 变为 htmlFor：

const element = <label htmlFor="name">Name:</label>;
const input = <input type="text" id="name" className="form-input" />;

二、JSX 的实际用处

2.1 声明式 UI

JSX 使你能够以声明式的方式定义 UI，这意味着你只需描述 UI 应该呈现的样子，而不必手动管理 DOM 的更新过程。例如：

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

2.2 组件化开发

JSX 是 React 组件的核心，它允许你将 UI 拆分成独立的、可复用的组件：

function Avatar(props) {
  return (
    <img
      className="avatar"
      src={props.user.avatarUrl}
      alt={props.user.name}
    />
  );
}

function UserInfo(props) {
  return (
    <div className="user-info">
      <Avatar user={props.user} />
      <div className="user-name">{props.user.name}</div>
    </div>
  );
}

2.3 条件渲染

在 JSX 中可以使用 JavaScript 逻辑进行条件渲染：

function LoginButton(props) {
  return <button onClick={props.onClick}>Login</button>;
}

function LogoutButton(props) {
  return <button onClick={props.onClick}>Logout</button>;
}

function LoginControl(props) {
  if (props.isLoggedIn) {
    return <LogoutButton onClick={props.onLogout} />;
  }
  return <LoginButton onClick={props.onLogin} />;
}

2.4 列表渲染

使用数组的 map() 方法可以在 JSX 中渲染列表：

const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>
  <li key={number.toString()}>{number}</li>
);

return <ul>{listItems}</ul>;

三、JSX 与 React 的关系

JSX 是 React 的核心组成部分，但 React 并不强制要求使用 JSX。不过，JSX 为 React 提供了以下优势：

直观的 UI 结构：JSX 使代码更易读、更易维护。
类型安全：在 TypeScript 中使用 JSX 可以获得更好的类型检查。
编译时优化：Babel 等工具可以在编译时对 JSX 进行优化。

四、JSX 的编译过程

JSX 代码需要经过编译才能在浏览器中运行。通常使用 Babel 或 TypeScript 进行编译：

// 原始 JSX 代码
const element = <h1 className="greeting">Hello, world!</h1>;

// 编译后的 JavaScript 代码
const element = React.createElement(
  'h1',
  { className: 'greeting' },
  'Hello, world!'
);