JSX与模板语法核心差异解析
JSX将用户界面嵌入JavaScript，插值使用单大括号，属性名转换为驼峰命名，多个class条件拼接推荐使用clsx库，style属性只接受驼峰风格的对象，多个根节点需要用Fragment包裹，v-html对应dangerouslySetInnerHTML，JSX本质是React createElement的语法糖，用户界面可当作变量进行传递。
在 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。
游乐网为非赢利性网站，所展示的游戏/软件/文章内容均来自于互联网或第三方用户上传分享，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系youleyoucom@outlook.com。
同类文章
JavaScript数组字面量与构造函数创建稀疏数组的差异
数组字面量创建稠密数组，空位默认为undefined；Array()构造函数传入单个数字参数会生成稀疏数组，索引不存在且遍历方法跳过，多参数或非数字参数则行为与字面量一致。初始化稠密数组应使用Array from或fill。
如何优化Bootstrap按钮的焦点状态环CSS样式方法详解
Bootstrap按钮焦点样式优化需将内阴影改为外发光，覆盖所有焦点选择器避免原生蓝边闪烁。使用:focus-visible区分键盘与鼠标交互，同时处理按钮组圆角、父容器溢出及浏览器兼容性，确保焦点反馈清晰且符合无障碍标准。
Less中强制转换CSS单位适配不同移动端方案详解
Less单位转换需手动完成：用unit()剥离单位，通过变量控制基准值，再拼接目标单位。px2rem函数须区分输入类型（纯数字、带px单位等），基准值@base-font-size需全局定义且不可在媒体查询中重定义。所有运算发生在编译期，适配需提前编译多套CSS文件。
Vue 插件开发与使用完整指南
Vue插件通过install方法为应用注入全局属性、组件、指令、混入和provide等扩展能力，注册时机须在createApp之后、mount之前。插件支持对象或函数形式，使用app use()注册。开发时需注意命名冲突、配置默认值及错误处理，确保工程健壮性。
CSS响应式视频全屏黑边排版问题解决方案
CSS响应式视频全屏黑边源于盒子模型、定位与加载策略缺失。需重置body边距及溢出，父容器用position:fixed与100dvh，video设为block+object-fit:cover。autoplay需加muted、playsinline。移动端用100dvh防地址栏抖动，低端机分辨率不超1倍。
- 热门数据榜
相关攻略
2026-07-25 22:10
2026-07-25 22:09
2026-07-25 22:09
2026-07-25 22:09
2026-07-25 22:09
2026-07-25 21:26
2026-07-25 21:26
2026-07-25 21:26
热门教程
- 游戏攻略
- 安卓教程
- 苹果教程
- 电脑教程
