# 什么是 JSX？

URL: https://caijiao.org/react/chapter3/what-is-jsx
Source: docs/react/chapter3/what-is-jsx.md
Description: JSX 是 React 中用于描述 UI 结构的一种语法扩展，它允许我们在 JavaScript 代码中直接书写类似 HTML 的标签，从而使得组件结构更加清晰、直观。

JSX（JavaScript XML）是 JavaScript 的一种语法扩展，通常用于在 React 中描述 UI 结构。它看起来像 HTML，但其实它是 JavaScript 的一种特殊语法，React 会在幕后将其转换成 JavaScript 代码。通过 JSX，我们可以更加简洁和直观地构建 UI 组件。

## JSX 的特点

1. **类似 HTML 的语法**  
   JSX 允许我们在 JavaScript 代码中使用类似 HTML 的标签。例如：

  ```jsx
    const element = <h1>Hello, world!</h1>;
  ````
  
2. **表达式嵌入**
   在 JSX 中，我们可以嵌入 JavaScript 表达式，使用 `{}` 包裹 JavaScript 代码：

  ```jsx
  const name = 'React';
  const element = <h1>Hello, {name}!</h1>;
  ```

3. **React 元素的表达**
   每一个 JSX 元素都会被 React 转换成一个 React 元素对象，这个对象包含了元素的类型、属性和子元素，React 根据这些信息来构建页面。

4. **组件的返回值**
   React 组件通常会返回 JSX 代码，表示组件的结构。例如：

   ```jsx
   function Greeting() {
     return <h1>Hello, world!</h1>;
   }
   ```

5. **属性与事件处理**
   JSX 支持定义元素的属性和事件处理程序。例如，以下代码演示了如何为按钮添加点击事件：

   ```jsx
   function Button() {
     const handleClick = () => {
       alert('Button clicked!');
     };

     return <button onClick={handleClick}>Click me</button>;
   }
   ```

## JSX 与 HTML 的不同

1. **类名使用 `className`**
   在 HTML 中，我们使用 `class` 来定义样式类，而在 JSX 中，`class` 是 JavaScript 的保留字，因此我们需要使用 `className` 来定义类：

   ```jsx
   <div className="container">Hello</div>
   ```

2. **自闭合标签**
   在 JSX 中，像 `<img />`、`<input />` 这样的自闭合标签必须使用结束符号（即必须写成 `<img />` 而不是 `<img>`）。

3. **JavaScript 表达式**
   在 JSX 中，所有的属性值和子元素都可以是 JavaScript 表达式，而不是普通的文本。我们使用 `{}` 来包裹这些表达式。

## JSX 的优点

* **更接近 HTML 的写法**：使得开发者能够更加直观地理解组件结构，方便快速编写 UI。
* **与 JavaScript 紧密结合**：我们可以直接在 JSX 中使用 JavaScript 表达式，减少了模板与逻辑的分离，提高了可维护性。
* **可组合性**：通过 JSX，我们能够轻松地组合不同的组件，构建复杂的 UI。

总之，JSX 是 React 提供的一种功能强大的工具，它帮助我们在开发过程中更高效地组织和编写 UI 组件。