mcpField
D
dioxus-guide

dioxus-guide

github.com/daiki48开发036 次安装3 周前更新
代码仓库

关于 dioxus-guide

面向 Dioxus 应用开发者的 Dioxus v0.7.x 参考技能，涵盖核心 API 与常见模式，包括 RSX、信号、路由、事件处理和 CLI 命令。

主要功能

  1. 01Dioxus 0.7 配置指南
  2. 02RSX 与组件模式
  3. 03信号、memo 和上下文 API
  4. 04异步资源与路由
  5. 05事件处理和 dx 命令

适用场景

  1. 01启动 Dioxus 0.7 项目
  2. 02实现组件状态与上下文
  3. 03添加路由和事件处理程序

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/daiki48/dotfiles --skill dioxus-guide

安装后在 Claude Code 中输入/dioxus-guide确认已加载。

详细介绍

Dioxus v0.7.x 开发指南

破坏性变更（从 0.6 升级）

0.7 中已弃用：

  • cx / Scope → 无需使用
  • use_state → use_signal
  • use_ref → use_signal

基本设置

use dioxus::prelude::*;

fn main() { dioxus::launch(App); }

#[component]
fn App() -> Element {
    rsx! { "Hello, Dioxus!" }
}

[dependencies]
dioxus = { version = "0.7.2", features = ["router"] }

[features]
default = ["desktop"]
web = ["dioxus/web"]
desktop = ["dioxus/desktop"]

RSX 宏

rsx! {
    div { class: "container", color: "red",
        width: if condition { "100%" },  // Conditional attr
        "Hello!"
    }

    for i in 0..5 { div { "{i}" } }      // Loop (prefer for over iter)

    if condition { div { "True!" } }      // Conditional

    {children}                            // Expressions in braces
}

组件

#[component]
fn MyComponent(
    title: String,
    #[prop(optional)] class: Option<String>,
    #[prop(default = 10)] limit: usize,
    children: Element,
) -> Element {
    rsx! {
        div { class: class.unwrap_or_default(),
            h1 { "{title}" }
            {children}
        }
    }
}

Props：必须使用拥有所有权的类型（String，而非 &str），并实现 PartialEq + Clone

状态：use_signal

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

    rsx! {
        h1 { "Count: {count}" }
        button { onclick: move |_| *count.write() += 1, "+" }
    }
}

// Read
count()        // Clone value
count.read()   // Reference (&T)

// Write
count.set(10)
*count.write() = 10
count.with_mut(|c| *c += 1)

派生状态：use_memo

let doubled = use_memo(move || count() * 2);

Context API

// Provider
#[component]
fn App() -> Element {
    let theme = use_signal(|| "light".to_string());
    use_context_provider(|| theme);
    rsx! { Child {} }
}

// Consumer
#[component]
fn Child() -> Element {
    let theme = use_context::<Signal<String>>();
    rsx! { div { "Theme: {theme}" } }
}

异步：use_resource

let data = use_resource(move || async move { fetch_data().await });

match data() {
    Some(result) => rsx! { div { "{result}" } },
    None => rsx! { "Loading..." },
}

// With dependency
let user = use_resource(move || {
    let id = user_id();  // Re-runs when this changes
    async move { fetch_user(id).await }
});

路由

#[derive(Routable, Clone, PartialEq)]
enum Route {
    #[layout(NavBar)]
        #[route("/")]
        Home {},
        #[route("/blog/:id")]
        BlogPost { id: i32 },
}

#[component]
fn NavBar() -> Element {
    rsx! {
        nav { a { href: "/", "Home" } }
        Outlet::<Route> {}
    }
}

#[component]
fn App() -> Element {
    rsx! { Router::<Route> {} }
}

事件

rsx! {
    button { onclick: move |_| { /* click */ }, "Click" }

    input {
        oninput: move |e| set_value(e.value()),
        prop:value: value,
    }

    input { onkeydown: move |e| {
        if e.key() == Key::Enter { /* enter pressed */ }
    }}

    form { onsubmit: move |e| {
        e.prevent_default();
        // submit
    }}
}

桌面端配置（Dioxus.toml）

[desktop.window]
title = "MyApp"
width = 1200
height = 800

命令

curl -sSL http://dioxus.dev/install.sh | sh  # Install dx CLI
dx serve        # Dev server
dx build --release
dx bundle --release  # Create .deb etc.

Dioxus 与 Leptos 对比

项目Dioxus 0.7Leptos 0.8
Signaluse_signal（类似 Copy）signal()（可能需要 clone）
宏rsx! {}view! {}
桌面端原生支持需要 Tauri

评论

支持 Markdown