Rust 全栈应用框架 Dioxus：从前端到桌面再到 WASM 的统一开发体验

如果你正在寻找一个能用 Rust 写前端、桌面应用、移动应用甚至 WebAssembly 的统一框架，Dioxus 是目前生态中最具潜力的选择之一。

---

为什么需要 Dioxus？

随着 WebAssembly（WASM）与 Rust 的发展，越来越多开发者开始思考：Rust 是否能做“全栈”？是否能有像 React 一样的组件模型？是否可以用 Rust 写桌面 GUI，甚至 Web 前端？

Dioxus 正是这个愿景下的产物。

它是一个受 React 启发的 Rust UI 框架，具备以下核心特点：

• 类 React 的组件系统（支持 Hooks）

• ️ 跨平台渲染：支持 Web、桌面（TUI/GUI）、移动端

• ⚙️ 内置 diff 引擎 + 虚拟 DOM

• 极致性能：Rust 编译 + 无 GC

• 可组合、可测试、可热更新（Hot Reload）

Dioxus 试图成为 Rust 生态中的 Flutter + React + Tauri 结合体，让 Rust 成为真正意义上的“全栈语言”。

---

️ Dioxus 架构全貌

Dioxus 的架构分为三个核心层级：

┌──────────────┐
│    Dioxus    │ ← React-style UI 框架（hooks、组件、diff）
└─────┬────────┘
      ↓
┌──────────────┐
│ Dioxus Core  │ ← 虚拟 DOM 与状态引擎
└─────┬────────┘
      ↓
┌─────────────────────┐
│ 渲染器（Renderer）   │ ← Web / Desktop / CLI / Mobile
│ - Web: dioxus-web   │
│ - Desktop: dioxus-desktop（基于 Tauri）│
│ - TUI: dioxus-tui   │
└─────────────────────┘

这种模块化架构意味着：你只写一套 UI 逻辑，就可以在多个平台运行，甚至能编译成 WebAssembly 在浏览器运行。

---

示例：构建一个计数器应用

一个最简单的 Dioxus 应用如下：

use dioxus::prelude::*;

fn main() {
    LaunchBuilder::desktop().launch(App);
}

fn App(cx: Scope) -> Element {
    let count = use_state(cx, || 0);

    cx.render(rsx!(
        div {
            h1 { "Count: {count}" }
            button {
                onclick: move |_| count += 1,
                "Click me"
            }
        }
    ))
}

注意看，use_state 与 rsx! 宏几乎让你感觉在写 React，只不过写的是 Rust！

---

支持的运行平台

渲染平台	描述	渲染引擎
Web（浏览器）	编译为 WASM + HTML	dioxus-web
桌面应用	打包为本地 GUI 应用	dioxus-desktop + Tauri
命令行（TUI）	支持交互式终端 UI	dioxus-tui
移动端	早期实验中（未来与 Tauri 结合）	dioxus-mobile (计划中)

---

状态管理与组件通信

Dioxus 提供了 React 风格的状态钩子：use_state、use_ref、use_effect 等。

同时也支持全局状态管理方案，如：

• fermi：类似于 Recoil 的原子状态库

• 上下文共享 use_context

示例：

use fermi::{Atom, use_atom};

static COUNT: Atom = Atom::new(0);

fn Counter(cx: Scope) -> Element {
    let count = use_atom(cx, &COUNT);

    cx.render(rsx!(
        div {
            h2 { "Count: {count}" }
            button { onclick: move |_| count += 1, "Increment" }
        }
    ))
}

---

热更新与开发体验

使用 dioxus-cli 工具，可以获得与 React/Vite 类似的开发体验：

cargo install dioxus-cli
dioxus serve

它支持：

• 热更新（Live Reload）

• 模板生成

• 构建优化

• WebAssembly 构建

---

实际落地方向

虽然 Rust + Dioxus 生态仍在快速演进，但它已经适合以下场景：

• 桌面客户端替代方案（跨平台 GUI 应用）

• Rust WebAssembly 项目（无需 JS 的前端）

• 内网管理后台 + CLI 工具界面

• 用于教学和探索 Rust 前端开发

如果你正在构建一个需要“前后端统一语言”的高性能应用系统，Dioxus 是目前少有的选择之一。

---

与其他框架对比

框架	语言	支持平台	特点
React + TS	JS/TS	Web	最成熟的生态
Tauri + JS	JS/TS	Desktop	Web UI + Rust 后端
Flutter	Dart	Web / Desktop	跨平台高性能 GUI
Yew	Rust	Web	WASM 优化良好，语法不如 Dioxus 易用
Dioxus	Rust	Web/Desktop/TUI	类 React 语法、全栈统一语言支持

---

写在最后：Rust 全栈的未来，正在被定义

Dioxus 可能不是最“成熟”的 UI 框架，但它是目前最具潜力的 Rust 全栈 UI 工具之一。

它背后体现的是一种趋势：用 Rust 编写“全栈可控、高性能、安全可验证”的完整应用栈。这不仅意味着跨平台的能力，还意味着开发体验、部署方式、安全模型的统一。

如果你热爱 Rust、热爱探索新范式，Dioxus 值得一试。

---

如果你对 Dioxus 感兴趣，推荐尝试：

• 官方文档：https://dioxuslabs.com/learn/

• GitHub：https://github.com/DioxusLabs/dioxus

• 快速上手教程：Dioxus | Fullstack crossplatform app framework for Rust