Dioxus Core Macro：Rust宏扩展库的使用指南

介绍

dioxus-core-macro是Dioxus框架的核心宏处理器，专门为Rust语言设计，用于简化组件化开发。该库提供了一系列声明式宏，帮助开发者快速构建用户界面组件，同时保持Rust的类型安全和性能优势。

主要功能

• 组件宏声明
• 属性处理
• JSX-like语法支持
• 状态管理集成
• 生命周期钩子处理

安装方法

在Cargo.tml中添加依赖：

[dependencies]
dioxus = "0.3"
dioxus-core-macro = "0.3"

基本使用方法

1. 定义组件

use dioxus::prelude::*;

#[component]
fn MyComponent(name: String) -> Element {
    rsx! {
        div {
            "Hello, {name}!"
        }
    }
}

2. 带状态的组件

#[component]
fn Counter() -> Element {
    let mut count = use_signal(|| 0);
    
    rsx! {
        div {
            h1 { "Count: {count}" }
            button {
                onclick: move |_| count += 1,
                "Increment"
            }
        }
    }
}

3. 属性处理

#[component]
fn Button(
    #[props(default = "primary")] variant: String,
    #[props(default = false)] disabled: bool,
    children: Element,
) -> Element {
    rsx! {
        button {
            class: "btn btn-{variant}",
            disabled: "{disabled}",
            {children}
        }
    }
}

高级用法

条件渲染

#[component]
fn ConditionalRender(show: bool) -> Element {
    rsx! {
        if show {
            div { "This is visible" }
        } else {
            div { "This is hidden" }
        }
    }
}

列表渲染

#[component]
fn TodoList(items: Vec<String>) -> Element {
    rsx! {
        ul {
            for item in items {
                li { key: "{item}", "{item}" }
            }
        }
    }
}

生命周期处理

#[component]
fn Timer() -> Element {
    let mut seconds = use_signal(|| 0);
    
    use_effect(move || {
        let mut interval = gloo_timers::callback::Interval::new(1000, move || {
            seconds += 1;
        });
        interval.forget();
    });
    
    rsx! { "Seconds: {seconds}" }
}

完整示例demo

// 完整示例：一个简单的待办事项应用
use dioxus::prelude::*;

fn main() {
    launch(App);
}

#[component]
fn App() -> Element {
    let mut todos = use_signal(|| vec![
        "学习Rust".to_string(),
        "学习Dioxus".to_string(),
        "构建Web应用".to_string()
    ]);
    let mut new_todo = use_signal(|| String::new());

    rsx! {
        div {
            class: "container",
            
            h1 { "待办事项列表" }
            
            // 添加新待办事项的表单
            form {
                onsubmit: move |event| {
                    event.stop_propagation();
                    if !new_todo().is_empty() {
                        todos.write().push(new_todo());
                        new_todo.set(String::new());
                    }
                },
                
                input {
                    r#type: "text",
                    placeholder: "输入新的待办事项...",
                    value: "{new_todo}",
                    oninput: move |event| new_todo.set(event.value())
                }
                button { r#type: "submit", "添加" }
            }
            
            // 待办事项列表
            TodoList { items: todos() }
            
            // 计数器组件示例
            Counter {}
        }
    }
}

#[component]
fn TodoList(items: Vec<String>) -> Element {
    rsx! {
        ul {
            class: "todo-list",
            
            for (index, item) in items.iter().enumerate() {
                li {
                    key: "{index}",
                    class: "todo-item",
                    
                    span { "{item}" }
                    button {
                        onclick: move |_| {
                            // 这里应该实现删除逻辑
                            println!("删除: {}", item);
                        },
                        "删除"
                    }
                }
            }
        }
    }
}

#[component]
fn Counter() -> Element {
    let mut count = use_signal(|| 0);
    
    rsx! {
        div {
            class: "counter",
            
            h2 { "计数器示例" }
            p { "当前计数: {count}" }
            
            button {
                onclick: move |_| count += 1,
                "增加"
            }
            button {
                onclick: move |_| count -= 1,
                "减少"
            }
            button {
                onclick: move |_| count.set(0),
                "重置"
            }
        }
    }
}

#[component]
fn Button(
    #[props(default = "primary")] variant: String,
    #[props(default = false)] disabled: bool,
    children: Element,
) -> Element {
    rsx! {
        button {
            class: "btn btn-{variant}",
            disabled: "{disabled}",
            {children}
        }
    }
}

注意事项

1. 确保在组件函数上使用#[component]属性宏
2. 组件必须返回Element类型
3. 使用rsx!宏来声明UI结构
4. 状态管理使用use_signal等hook函数

最佳实践

• 保持组件小而专注
• 合理使用props传递数据
• 利用Rust的类型系统进行编译时检查
• 使用key属性优化列表渲染性能

这个宏库极大地简化了Dioxus框架中的组件开发流程，让开发者能够以声明式的方式构建高性能的Web应用程序。