React 开发（四）：深入 JSX - 语法、特性与使用场景

最新推荐文章于 2025-02-08 11:42:24 发布

原创最新推荐文章于 2025-02-08 11:42:24 发布 · 1.6k 阅读

10 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#react.js #javascript #ecmascript #开发语言 #程序人生

react 专栏收录该内容

59 篇文章

订阅专栏

React 开发（四）：深入 JSX - 语法、特性与使用场景

在这里插入图片描述

在 React 开发中，JSX（JavaScript XML）是一种重要的语法扩展，它让我们可以用类似 HTML 的语法书写组件的结构，并直接将 JavaScript 表达式嵌入到视图模板中。通过本文，您将深入了解 JSX 的基础语法、特性、转换原理和常见的使用场景。

1. 什么是 JSX

JSX 是一种语法糖，可以让开发者像写 HTML 一样构建 React 组件。它最终会被转译成 React.createElement 调用，这也是 JSX 和 JavaScript 兼容的原因。

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

// 转译后的代码
const element = React.createElement("h1", null, "Hello, world!");

JSX 并不是必须的，但它让 React 代码的阅读性和编写体验更佳。接下来我们将深入探讨其语法和特性。

2. JSX 语法基础

标签语法

JSX 标签语法和 HTML 很相似，但是使用大写字母开头的标签表示自定义组件。普通的 HTML 标签（如 <div>、<span>）也可以直接使用。

// 使用 HTML 标签
const element = <div>Hello, JSX!</div>;

// 使用自定义组件
function Welcome() {
  return <h1>Welcome to React!</h1>;
}
const element = <Welcome />;

嵌套元素和分组

多层嵌套时，JSX 需要一个根元素来包裹所有内容。React 16+ 中可以使用空标签 <>...</> 实现 Fragment 功能，以避免多余的 DOM 层级。

const element = (
  <>
    <h1>Title</h1>
    <p>This is a paragraph.</p>
  </>
);

属性传递

可以在 JSX 标签中传递属性，支持 JavaScript 表达式。属性值如果是字符串，可以省略 ""。

const element = <img src="logo.png" alt="Logo" />;
const greeting = <h1>Hello, {user.name}!</h1>;

事件处理

JSX 支持直接绑定事件，通过 onClick、onChange 等属性传递事件处理函数。

function handleClick() {
  alert("Button clicked!");
}
const button = <button onClick={handleClick}>Click me</button>;

3. JSX 特性解析

表达式

JSX 支持嵌入 JavaScript 表达式，通过 {} 包裹来实现。这对于动态内容显示非常有用。

const user = { name: "Alice" };
const element = <h1>Hello, {user.name}!</h1>;

条件渲染

可以在 JSX 中利用 JavaScript 表达式实现条件渲染。最常见的方式是使用三元运算符或逻辑与 &&。

const isLoggedIn = true;
const element = isLoggedIn ? <h1>Welcome back!</h1> : <h1>Please sign in.</h1>;

// 使用 && 运算符
const element = isLoggedIn && <h1>Welcome back!</h1>;

样式和类名

在 JSX 中，className 用于代替 HTML 中的 class 属性。内联样式则使用对象的形式，属性名遵循 camelCase 规则。

const element = <div className="container">Content</div>;

const style = { color: "blue", fontSize: "20px" };
const element = <h1 style={style}>Styled Text</h1>;

数组渲染

可以通过 map() 方法遍历数组生成 JSX 元素列表。在渲染列表时，为每个元素添加 key 属性，以提高渲染效率。

const items = ["Apple", "Banana", "Cherry"];
const list = (
  <ul>
    {items.map((item, index) => (
      <li key={index}>{item}</li>
    ))}
  </ul>
);

4. JSX 转译与工作原理

JSX 是一种语法糖，并不能直接被浏览器理解。在构建过程中，Babel 将 JSX 转译成 React.createElement 调用，创建 JavaScript 对象（虚拟 DOM）。

例如：

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

// 转译后
const element = React.createElement("h1", null, "Hello, world!");

这种转译方式使 JSX 具备更好的性能，并能与 JavaScript 紧密结合。

5. JSX 使用场景与最佳实践

组件封装

JSX 使得封装组件更加直观易懂，能清晰地表示组件结构与逻辑分离。

function WelcomeMessage({ name }) {
  return <h1>Welcome, {name}!</h1>;
}

模板复用

通过条件渲染和数组渲染，可以灵活地使用 JSX 实现动态模板，比如导航栏、卡片布局等。

const user = { name: "Alice", isAdmin: true };
const message = (
  <div>
    <h1>Hello, {user.name}!</h1>
    {user.isAdmin && <p>You have admin privileges.</p>}
  </div>
);