JSX 与 HTML 的区别

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

1. class 与 className

在 HTML 中，我们使用 class 来为元素指定样式类：

<div class="container">Hello</div>

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

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

2. 自闭合标签

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

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

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

3. 属性的命名

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

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

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

  在 JSX 中应写作：

  <label htmlFor="name">Name</label>

• HTML 中使用 maxlength，而在 JSX 中使用 maxLength：

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

  在 JSX 中应该写成：

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

4. 事件处理

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

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

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

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

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

5. 动态内容插入

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

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

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

6. 属性值为布尔值

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

<input type="checkbox" checked />

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

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

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

7. 必须有一个根元素

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

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

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

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

总结

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