前言

上一篇我们把第一个 Dioxus 项目跑起来了。

这一篇先不讲 CLI。也不碰状态管理，只聊一件事：rsx! 到底该怎么理解。

我一开始对它的判断也很简单：这不就是 Rust 版 JSX 吗。

但真写了输入框、按钮、列表、条件分支之后我发现这个理解只能对一半。

它确实像 JSX，但更准确一点说它是一套长得像 HTML 的 Rust UI 语法。

这个认知早点拧过来后面学组件、路由、Signals 都会轻松不少。要是没拧过来你就会一直下意识去找三元表达式、event.target.value越写越别扭。

rsx! 不是模板引擎，它就是一个 Rust 宏。

官方文档在 Dioxus 里说得很直接：RSX 是用来建立 Dioxus UI 的语法。底层会被过程宏展开成 Rust 代码，不是单独的模板文件。

说到你看到的，

rsx!{
h1 { "Welcome to Dioxus!" }
p { "Hello,{name}" }
}

它不是“在 Rust 里塞了一段 HTML”。更像是“用更短的方式描述一棵 UI 树”。

这也是它和传统模板差别最大的地方：

• 模板通常有自己的一套语法规则
• rsx! 直接活在 Rust 语法环境里
• 花括号里的内容不是特殊模板语法，而是普通 Rust 表达式

use dioxus::prelude::*;fn main {
dioxus这方面，:launch;}
#
fn App -> Element {
let name = "Dioxus";rsx，老实说，{
div {
h1 { "你好。{name}" }
p { "这段 UI 不是模板文件，而是 Rust 代码的一部分。" }
}
}
}

这段代码真正关键的。不是“标签看起来像 HTML”，而是你已经在一个 Rust 函数里把 UI 写完了。

. 为什么 React 开发者会觉得它很眼熟

If you’ve written React,first glance at rsx! will feel familiar.

都是声明式 UI

You don’t need to imperatively create nodes,set text。or attach events. You just describe “what page should look like”,and framework updates when state changes.

标签结构 + 属性 + 插值

rsx!{
section {
至于class，"hero"。h1 { "欢迎回来{user_name}" }
p { "今天继续改你的 Dioxus 页面。" }
}
}

• section,h1。p: 元素标签
• class: 属性
• {user_name}: 动态插值

事件也是贴在元素上

button {
onclick: move |_| println!按理说，"点我"
}

This feels exactly like React’s mental model: events sit next to element,and logic stays inside component.

. 它和 JSX 最关键的差异：花括号里是 Rust。不是 JavaScript

Pain point: React 开发者习惯用三元运算符或 JS 模板字符串，一不小心就会把这些思维搬进 rsx! ——结果报错、代码难读。

字符串插值走 Rust 的格式化规则

let world = "earth";rsx，说起来，{ h1 { "Hello {world}!" } }

复杂表达式可以直接塞进去

rsx!{
span {
{
format!).to_uppercase
}
}
}

/-style 正经 Rust 写法

let screen = if aunticated {
rsx!不过，{ Dashboard {} }
} else {
rsx!{ Login {} }
};rsx，{ main { {screen} } }

let badge = match status.as_str {
"success" => rsx!{ span { class: "ok"。"已完成" } },"pending" => rsx!{ span { class: "pending"。"进行中"} },_ => rsx!{ span { class: "draft","草稿"} },};rsx，{ div { {badge} } }

. 条件渲染怎么写：别找三元。也别硬套 &&

Pain point: 很多 React 开发者把 JSX 的三元表达式当作唯一解法，结果在 Dioxus 中写出晦涩代码。

先算出一个 再去

let panel = if logged_in {
rsx!{ UserPanel {}}
} else{
rs