JSX 和 HTML 有什么区别？

JSX 是一种 JavaScript 的语法扩展，用于创建 React 元素。与传统的 HTML 不同，JSX 具有一些独特的语法和特性。下面将对 JSX 和 HTML 进行详细的比较。

1. 语法

1.1 标签名称

JSX 中的标签名称可以是任何合法的标识符，包括大写字母开头的组件名称。

// JSX 中的标签名称可以是任何合法的标识符
const element = <div>Hello World!</div>;

// 甚至可以是大写字母开头的组件名称
const element = <MyComponent />;

HTML 中的标签名称只能是预定义的一些标签名称。

<!-- HTML 中的标签名称只能是预定义的一些标签名称 -->
<div>Hello World!</div>

1.2 属性名称

JSX 中的属性名称采用驼峰命名法，例如 className、onClick、onChange 等。

// JSX 中的属性名称采用驼峰命名法
const element = <div className="box" onClick={handleClick}>Hello World!</div>;

HTML 中的属性名称采用连字符连接的命名法，例如 class、onclick、onchange 等。

<!-- HTML 中的属性名称采用连字符连接的命名法 -->
<div class="box" onclick="handleClick()">Hello World!</div>

1.3 属性值

JSX 中的属性值可以是字符串、表达式和对象。

// JSX 中的属性值可以是字符串、表达式和对象
const name = 'World';
const style = { color: 'red' };
const element = <div className="box" style={style}>Hello {name}!</div>;

HTML 中的属性值只能是字符串。

<!-- HTML 中的属性值只能是字符串 -->
<div class="box" style="color: red;">Hello World!</div>

2. 表达式

JSX 中可以用花括号将 JavaScript 表达式嵌入到模板中。

// JSX 中可以用花括号将 JavaScript 表达式嵌入到模板中
const element = <div>{1 + 2}</div>;

HTML 中不支持将 JavaScript 表达式嵌入到模板中。

<!-- HTML 中不支持将 JavaScript 表达式嵌入到模板中 -->
<div>3</div>

3. 标签嵌套

JSX 中的标签可以任意嵌套，但必须保证标签闭合。

// JSX 中的标签可以任意嵌套，但必须保证标签闭合
const element = (
  <div>
    <h1>Hello World!</h1>
    <p>This is a paragraph.</p>
  </div>
);

HTML 中标签的嵌套必须遵守一定的层级结构。

<!-- HTML 中标签的嵌套必须遵守一定的层级结构 -->
<div>
  <h1>Hello World!</h1>
  <p>This is a paragraph.</p>
</div>

4. 注释

JSX 中的注释用花括号包裹起来，与表达式一样。

// JSX 中的注释用花括号包裹起来，与表达式一样
const element = (
  <div>
    {/* This is a comment */}
    <h1>Hello World!</h1>
  </div>
);

HTML 中的注释用特殊的语法结构表示。

<!-- HTML 中的注释用特殊的语法结构表示 -->
<div>
  <!-- This is a comment -->
  <h1>Hello World!</h1>
</div>

5. 总结

上述内容总结如下：

| | JSX | HTML | | ----- | ------------------------ | ------------------------ | | 标签名称 | 可以是任何合法的标识符 | 只能是预定义的一些标签名称 | | 属性名称 | 采用驼峰命名法 | 采用连字符连接的命名法 | | 属性值 | 可以是字符串、表达式和对象 | 只能是字符串 | | 表达式 | 可以嵌入到模板中 | 不支持嵌入到模板中 | | 标签嵌套 | 可以任意嵌套，必须闭合 | 必须遵守一定的层级结构 | | 注释 | 用花括号包裹起来 | 用特殊的语法结构表示 |