在 Vue 中，开发者习惯于将 UI 放置在 内，并通过指令（如 v-if、v-for、:class）来控制视图行为。而 React 则选择了完全不同的路径：将 UI 直接嵌入 JavaScript 代码，这种语法被称为 JSX。对于从 Vue 转向 React 的初学者来说，JSX 最初可能会显得不习惯，但一旦掌握其核心逻辑，你便会发现它异常灵活——毕竟 JSX 本质上就是 JavaScript，你掌握的所有 JS 技巧都能直接应用于 UI 构建。
一、JSX 与模板语法的一眼对比
Vue3 SFC：
{{ title }}
{{ desc }}
React：
function Card() {
const title = "Hello"
const desc = 'World'
return (
{title}
{desc && {desc}
}
)
}
请留意以下三个关键差异：
- UI 直接通过
return返回，与逻辑代码共存于同一个函数中； - 插值使用单大括号
{title}，而非 Vue 的双大括号{{ }}； class属性需要改写为className（因为 JSX 本质是 JavaScript，class是保留关键字）。
二、插值：{ } 里可以放置任何 JS 表达式
Vue 的 {{ }} 同样支持表达式，但 React 的 { } 更加彻底——任何合法的 JS 表达式都可以直接使用：
function Demo({ user, items }) {
return (
{user.name.toUpperCase()}
{user.age >= 18 ? '成年' : '未成年'}
{items.length} 个项目
{new Date().getFullYear()}
)
}
需要牢记：{ } 中只能放入表达式（即有返回值的代码），不能包含 if、for 这类语句。当需要条件或循环时，应使用三元运算符、&& 或 .map()（下一节会详细讲解）。
三、属性绑定：告别 : 前缀
| 场景 | Vue3 | React |
|---|---|---|
| 静态属性 | type="text" |
type="text" |
| 动态属性 | :href="url" |
href={url} |
| 布尔属性 | :disabled="isDisabled" |
disabled={isDisabled} |
Vue 通过 : 来区分静态和动态绑定，而 React 则依靠是否使用大括号：引号表示字符串，大括号代表 JavaScript 变量或表达式。
几个需要改名的属性
由于 JSX 本质上就是 JavaScript，部分 HTML 属性名与 JS 关键字冲突，因此必须采用驼峰命名法：
| HTML / Vue | React |
|---|---|
class |
className |
for（label） |
htmlFor |
tabindex |
tabIndex |
onclick |
onClick（驼峰事件） |
四、class 与 style 绑定
这是 Vue 开发者感到最不习惯的地方，因为 Vue 提供了强大的对象/数组语法糖，而 React 需要你使用纯 JavaScript 手动拼接。
class
// React：使用模板字符串或三元运算符自行拼接
// 当条件较多时，社区推荐使用 clsx / classnames 库（对标 Vue 的对象语法）
import clsx from 'clsx'
style
Vue 中 style 可以是字符串或对象；React 只接受对象，且属性名必须使用驼峰命名，值大多需要带单位的字符串：
// React
注意那两层大括号：外层是 JSX 插值标记，内层是 JavaScript 对象字面量。
五、根节点：Fragment 对应 Vue 的多根
Vue3 支持组件拥有多个根节点，React 同样支持，但需要使用 Fragment 进行包裹（避免产生多余的 DOM 层级）：
import { Fragment } from 'react'
function List() {
return (
<>
A
B
)
}
<>... 是
六、注释、原始 HTML 等细节
function Demo({ html }) {
return (
{/* 这是 JSX 里的注释，必须包裹在大括号内 */}
{/* Vue 的 v-html 在 React 中的对应写法（同样需要注意 XSS 安全风险） */}
)
}
React 特意将这个 API 命名为 dangerouslySetInnerHTML，意在提醒开发者：与 Vue 的 v-html 类似，它会带来 XSS 攻击风险，务必谨慎使用。
七、JSX 的本质（理解这点就能融会贯通）
JSX 仅仅是一种语法糖，最终会被编译为普通的函数调用：
Hello
// 编译后 ≈
React.createElement('h1', { className: 'title' }, 'Hello')
它返回的是一个描述 UI 的普通 JavaScript 对象（称为“React 元素”）。因此，JSX 可以像值一样被赋值给变量、放入数组、作为函数返回值——这正是 React 灵活性的根源：
function Demo({ isLoggedIn }) {
// JSX 可以存入变量
const greeting = isLoggedIn ? 欢迎回来
: 请登录
const buttons = ['保存', '取消'].map(t => )
return {greeting}{buttons}
}
在 Vue 中，你需要依赖 v-if / v-for 指令；而在 React 中，这些操作都只是普通的 JavaScript 变量和数组操作。
小结
- JSX = 在 JavaScript 中编写 UI，插值使用单
{ }，里面放置表达式。 class → className，:attr="x" → attr={x}，style 只接受驼峰命名对象。- 多条件拼接 class 时推荐使用
clsx库，可以找回 Vue 对象语法的手感。 - 多根节点使用
<>...（Fragment），v-html对应dangerouslySetInnerHTML。 - 本质上 JSX 返回普通 JavaScript 对象，因此 UI 可以像变量一样被传递和操作。
下一篇将讲解组件与 Props——看看 React 如何定义组件、如何声明和传递 props。
