[!info] related notes

• 所属 MOC: React MOC
• 上位主题: react
• 相关概念: react-list-rendering-and-key, React中的事件处理与状态更新
• 学习路径: react-learning-roadmap, react-interview-high-frequency

JSX

JSX 是 JavaScript 的语法扩展，用来在组件里直接描述 UI 结构。它看起来像 HTML，但本质上仍然是 JavaScript 表达式，最终会被编译成 React 可识别的元素描述。

一句话定义

JSX 不是模板引擎，也不是字符串拼接，而是“用接近标签的写法描述组件树”。

JSX 解决什么问题

• 让 UI 结构和组件逻辑写在同一套语言里
• 让条件渲染、列表渲染、事件绑定都能直接复用 JavaScript 表达能力
• 让组件组合比手写 DOM API 更直观

JSX 在 React 里的真正位置

JSX 更像 React 的“表达层”。

它负责把：

• 数据
• 条件分支
• 列表
• 组件组合

统一表达成一棵组件树描述。

所以 React 里很多讨论其实是分层的：

• JSX 负责“界面怎么描述”
• state / props / context 负责“数据从哪来”
• Hooks 负责“逻辑怎么组织”

JSX 和 HTML 不一样的地方

• JSX 会被编译，不会原样进入浏览器
• JSX 属性更接近 JavaScript 命名，如 className、onClick
• 表达式要写在 {} 里
• 标签必须闭合

最小例子

function Welcome({ name }) {
  return <h1>Hello, {name}</h1>
}

这里的 JSX 最终会被编译成类似“创建一个 h1 元素，并把 name 插进去”的 JavaScript 调用。

为什么 JSX 容易让新手误解

因为它看起来像模板，但本质还是 JavaScript。

这意味着：

• 你可以直接写表达式
• 条件和循环本质上还是 JS 逻辑
• 它不是浏览器原生语法，而是编译阶段转换结果

JSX 最常见的 4 类写法

表达式插值

const name = 'John'
const element = <h1>Hello, {name}</h1>

属性绑定

<img src={user.avatarUrl} alt={user.name} />

条件渲染

{isLoggedIn ? <LogoutButton /> : <LoginButton />}

列表渲染

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

最容易犯错的地方

把 JSX 当成 HTML

它长得像 HTML，但规则由 JavaScript 和 React 决定，不是浏览器模板语法。

忘记属性命名差异

常见例子有：

• className 而不是 class
• htmlFor 而不是 for
• 事件传函数，而不是字符串

在 JSX 里塞太多逻辑

JSX 适合描述 UI，不适合承载过重的分支和计算。复杂逻辑最好提前抽到变量、函数或自定义 Hook。

例如不太推荐：

return (
  <div>
    {items
      .filter(item => item.visible)
      .sort((a, b) => a.order - b.order)
      .map(item => (
        <Comp key={item.id} data={item} onClick={() => doSomething(item)} />
      ))}
  </div>
)

这里更好的方向通常是先把数据处理和事件逻辑提到 JSX 外面。

和 React 学习主线的关系

• JSX 是进入 React 的第一层表达方式
• 列表与 key 的问题会继续进入 react-list-rendering-and-key
• 事件绑定与状态更新会继续进入 React中的事件处理与状态更新

最短记忆方式

JSX = 用 JavaScript 写 UI 结构的表达层。

Related notes

• React MOC