React入门-JSX

1. JSX到底是什么

React中，使用JSX定义组件结构，JSX看起来和HTML并没有什么区别，但是React做了很多预处理，使得JSX方便易用。本质上来说 ，JSX是React.createElement方法的语法糖。在编译阶段会被Babel等编译工具转换为一段React.createElement方法生成的虚拟DOM对象。 jsx:

const element = <h1 className="title">Hello, React!</h1>;

虚拟DOM:

const element = React.createElement(
  'h1',                // 标签名/组件
  { className: 'title' },  // 属性（props）
  'Hello, React!'      // 子元素
);

2. JSX的作用

JSX使得React中的DOM编写方式更加灵活易用。

• JSX直接与UI关联，可以清晰看到html结构，所见即所得；
• 在JSX中允许嵌入JS表达式，实现UI与JS的紧密结合；
• JSX考虑了安全需求，嵌入的内容会被转为纯文本，不会被执行，防止XSS攻击。若需显示 HTML（谨慎使用）：需通过 dangerouslySetInnerHTML 属性，明确告知 React 这是可信内容。
• JSX支持组件化，在JSX中，支持直接插入组件，实现UI的模块化拆分。

3.如何使用JSX

3.1 JSX与HTML的差异

• 标签必须闭合：所有标签（包括自闭合标签）必须显式闭合，例如 <img /> 而非 <img>，<input /> 而非 <input>。
• 属性名驼峰：HTML 中的属性名在 JSX 中需改为驼峰式命名，比如className， onClick， onChange。
• 内联样式写法不同：内联样式需通过对象定义，属性名用驼峰式，值为字符串（数值单位可省略），例如： <div style={{ color: 'red', fontSize: '16px', marginTop: 20 }}></div>。

3.2 {} 表达式嵌入规则

• 嵌入表达式可放入变量、函数调用、三元运算等。
• 不能放语句（如 if、for）。
• 注释写法：需放在 {} 中，格式为 {/* 注释内容 */}

3.3 组件要求

• 多个同级元素必须被一个父容器包裹，这点与Vue的template要求一致。可以使用<>，不会额外生成DOM节点。
• 自定义组件首字母必须大写。
• 组件使用props传递属性。

<UserCard name="Alice" age={25} isActive={true} />

• 条件渲染：常用三元运算符或逻辑与（&&），避免使用 if-else（可将逻辑提取到函数中）。

// 三元运算
{isLoggedIn ? <LogoutButton /> : <LoginButton />}

// 逻辑与（条件为真时渲染后面的内容）
{hasUnreadMessages && <span>新消息</span>}

• 列表渲染：需为每个项添加唯一 key 属性，且 key 需在兄弟节点中唯一。提高组件更新性能。

const items = [1, 2, 3];
// 正确（带 key）
{items.map(item => (
  <li key={item}>{item}</li>
))}

// 错误（无 key，会导致性能问题或渲染异常）
{items.map(item => (
  <li>{item}</li>
))}

总结：JSX 是 React 为开发者提供的 "UI 描述语言"，让开发人员可以更专注地开发html结构和js逻辑，同时兼顾了安全性考虑和性能优化。