React JSX

JSX（JavaScript XML）是看起来像 XML 的 JavaScript 语法扩展，React 中常用它替代常规 JavaScript 来编写 UI 组件，让你能用类 HTML 的方式描述组件结构与行为。

使用 JSX 并非强制要求，但它具备以下核心优势：

• 执行高效：编译为 JavaScript 代码后经过优化，运行速度更快；
• 类型安全：编译阶段即可发现错误（配合 TypeScript 时效果更佳）；
• 编写便捷：UI 结构直观清晰，嵌入 JavaScript 表达式更灵活，编写模板简单快速；
• 本质特性：非字符串/HTML，会被 Babel（Vite 内置）编译为 React.createElement 调用。

我们先看下以下代码：

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

这种看起来可能有些奇怪的标签语法既不是字符串也不是 HTML。

它被称为 JSX， 一种 JavaScript 的语法扩展。 我们推荐在 React 中使用 JSX 来描述用户界面。

JSX 是在 JavaScript 内部实现的。

我们知道元素是构成 React 应用的最小单位，JSX 就是用来声明 React 当中的元素。

与浏览器的 DOM 元素不同，React 当中的元素事实上是普通的对象，React DOM 可以确保 浏览器 DOM 的数据内容与 React 元素保持一致。

要将 React 元素渲染到根 DOM 节点中，我们通过把它们都传递给 ReactDOM.render() 的方法来将其渲染到页面上：

注意:

由于 JSX 就是 JavaScript，一些标识符像 class 和 for 不建议作为 XML 属性名。作为替代，React DOM 使用 className 和 htmlFor 来做对应的属性。

JSX 语法规则

JSX 看起来像 HTML，但有严格规则：

必须闭合标签：

• HTML 可以 <br>，但 JSX 必须 <br />（自闭合）。
• 所有标签都要闭合：<div></div>。

class → className：

因为 class 是 JavaScript 关键字，用 className 代替。

<div className="container">内容</div>

htmlFor（标签内）：

<label for="id"> → <label htmlFor="id">

大写开头组件：

自定义组件必须大写开头（小写会被当成 HTML 标签）。

<Card />  {/* 正确，自定义组件 */}
<card />  {/* 错误，会被当成 <card> HTML 标签 */}

注释：

用 {/* 注释内容 */}。

jsx{/* 这是一个 JSX 注释 */}

根元素：

return 只能有一个根节点。

return (
  <>  {/* 碎片 Fragment，空标签，不渲染 DOM */}
    <h1>标题</h1>
    <p>段落</p>
  </>
);

我们可以打开 src/App.jsx，把 return 改成：

return (
  <>
    <h1 className="title">JSX 语法规则演示</h1>
    <img src="/vite.svg" alt="Vite Logo" />
    <br />
    {/* 自闭合标签和注释 */}
    <p>注意 className 和闭合标签</p>
  </>
);

保存查看效果。

表达式嵌入、条件渲染、列表渲染

JSX 最强大的地方是可以用 {} 嵌入 JavaScript 表达式（只能是表达式，不能是语句如 if/for）。

表达式嵌入

任何有效的 JS 表达式都可以放进 {}：

const name = 'runoob';
const now = new Date().toLocaleString();

return (
  <div>
    <h1>你好，{name}！</h1>
    <p>当前时间：{now}</p>
    <p>计算结果：{2 + 3 * 5}</p>  {/* 17 */}
  </div>
);

条件渲染

用三元运算符或 &&：

const isLoggedIn = true;
const count = 0;

return (
  <div>
    {isLoggedIn ? <h1>欢迎回来，{name}！</h1> : <h1>请登录</h1>}
    
    {count > 0 && <p>你有 {count} 条未读消息</p>}  {/* count 为 0 时不渲染 */}
  </div>
);

避免：不要用 if 语句直接在 JSX 中（可以用在函数体里）。

列表渲染（key 的重要性）

用 map() 渲染数组，必须给每个元素加 key 属性（唯一标识，帮助 React 高效更新 DOM）。

const items = [
  { id: 1, name: '苹果' },
  { id: 2, name: '香蕉' },
  { id: 3, name: '橙子' },
];

return (
  <ul>
    {items.map(item => (
      <li key={item.id}>  {/* key 必须唯一且稳定！ */}
        {item.name}
      </li>
    ))}
  </ul>
);

key 的重要性：

• 没有 key：React 会警告，可能导致渲染错误（尤其是列表动态变化时）。
• 坏习惯：用 index 作为 key（key={index}）——当列表顺序变化时，会导致不必要的重渲染或状态丢失。
• 最佳实践：用数据中的唯一 ID（如数据库 id）。

样式处理

React 有多种样式方式，我们先学两种最基础的。

内联样式（inline style）

用 style 属性，值是对象（驼峰命名）：

return (
  <div
    style={{
      backgroundColor: '#f0f0f0',
      padding: '20px',
      borderRadius: '8px',
      textAlign: 'center',
      fontFamily: 'Arial, sans-serif',
    }}
  >
    <h2 style={{ color: 'blue', marginBottom: '10px' }}>
      内联样式示例
    </h2>
  </div>
);

• 优点：动态样式容易（可以用变量）。
• 缺点：不方便维护复杂样式。

CSS Modules（推荐，作用域隔离）

Vite 默认支持 CSS Modules，避免全局污染。

创建 src/App.css（已存在）或新文件 src/styles/Card.module.css：

/* Card.module.css */
.card {
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  padding: 20px;
  margin: 20px;
}

.title {
  color: #333;
  margin: 0 0 10px 0;
}

.content {
  color: #666;
}

在组件中导入并使用（自动生成作用域类名）：

import styles from './styles/Card.module.css';

return (
  <div className={styles.card}>
    <h3 className={styles.title}>标题</h3>
    <p className={styles.content}>内容</p>
  </div>
);

• 优点：类名自动哈希（如 .card__abc123），不会冲突。

完整实践：把之前的 Card 组件改用 CSS Modules。

创建 src/components/Card.module.css：

.container {
  width: 300px;
  border: 1px solid #ccc;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  background: white;
}

.image {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.title {
  margin: 0 0 10px 0;
  padding: 20px 20px 0;
  color: #333;
}

.content {
  padding: 0 20px 20px;
  color: #666;
}

修改 Card.jsx：

import styles from './Card.module.css';

const Card = ({ title, content, imageUrl }) => {
  return (
    <div className={styles.container}>
      {imageUrl && <img src={imageUrl} alt={title} className={styles.image} />}
      <h3 className={styles.title}>{title}</h3>
      <p className={styles.content}>{content}</p>
    </div>
  );
};

export default Card;

使用 JSX

JSX 看起来类似 HTML ，我们可以看下实例:

我们可以在以上代码中嵌套多个 HTML 标签，需要使用一个 div 元素包裹它，实例中的 p 元素添加了自定义属性 data-myattribute，添加自定义属性需要使用 data- 前缀。

独立文件

你的 React JSX 代码可以放在一个独立文件上，例如我们创建一个 helloworld_react.js 文件，代码如下：

然后在 HTML 文件中引入该 JS 文件：

JavaScript 表达式

我们可以在 JSX 中使用 JavaScript 表达式。表达式写在花括号 {} 中。实例如下：

在 JSX 中不能使用 if else 语句，但可以使用 conditional (三元运算) 表达式来替代。以下实例中如果变量 i 等于 1 浏览器将输出 true, 如果修改 i 的值，则会输出 false.

样式

React 推荐使用内联样式。我们可以使用 camelCase 语法来设置内联样式. React 会在指定元素数字后自动添加 px 。以下实例演示了为 h1 元素添加 myStyle 内联样式：

注释

注释需要写在花括号中，实例如下：

数组

JSX 允许在模板中插入数组，数组会自动展开所有成员：