1.JSX 是什么？

JSX（JavaScript XML）是 JavaScript 的语法扩展，用于在 React 中描述 UI 结构。它结合了 JavaScript 的表达式和 HTML 的标签语法。

优点：

• 直观：类似于 HTML，易于理解和书写。
• 强大：可以直接嵌入 JavaScript 表达式。
• 高效：与 React 深度集成，优化了渲染性能。

2.基本语法

2.1 JSX 表达式的使用

JSX 可以嵌入 JavaScript 表达式，用 {} 包裹。

const name = "前端开发者";
const element = 
你好, {name}!
; // 使用变量

ReactDOM.render(element, document.getElementById('root'));

2.2 JSX 中的标签

JSX 中的标签可以是 HTML 标签，也可以是自定义组件。

function Welcome() {
  return 
欢迎来到 JSX 世界！
;
}

const element = ; // 自定义组件
ReactDOM.render(element, document.getElementById('root'));

2.3 JSX 中的属性

JSX 中的属性可以使用字符串或表达式。

const url = "https://www.example.com";
const element = 点击这里; // 使用表达式

ReactDOM.render(element, document.getElementById('root'));

2.4 JSX 中的样式

JSX 中的样式使用对象形式，属性名使用驼峰命名。

const style = {
  color: 'red',
  fontSize: '20px', // 驼峰命名
};

const element = 
红色文字，20px 大小
;

ReactDOM.render(element, document.getElementById('root'));

2.5 JSX 中的注释

JSX 中的注释需要用 {/* */} 包裹。

const element = (
  

    {/* 这是一个注释 */}
    
你好，JSX！
  
);

ReactDOM.render(element, document.getElementById('root'));

3.JSX 高级用法

3.1 条件渲染

JSX 中可以使用三元运算符或 && 进行条件渲染。

const isLoggedIn = true;
const element = (
  

    {isLoggedIn ? 
欢迎回来！
 : 
请登录
} {/* 三元运算符 */}
    {isLoggedIn && 退出} {/* 逻辑与 */}
  
);

ReactDOM.render(element, document.getElementById('root'));

3.2 列表渲染

使用 map 函数渲染列表，每个元素需要一个唯一的 key。

const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) => (
  
{number}
 // 使用 key
));

const element = 
{listItems}
;

ReactDOM.render(element, document.getElementById('root'));

3.3 嵌套 JSX

JSX 可以嵌套其他 JSX。

const element = (
  

    
标题
    
这是一个段落。
    

      
列表项 1
      
列表项 2
    
  
);

ReactDOM.render(element, document.getElementById('root'));

3.4 事件绑定

JSX 中的事件绑定使用 on 开头的属性，如 onClick。

function handleClick() {
  alert('按钮被点击了！');
}

const element = 点击我; // 事件绑定

ReactDOM.render(element, document.getElementById('root'));

3.5 片段（Fragment）

使用 或 <> 包裹多个元素，避免额外的 DOM 节点。

const element = (
  
    
标题
    
这是一个段落。
  
);

// 或者使用简写
const element = (
  <>
    
标题
    
这是一个段落。
  
);

ReactDOM.render(element, document.getElementById('root'));

4.代码示例合集

以下是 JSX 的完整示例，结合了上述特性：

import React from 'react';
import ReactDOM from 'react-dom';

// 数据
const user = {
  name: '前端开发者',
  age: 25,
  hobbies: ['编程', '听音乐', '跑步'],
};

// 事件处理函数
function handleClick() {
  alert('你好，' + user.name + '！');
}

// JSX 结构
const element = (
  

    
欢迎来到 JSX 世界！
    
用户名: {user.name}
    
年龄: {user.age}
    
兴趣爱好:
    

      {user.hobbies.map((hobby, index) => (
        
{hobby}
 // 列表渲染
      ))}
    
    
      点击我
    
    {/* 条件渲染 */}
    {user.age >= 18 && 
你是一个成年人。
}
    {/* 片段 */}
    <>
      
这是一个片段示例。
    
  
);

// 渲染到 DOM
ReactDOM.render(element, document.getElementById('root'));

5.JSX 与 HTML 的区别

1. 标签属性名：JSX 使用驼峰命名，如 className（HTML：class）。
2. 自闭合标签：JSX 必须正确闭合，如 。
3. 嵌入表达式：JSX 使用 {} 包裹 JavaScript 表达式。
4. 注释语法：JSX 使用 {/* */}。

6.总结