Dioxus：全栈应用框架介绍

一、Dioxus概述

Dioxus 0.7 目前处于 alpha 测试阶段。它是一个全栈应用框架，支持使用单一代码库构建适用于 Web、桌面、移动等多平台的应用。具备零配置设置、集成热重载和基于信号的状态管理等特性。借助 Server Functions 可添加后端功能，并通过 CLI 进行打包。

（一）独特特性

1. 跨平台开发：只需三行代码即可构建跨平台应用（Web、桌面、移动、服务器等）。
2. 高效状态管理：融合了 React、Solid 和 Svelte 等框架的优势。
3. 内置全栈框架：自带功能丰富、类型安全的全栈 Web 框架。
4. 集成打包工具：具备用于部署到 Web、macOS、Linux 和 Windows 的集成打包工具。
5. 亚秒级热重载：支持 Rust 代码的亚秒级热补丁和资源热重载。

（二）即时热重载

通过 dx serve 命令可启动应用，编辑标记、样式甚至 Rust 代码，能在毫秒内看到更改。

（三）全栈 Web 框架

可通过内置的类型安全 RPC（server_fn）直接从前端调用后端，支持流式传输、悬念加载、代码分割、WebSocket 等功能。

（四）丰富原生组件

拥有一套完整的原语组件，仿照 shadcn/ui 和 Radix - Primitives 设计，可快速上手。

（五）多平台支持

对 Android 和 iOS 提供一流支持，使用 dx serve --platform android 命令，应用可在模拟器或设备上秒级启动，还能直接调用 JNI 和原生 API。

（六）便捷打包部署

使用 dx bundle 命令，应用将完成构建和打包，支持 Web、桌面和移动等多平台，且具备最大化优化。在 Web 端，可利用 .avif 生成、.wasm 压缩、代码压缩等功能，能构建小于 50kb 的 Web 应用和小于 5mb 的桌面/移动应用。

（七）完善文档资料

拥有简洁、易读且全面的文档，所有 HTML 元素和监听器都有 MDN 文档，文档还与 Dioxus 进行持续集成，确保文档始终保持最新状态。

二、运行示例

（一）示例分支说明

此仓库主分支的示例针对 Dioxus 的 git 版本和 CLI。若需适用于 Dioxus 最新稳定版本的示例，可查看 0.6 分支。

（二）运行命令

1. 使用 cargo run --example <example> 可运行仓库顶级目录的示例。
2. 推荐下载 dioxus - cli。若使用 Dioxus 的 git 版本，可通过 cargo install --git https://github.com/DioxusLabs/dioxus dioxus - cli --locked 安装匹配版本的 CLI。
3. 使用 CLI 还能运行 Web 平台的示例，使用 dx serve --example <example> --platform web -- --no - default - features 命令，禁用默认桌面特性并启用 Web 特性。

三、Dioxus 与其他框架对比

（一）Dioxus 与其他框架共性

Dioxus 尊重 Rust 生态系统中的所有框架，也欣赏 Rust 生态系统的创新。例如，其 flex - box 库 Taffy 被 Bevy、Zed、Lapce、Iced 等多个框架使用。

（二）Dioxus 与其他框架差异

1. 与 Tauri 对比
   • 原生 Rust 运行：Tauri 架构使 UI 限于 JavaScript 或 WebAssembly，而 Dioxus 的 Rust 代码在用户机器上原生运行，可直接进行线程生成、文件系统访问等操作，无需 IPC 桥接，简化应用架构。也可将 Dioxus - Web 作为前端构建 Tauri 应用。
   • 功能范围不同：Tauri 需支持 JavaScript 及其复杂构建工具，功能受限；Dioxus 专注于 Rust，能提供 Server Functions、高级打包和原生渲染器等额外工具。
   • 共享库：Tauri 和 Dioxus 共享 Tao 和 Wry 等库。
2. 与 Leptos 对比
   • 响应式模型：Leptos 使用信号驱动反应性和渲染，Dioxus 仅用信号实现反应性，使用高度优化的 VirtualDOM 管理重渲染，二者速度都极快。
   • 功能范围：Dioxus 提供 Web、桌面、移动、LiveView 等渲染器，维护社区库和跨平台 SDK；Leptos 专注于全栈 Web，有岛屿、<Form /> 组件等 Web 特定功能。
   • DSL 语法：Dioxus 使用自定义 Rust 类 DSL 构建 UI，Leptos 使用类 HTML 语法。Dioxus 的 DSL 有更多“魔法”，包括字符串自动格式化和简单 Rust 表达式热重载。
3. 与 Yew 对比
   • 应用范围：Yew 构建单页 Web 应用，Dioxus 是全栈跨平台框架，适用于 Web、桌面、移动和服务器等多平台应用构建。
   • 开发工具：Dioxus 有自动格式化和热重载等开发工具，Yew 无这些特性。
4. 与 Egui 对比
   • 渲染模式：Egui 每帧重新渲染，Dioxus 构建一次 UI 后修改；Egui 依赖全局状态对象管理状态，Dioxus 用组件和 props 封装状态，使组件更易复用。
   • 样式与定制：Egui 有自己的样式和布局方案，Dioxus 可使用任何 CSS 库，如 Tailwind 或 Material UI。
5. 与 Iced 对比
   • 状态管理：Iced 使用 Elm 状态管理模型（消息传递和归约器），与 Dioxus 不同，有时较冗长。
   • 原生特性：Dioxus 使用 WebView 渲染，有原生文本输入、粘贴处理等原生特性；Iced 渲染器未实现这些，原生感不足。
   • WGPU 成熟度：Iced 的 WGPU 渲染器更成熟，适用于需要 GPU 访问的应用；Dioxus 的 WGPU 渲染器尚不成熟。
6. 与 Electron 对比
   • 项目性质：Dioxus 和 Electron 是不同项目。Electron 允许开发者用 Web 技术构建跨平台桌面应用。
   • 轻量级：Dioxus 使用系统原生 WebView 渲染，典型应用约 15mb（macOS），远小于 Electron 的 100mb。
   • 成熟度：Electron 更成熟，Dioxus 较新，部分功能（如深度链接）实现需额外工作。

四、总结

Dioxus 是一个功能强大的全栈应用框架，具备跨平台开发能力、高效状态管理、即时热重载和便捷的打包部署等特性。与其他框架相比，Dioxus 在应用场景、状态管理、开发语法等方面存在差异，开发者可根据项目需求合理选择框架。