1. JSX到底是什么
React中，使用JSX定义组件结构，JSX看起来和HTML并没有什么区别，但是React做了很多预处理，使得JSX方便易用。本质上来说 ，JSX是React.createElement方法的语法糖。在编译阶段会被Babel等编译工具转换为一段React.createElement方法生成的虚拟DOM对象。 jsx:
ini
const element = <h1 className="title">Hello, React!</h1>;虚拟DOM:
arduino
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传递属性。
ini
<UserCard name="Alice" age={25} isActive={true} />- 条件渲染：常用三元运算符或逻辑与（
&&），避免使用if-else（可将逻辑提取到函数中）。
javascript
// 三元运算
{isLoggedIn ? <LogoutButton /> : <LoginButton />}
// 逻辑与（条件为真时渲染后面的内容）
{hasUnreadMessages && <span>新消息</span>}- 列表渲染：需为每个项添加唯一
key属性，且key需在兄弟节点中唯一。提高组件更新性能。
javascript
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逻辑，同时兼顾了安全性考虑和性能优化。