JSX与HTML差异 - 元素码农

发布时间: 2025-03-22 20:48

↑

# JSX与HTML差异

本文将详细介绍JSX与HTML的主要区别，帮助你更好地理解和使用JSX语法。

## 基本语法差异

### 1. 属性命名

JSX使用驼峰命名法，而HTML使用kebab-case：

```jsx
// HTML
<div class="container">
  <label for="username">Username:</label>
  <input type="text" tabindex="1" />
</div>

// JSX
<div className="container">
  <label htmlFor="username">Username:</label>
  <input type="text" tabIndex={1} />
</div>
```

主要区别：
- `class` → `className`
- `for` → `htmlFor`
- `tabindex` → `tabIndex`
- `readonly` → `readOnly`

### 2. 样式处理

```jsx
// HTML
<div style="background-color: black; color: white; padding: 10px;">
  Content
</div>

// JSX
const style = {
  backgroundColor: 'black',
  color: 'white',
  padding: '10px'
};

<div style={style}>Content</div>
```

### 3. 事件处理

```jsx
// HTML
<button onclick="handleClick()">
  Click me
</button>

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

## 特殊属性处理

### 1. 布尔属性

```jsx
// HTML
<input disabled>
<input disabled="disabled">

// JSX
<input disabled={true} />
<input disabled />
```

### 2. 数据属性

```jsx
// HTML
<div data-test-id="test">
  Test
</div>

// JSX
<div data-testid="test">
  Test
</div>

// 或者使用驼峰命名
const testId = 'test';
<div data-testid={testId}>
  Test
</div>
```

### 3. ARIA属性

```jsx
// HTML
<button aria-label="Close" aria-expanded="false">
  Close
</button>

// JSX
<button aria-label="Close" aria-expanded={false}>
  Close
</button>
```

## 结构差异

### 1. 自闭合标签

```jsx
// HTML - 某些标签可以不闭合
<input type="text">
<br>
<img src="image.jpg">

// JSX - 必须闭合所有标签
<input type="text" />
<br />
<img src="image.jpg" />
```

### 2. 根元素要求

```jsx
// HTML - 可以有多个根元素
<h1>Title</h1>
<p>Paragraph</p>

// JSX - 必须有一个根元素包裹
<div>
  <h1>Title</h1>
  <p>Paragraph</p>
</div>

// 或使用Fragment
<>
  <h1>Title</h1>
  <p>Paragraph</p>
</>
```

### 3. 注释写法

```jsx
// HTML

// JSX
{/* This is a comment */}
```

## 动态内容处理

### 1. 变量插值

```jsx
// HTML - 需要使用模板引擎或JavaScript
<div id="app">
  Hello, <%= username %>
</div>

// JSX
const username = 'John';
<div>
  Hello, {username}
</div>
```

### 2. 条件渲染

```jsx
// HTML - 需要服务端处理或JavaScript
<% if (isLoggedIn) { %>
  <h1>Welcome back!</h1>
<% } else { %>
  <h1>Please log in</h1>
<% } %>

// JSX
<div>
  {isLoggedIn ? (
    <h1>Welcome back!</h1>
  ) : (
    <h1>Please log in</h1>
  )}
</div>
```

### 3. 列表渲染

```jsx
// HTML - 需要服务端循环或JavaScript
<ul>
  <% for (let item of items) { %>
    <li><%= item %></li>
  <% } %>
</ul>

// JSX
<ul>
  {items.map(item => (
    <li key={item.id}>{item.name}</li>
  ))}
</ul>
```

## 安全处理

### 1. XSS防护

```jsx
// HTML - 需要手动转义
<div>
  <%= escapeHtml(userContent) %>
</div>

// JSX - 自动转义
<div>
  {userContent}
</div>
```

### 2. 危险HTML

```jsx
// HTML
<div>
  Raw HTML content
</div>

// JSX - 使用dangerouslySetInnerHTML
<div dangerouslySetInnerHTML={{
  __html: 'Raw HTML content'
}} />
```

## 最佳实践

### 1. 组件化

```jsx
// HTML - 传统复用需要模板或包含
<div class="user-card">
  <img src="avatar.jpg">
  <h2>John Doe</h2>
  <p>Web Developer</p>
</div>

// JSX - 组件化复用
function UserCard({ user }) {
  return (
    <div className="user-card">
      <img src={user.avatar} alt={user.name} />
      <h2>{user.name}</h2>
      <p>{user.title}</p>
    </div>
  );
}

// 使用组件
<UserCard user={{
  avatar: 'avatar.jpg',
  name: 'John Doe',
  title: 'Web Developer'
}} />
```

### 2. 样式模块化

```jsx
// HTML - 全局样式
<style>
.button {
  /* styles */
}
</style>
<button class="button">Click me</button>

// JSX - CSS Modules
import styles from './Button.module.css';

<button className={styles.button}>
  Click me
</button>
```

### 3. 事件处理最佳实践

```jsx
// HTML - 内联事件处理
<button onclick="handleClick(event)">
  Click me
</button>

// JSX - 组件内方法
function Button() {
  const handleClick = (e) => {
    e.preventDefault();
    // 处理点击事件
  };

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

## 总结

本文详细介绍了JSX与HTML的主要区别：

1. 基本语法差异（属性命名、样式处理、事件处理）
2. 特殊属性的处理方式
3. 结构要求的不同
4. 动态内容的处理方式
5. 安全性考虑
6. 最佳实践建议

理解这些差异可以帮助你更好地从传统HTML开发过渡到React开发。记住，JSX虽然看起来像HTML，但它提供了更强大的功能和更好的开发体验。建议在实践中多注意这些差异，逐步适应JSX的开发方式。