React 中的 JSX 详解 📚

JSX 是 React 开发中用于描述用户界面的语法，它结合了 HTML 与 JavaScript，让组件结构更直观。以下是关键知识点：

1. JSX 基本概念

• 本质：JSX 实际是 Babel 转译后的 JavaScript 对象，例如：

  <div>Hello</div> → React.createElement('div', null, 'Hello')
  

• 优势：
  • 更接近 HTML 的书写方式 ✅
  • 支持嵌套表达式 📌
  • 与 React 组件无缝集成

2. 常见用法

• 渲染元素：

  const element = <h1>欢迎学习 React</h1>;
  

• 条件渲染：

  {isLoggedIn ? <span>已登录</span> : <span>请登录</span>}
  

• 循环渲染：

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

3. 注意事项

• 严格模式：使用 React.Fragment 包裹多个元素 📌
• 类名写法：避免使用 class，改用 className 👀
• 自闭合标签：<img src="..." alt="..." /> 需要闭合

4. 深入学习

想了解更多关于 JSX 的高级用法，可以访问 JSX 文档 进行扩展阅读。