# JSX 与 HTML 的区别

URL: https://caijiao.org/react/chapter3/jsx-vs-html
Source: docs/react/chapter3/jsx-vs-html.md
Description: JSX 与 HTML 看似相似，但在语法和功能上有一些关键的不同。理解这些差异有助于在 React 中更高效地使用 JSX。

JSX 是 JavaScript 的一种语法扩展，虽然它与 HTML 看起来很像，但在一些细节上存在着显著的区别。了解这些差异对于编写高效的 React 代码至关重要。

## 1. `class` 与 `className`

在 HTML 中，我们使用 `class` 来为元素指定样式类：
```html
<div class="container">Hello</div>
````

但在 JSX 中，由于 `class` 是 JavaScript 的保留字，因此我们使用 `className` 来指定元素的类：

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

## 2. 自闭合标签

在 HTML 中，某些标签如 `<img>` 和 `<input>` 可以省略结束标签，但在 JSX 中，这些标签必须写成自闭合形式：

```jsx
<img src="image.jpg" alt="Example" />
<input type="text" />
```

这意味着在 JSX 中，标签必须有明确的结束标志。

## 3. 属性的命名

在 HTML 中，某些属性是小写的，如 `for` 和 `maxlength`。但是在 JSX 中，它们被替换成了 camelCase（驼峰式命名）格式。例如：

* HTML 中使用 `for` 来为标签指定关联的 ID：

  ```html
  <label for="name">Name</label>
  ```

  在 JSX 中应写作：

  ```jsx
  <label htmlFor="name">Name</label>
  ```
* HTML 中使用 `maxlength`，而在 JSX 中使用 `maxLength`：

  ```html
  <input type="text" maxlength="10" />
  ```

  在 JSX 中应该写成：

  ```jsx
  <input type="text" maxLength="10" />
  ```

## 4. 事件处理

在 HTML 中，事件使用 `on` 开头的小写属性，例如 `onclick`、`onmouseover` 等：

```html
<button onclick="alert('Clicked')">Click me</button>
```

但是在 JSX 中，事件处理属性遵循 camelCase 规则，因此我们写成：

```jsx
<button onClick={() => alert('Clicked')}>Click me</button>
```

此外，在 JSX 中，事件处理函数必须是 JavaScript 表达式，不能是字符串。

## 5. 动态内容插入

在 HTML 中，我们通常通过模板语言或脚本动态插入内容。而在 JSX 中，我们可以通过 `{}` 语法将 JavaScript 表达式嵌入到标签属性或文本中：

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

这样，JSX 就能灵活地将 JavaScript 与 HTML 结构结合起来。

## 6. 属性值为布尔值

在 HTML 中，布尔属性如 `checked`、`disabled` 是通过仅存在或不存在来表示的：

```html
<input type="checkbox" checked />
```

但在 JSX 中，布尔属性需要显式地设置为 `true` 或 `false`：

```jsx
<input type="checkbox" checked={true} />
```

如果不想设置为 `true`，则可以省略该属性。

## 7. 必须有一个根元素

在 JSX 中，每个组件或元素必须有且只有一个根元素。在 HTML 中，这个规则并不强制。比如，以下 JSX 代码是无效的：

```jsx
// 无效的 JSX
<div>First Element</div>
<div>Second Element</div>
```

而在 HTML 中，可以直接写多个根元素。为解决此问题，我们通常将多个元素包裹在一个父元素中，例如：

```jsx
// 正确的 JSX
<div>
  <div>First Element</div>
  <div>Second Element</div>
</div>
```

## 总结

虽然 JSX 和 HTML 看起来很相似，但它们之间的差异在 React 开发中十分重要。理解这些区别能够帮助开发者编写符合 React 规范的代码，提高代码的可维护性和效率。