Dioxus Framework

Dioxus 是一个现代 Rust Web 框架，结合了 React 的编程模型与 Rust 的性能优势。它允许你构建高性能的 Web 应用，支持服务端渲染（SSR）、实时更新和跨平台部署。

快速开始

安装依赖

bash

在 Rust 项目中添加 Dioxus

使用 CLI 工具

基本项目结构

src/
├── main.rs # 应用入口
├── App.rsx # 根组件
├── components/ # 子组件目录
├── routes/ # 路由模块
├── server_fn/ # 服务端函数
└── utils/ # 工具函数

组件基础

定义组件

组件是使用 #[component] 宏定义的函数，它接受 Properties（props）并返回一个 Element。

rust
use dioxus::prelude::*;

#[component]
fn DogApp(breed: String) -> Element {
rsx! {
div { class: card } {
h2 { Dogs of breed: {breed} }
ul {
(0..3).map(|i| rsx! {
li { Dog {i} }
})
}
}
}
}

Component Properties

所有组件都接受一个描述其参数的 struct。Props 需要 derive 以下 traits：

rust
#[derive(Props, PartialEq, Clone)]
struct DogAppProps {
breed: String,
}

重要特性：

组件生命周期

Dioxus 组件会在以下情况下重新渲染：

1. 1. Props 改变：当组件的 props 发生变化时
2. 信号变化：当组件监听的信号更新时
3. Scope.needs_update()：当父组件要求更新时

重要： Dioxus 默认 memoized 所有组件，性能比 React 更好。

状态管理

使用 Hooks

Dioxus 提供类似 React 的 hooks 用于管理状态。

use_signal()

创建响应式状态：

rust
#[component]
fn Counter() -> Element {
let mut count = use_signal(cx, || 0);

rsx! {
div {
button {
onclick: move |_| {
count += 1;
}
} { Increment }
p { Count: {count} }
button {
onclick: move |_| {
count -= 1;
}
} { Decrement }
}
}
}

use_coroutine()

运行异步操作：

rust
#[component]
fn DataFetcher() -> Element {
let mut data = use_signal(cx, || None::);
let loading = use_signal(cx, || false);

use_coroutine(cx, |cx| async move {
loading.set(true);
// 模拟异步数据获取
tokio::time::sleep(Duration::from_secs(2)).await;
data.set(Some(Fetched data.to_string()));
loading.set(false);
});

rsx! {
div {
if *loading.get() {
p { Loading... }
} else if let Some(d) = data.get() {
p { Data: {d} }
} else {
p { No data yet }
}
}
}
}

use_context()

访问上下文值：

rust
#[derive(Clone, Props)]
struct ChildProps {
value: String,
}

#[component]
fn Child(props: ChildProps) -> Element {
rsx! { p { Value from context: {props.value} } }
}

#[component]
fn Parent() -> Element {
let value = usecontext(cx, || default.tostring());
rsx! { Child { value: value.clone() } }
}

全局状态

使用信号进行全局状态管理：

rust
// main.rs
use dioxus::prelude::*;

fn main() {
let themesignal = RwSignal::new(light.tostring());
dioxus::launch(App, (
AppContext::new(theme_signal)
));
}

// App.rsx
#[component]
fn App() -> Element {
let theme = use_context(cx);
rsx! {
div {
button {
onclick: move || theme.set(dark.tostring())
} { Dark Mode }
button {
onclick: move || theme.set(light.tostring())
} { Light Mode }
p { Current theme: {theme.read()} }
}
}
}

路由

基本路由

rust
// routes/mod.rs
use dioxus::prelude::*;
use dioxus::router::{Route, Router};

#[component]
fn Home() -> Element {
rsx! { h1 { Home Page } }
}

#[component]
fn About() -> Element {
rsx! { h1 { About Page } }
}

// App.rsx
#[component]
fn App() -> Element {
rsx! {
Router {
Route { to: /, Home {} }
Route { to: /about, About {} }
}
}
}

动态路由

rust
use dioxus::router::NavLink;

rsx! {
nav {
ul {
li { NavLink { to: / } { Home } }
li { NavLink { to: /about } { About } }
}
}
}

表单处理

rust
#[derive(Props, Clone)]
struct FormProps {
on_submit: Callback,
}

#[component]
fn Form(props: FormProps) -> Element {
let mut name = use_signal(cx, || String::new());
let mut email = use_signal(cx, || String::new());

rsx! {
form {
onsubmit: move |event| {
event.prevent_default();
props.on_submit.call((
name.get().clone(),
email.get().clone(),
));
}
} {
input {
r#type: text,
value: {name},
oninput: move |e| name.set(e.value())
}
input {
r#type: email,
value: {email},
oninput: move |e| email.set(e.value())
}
button { r#type: submit } { Submit }
}
}
}

服务端渲染（SSR）

启用 SSR

rust
// main.rs
use dioxus::prelude::*;

fn main() {
// 启用 SSR 功能
dioxus::launch(App);
}

// server_fn/api.rs
use dioxus::prelude::*;

#[server_fn(/)]
async fn serve_home() -> String {
// 渲染组件为字符串
rendertostring(|cx| rsx! { App {} })
}

服务端函数（Server Functions）

rust
use dioxus::prelude::*;

#[server_fn(/api/hello)]
async fn hello(name: String) -> String {
format!(Hello, {}!, name)
}

数据获取

使用资源

rust
#[server_fn(/api/data)]
async fn fetch_data() -> Json> {
use crate::data::fetchfromdb().await
}

常见模式

条件渲染

rust
rsx! {
div {
if *count.get() > 0 {
p { Count is positive }
} else {
p { Count is zero }
}
}
}

列表渲染

rust
let items = vec![Item 1, Item 2, Item 3];

rsx! {
ul {
items.iter().map(|item| rsx! {
li { key: {item} } { item }
})
}
}

组件组合

rust
#[component]
fn Header() -> Element {
rsx! {
header {
h1 { My App }
nav {
a { href: / } { Home }
a { href: /about } { About }
}
}
}
}

#[component]
fn PageLayout(content: Element) -> Element {
rsx! {
div { class: layout } {
Header {}
main { content }
Footer {}
}
}
}

样式和资源

CSS 模块

rust
// 在 main.rs 或