rust 全栈应用框架dioxus

逛github时发现了一个号称全栈应用框架dioxus,适用于web / desktop / mobile。零配置、集成了热启动和基于信号的状态管理。是由rust编写的，所以也就不受平台限制。

既然说的这么好，那就来试试构建一下三种平台的应用，构建的应用编译成web 、 desktop 、 mobile三个平台的应用。

与其他跨平台框架对比

这里列出几个大家熟知的平台，这些差异可以dioxus官网看到。

dioxus的定位：

• 使用组件、属性、钩子构建UI视图，状态管理更像Svelte
• 页面编写保持和HTML、CSS一致
• 可以任意切换适配目标平台渲染器进行渲染。
• 有很多功能库持续建设，和dioxus保持同步更新。

对于使用dioxus进行开发，有以下几点有用的功能：

• 热更新
• 具有日志记录、项目模板、代码检查等交互式cli。
• 集成构建部署不同平台，包括web、macos、ios和windows。
• 支持现代web开发方式，如SSR、混合开发、html流
• 直接访问系统API，如JNI(android) 、CoreFoundation (Apple) 、web-sys(web)
• 类型安全的应用程序路由和服务端功能。

VS Tauri

tauri 是基于web框架（如：react、vue、svelte等）的构建移动应用程序框架。

• 限制了它只能使用js或webassembly；而dioxus可以让你使用线程、访问文件系统等操作，无需IPC桥接。
• 限制了它只能作用于js；而dioxus可以提供其他能力：后台服务、打包工具、原生渲染器。
• 它们也有共享的一些库,是由tauri维护的

VS Leptos

leptos 是一个rust框架，它使用webassembly来构建web应用程序。

• 它使用信号系统驱动响应和渲染。而dioxus使用信号仅驱动响应。
• 它专注web，提供了一些web平台的组件；而dioxus目标是全平台包括桌面、移动、web。
• 它使用类似html的语法；而dioxus自定义了一套自己的DSL语法。

VS Yew

yew 是一个构建单应用web程序框架。它是dioxus的灵感来源，而dioxus为了支持更多的平台和功能。yew并不满足。

VS Electron

electron是使用js、html、css等web技术开发桌面应用程序的框架。

• dioxus 使用原生的webview渲染，它们的构建产物体积相差巨大。dioxus还可以和主机共享系统资源。
• 相比electron已经很成熟了，而dioxus still quite young。

VS egui

egui 是一个跨平台的GUI库。

• 它被设计为在每一帧上重新绘制，适用于游戏或其他交互式应用。而dioxus只会绘制一次，然后在每一帧上修改，这也使得dioxus可以使用web原生技术。
• 它提供了自己的样式和布局方案。而dioxus则可以让你使用适用于web的第三方样式库，比如tailwindcss 和material-ui。
• 它的状态管理是基于全局单一对象的。而dioxus鼓励使用组件和props传递状态。

通过这些比较呢，可以初步看到dioxus具有的优势。因为我还没有使用过svelte,对于这种基于信号的状态管理还是比较陌生。

构建Hello world

通过以上对比，我们可以看到想要学习使用dioxus，必须学习rust。如果没有学习过rust，那可能需要先去学习rust.

还有一个最重要的区别就是dioxus自己设计了一套DSL语法，类似html标签和css的语法，但可能在使用上还是有些不习惯。但是毕竟不破不立，想要跨平台、想要速度快，如果局限于现有某个技术，那么你也会有这个技术的瓶颈限制。

环境配置

• 本地安装rust http://rust-lang.org/
• 选择编辑工具，我这里选择了vscode，并安装了语法提示插件rust-analyzer
• 安装cargo-binstall，使用它直接安装dx而无需从源码编译。
• 安装dioxus-cli套件，包括两个部分：dioxus核心库和dx命令行工具。

系统环境配置，因为我是mac，所以无需配置，其他系统请查看Platform-specific dependencies;

初始化项目

dioxus提供了dx命令行工具，用于创建、编译、运行、调试项目。

新创建项目可以使用dx new <project-name>,因为我已经创建好了文件夹，所以需要初始化dx init

初始化项目时可以选择项目模板，我们选择最简单的模板第一个就行。后续的设置路由、样式都先不需要，最后完成初始化。

和rust项目比较，多了一个Dioxus.toml用于配置dioxus项目。默认安装了dioxus-web、dioxus-desktop和dioxus-mobile,且默认平台为web。

编写我们的hello world

清空模板里的代码，输出Hello world!在页面上.

在主入口文件main.rs:

use dioxus::prelude::*;fn main() {dioxus::launch(App);
}#[component]
fn App() -> Element {rsx! {h1 { "Hello, world!" }}
}

我们这行dx serve 等待编译完成，第一次编译会慢一点，后续就会快很多。

我们访问web服务地址http://127.0.0.1:8080

可以看到页面输出了Hello world!,可以继续我们的开发了 ✊

可以看到web服务已经可以访问成功了，我们编译为桌面应用，使用dx serve --platform desktop

dioxus提供了开发桌面、移动应用,可以直接在系统上构建GUI页面展示，我们执行命令后，默认直接打开窗口。

构建移动应用ios的app，对于移动端的开发，需要本地安装XCode 开发工具，并且需要选择下载ios资源包。

本地rust需要安装目标编译资源

rustup target add aarch64-apple-ios aarch64-apple-ios-sim

所有环境准备好之后，我们启动xcode启动一个ios的模拟器。然后在dioxus项目中执行dx serve --platform ios，它会自动探测到模拟器并安装应用。

dioxus 核心人员都是全职在维护，感觉应该还是比较靠谱的。

目前版本最新0.6.3 发展过程中可能存在较大更新，但是值得关注。

基础知识

开始编写应用程序的最重要的就是掌握界面设计编码，作为前端开发人员，对于html必不陌生，对于dioxus，为了方便跨平台构建而不受已有语言的限制，自定义了一套自己的DSL语法。新的语法会带来一些陌生、不适以及潜在的问题，但也伴随无限的可能性。

组件

界面设计实现是由一个个组件组成的，组件可复用，可组合。在之前的例子中 App就是一个组件，它是一个函数，返回一个Element。使用rsx!{ }宏来定义UI结构。

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

我们还使用了#[component]它可以方便我们创建组件，用来简化组件接收到的数据结构定义。如果不使用，我们需要为组件定义参数结构体,并指定参数传递。

根组件App不能接受参数。

#[derive(Props, Clone, PartialEq)]
struct AppProps {name: String,
}fn AppHeader(props: AppProps) -> Element {rsx! {h1 { "Hello, {props.name}!" }}
}

我们定义的结构体AppProps必须实现Props trait，并且支持Clone和PartialEq trait。为了简化这一行为，方便创建组件，提供了#[component]derive简化这一过程,无需再定义结构体；还可以帮助我们检查组件定义的正确性。

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

通过#[component] 可以方便定义组件接收的参数。定义要接收的参数，无需再手动解构。

dioxus 是声明式框架，通过定义组件状态、属性来决定组件的的行为。

rsx!{ }

通过使用rsx!{ } 宏来定义UI结构，和html一样，我们可以使用比如div h1~h6 img等熟知的标签来构建页面结构。

rsx!{ } 使用rust的结构体定义元素结构，在声明标签结构时，采用的严格模式语法解析。这也在开发模式下提前暴露问题，从而避免运行时错误。

let handle_click = move |event| {info!("Button clicked!");
};rsx! {div {class:"flex flex-col gap-15px",h2 { "Welcome to {name}" }button {onclick: handle_click,"Click me",}}
}

使用变量时，直接使用{ }包裹，rsx会解析使用format!()处理字符串。元素的事件绑定和react是一致的，通过on+事件名绑定事件处理函数。事件处理函数是一个闭包函数，接收事件句柄对象

条件/循环渲染

条件渲染可以通过rust的数据类型bool类型变量，或者Option<>类型的值来判断。

let show_title = true;rsx! {{show_title.then(|| rsx!{ h2 { "Welcome to {name}" }})}
}

也可以通过if 语句进行判断

rsx! {if show_title {h2 { "Welcome to {name}" }}
}

对于循环渲染，可以使用迭代器.map 或者for .. in 进行渲染

rsx! {ul {{(0..3).map(|i| rsx!{ li {"index {i}"}})}}ul {for i in 0..3 {li {"index {i}"}}}
}

条件渲染和循环渲染，通常在业务中变量是动态的，比如通过点击事件更新变量值，而我们直接使用rust声明的变量值在修改时会存在所有权转移的问题，在上文中，点击事件的回调是一个闭包，想要在里面修改，并试图让视图更新，变量的所有权问题导致变得复杂。

在后面的章节 状态管理 中dioxus提供和视图绑定的hooks帮助我们管理视图状态，比如我们通过use_signal来控制状态，然后更新变量，从而重新渲染视图。

let mut show_title = use_signal(|| false);
let handle_click = move |event| {show_title.set(!show_title());
};rsx! {div {if show_title() {h2 { "Welcome to {name}" }}button {onclick: handle_click,"Click me",}}}

加载静态资源

dioxus 提供了assets!()来加载静态资源，比如如图片、css、js、json等。

在目录assets下定义css样式文件style.css，并导入到main.rs中。

static STYLE_CSS: Asset = asset!("/assets/css/style.css");

样式导入后需要将它和组件绑定在一起，通过document::Stylesheet {}引入，和html的link标签作用是一样的。

rsx! {document::Stylesheet {href:STYLE_CSS}// ...
}

加载图片也是同样的使用asset!，让后绑定到元素的属性上。

rsx! {img { src:BG_IMAGE, width:300,height:150}
}

通过/访问项目的根目录，不能直接将资源路径赋值给标签属性，这样无法加载到资源。

通过asset!加载资源还做了一些优化措施，我们也可以通过第二个参数设置来优化资源，比如通过将png转换为avif.

static BG_IMAGE: Asset = asset!("/assets/imgs/dioxus.png",ImageAssetOptions::new().with_avif()
);

可以看到本来500多kb的png图片转换为avif后只有不到100kb了，提升了的图片的加载速度。

状态管理

在rust中有所有权的概念，我们创建一个变量，在一个地方使用后，再在另一个地方使用会报错所有权被转移的错误。为了在其他地方使用我们可以借用变量，只使用它的值；或者调用.clone()来创建一个变量的副本。

dioxus提供了一个hookuse_hook函数处理这种情况，在每一次使用时，都会返回.clone()的值。

let name = use_hook(|| "hboot");

use_hook接受一个闭包函数，用于初始化渲染时创建变量。它不是响应式的，只能用来共享变量值，如果需要响应式变量，则需要使用use_signal。

use_signal的设计来源于Svelte,dioxus的组件和react的组件一样，响应式数据发生变更时，就会重新渲染组件。创建的响应式变量可以通过.set()方法来更新值，

#[component]
fn AppFooter() -> Element {let mut count = use_signal(|| 0);rsx! {button {onclick: move |_| count+=1,"Clicked {count} times"}}
}

对于响应式数据，我们经常会遇到的父子组件共享数据，我们可以将use_signal创建的变量传递给子组件，而对于需要共享更多的组件，跨更深的层级，一直传递不好维护。

dioxus提供两种方式共享数据：Context 和GlobalSignal

Context 局限于有上下级关系的组件，它提供了一个共享的上下文数据。通过use_context_provider创建数据对象，在子孙组件中通过使用use_context来获取消费数据。

我们在App组件中，创建一个Context对象，并在后续组件中使用。

#[component]
fn App() -> Element {use_context_provider(|| "Dioxus-app");rsx! {AppFooter {}}
}

我们提供了一个类型&str的变量值，在AppFooter来获取消费。可以看到我们在获取变量时只定了类型&str,这里是必须的，它帮助在上文环境中找到对应的Context，如果定义了的类型找不到，则会报错。

#[component]
fn AppFooter() -> Element {let app_name: &str = use_context();rsx! {footer {class:"bg-red-100 flex flex-col gap-15px",h2 { "Footer {app_name}" }}}
}

可以配合use_signal创建响应式变量，当变量发生更新时，所有依赖的组件都会重新渲染。

let app_name = use_signal(|| "Dioxus-app");
use_context_provider(|| app_name);

在获取消费时，它的类型变成了Signal<&str>。

GlobalSignal 是一个全局共享的信号，它允许多个组件共享一个变量，并且当变量发生变化时，所有依赖它的组件都会重新渲染。通过Signal::global创建一个全局响应式变量，可以通过.write()方法来更新变量的值。

static APP_NAME: GlobalSignal<&str> = Signal::global(|| "Dioxus-app");

在更新变量时，通过.write() 获取可变引用，然后*解引用指向值存储地址修改值。

*APP_NAME.write() = "Rust";

除了这些本地同步执行的变量初始化，还有异步请求获取的数据，因为是异步的，它会在一段时间后初始化完毕，需要我们记录状态，dioxus提供了use_resource函数来帮助我们管理异步数据状态，它提供了开始、暂停、停止等方法来控制。

use_resource(|| async move {// 异步请求
});

Hooks

dioxus 借鉴了react的hooks概念，提供了一些Hook，用于管理组件状态。在上一章节中使用了几个常用的hook,当然还有一些hook供我们使用

Hook使用规则

dioxus的Hook使用规则同react的hooks限制，只能在组件body中使用，不能在函数或其它语句块中使用。约定俗成使用use_自定义hook。

• 不能在条件语句中使用
• 不能循环语句中使用
• 不能在闭包中使用

响应式变量不能直接在组件体内修改，可以在副作用hook中修改，比如use_effect,它会在组件初始渲染时执行一次；且会收集其中使用到的响应式变量，当变量发生变化时，组件重新渲染，也会再次执行它。

let mut count = use_signal(|| 0);// 不要直接修改
count+=1;// 在副作用hook中修改
use_effect(move || {count+=1;
})

use_hook

use_hook 不是一个响应式声明变量的hook，它提供创建一个值，以便我们可以在组件内部使用它。解决了rust变量的所有权限制。

let count = use_hook(|| 0);

use_signal

use_signal 是一个响应式声明变量的hook，组件会跟踪值的变化，当值变化时，组件会重新渲染。

let mut count = use_signal(||0);use_effect(move || {count+=1;
})

当声明了一个Signal变量后，提供一些方法在不同的情况下来操作这个变量。

// 获取到变量的一个克隆值
let value:i32 = count();// 获取变量值的引用
let value:&i32 = &count.read();// 设置变量的值
count.set(10);// 获取内部值的一个可变引用，然后解引用并修改值
let value:&mut i32 = &mut count.write();
*value = 10;

use_effect

use_effect 是一个副作用可执行的hook函数，在组件初始渲染时执行一次；并且会收集在其内部使用到的响应式变量，当它们发生变化时，组件重新渲染，也会再次执行它。

use_resource

use_resource 是一个执行异步任务的hook函数。

use_memo

use_memo 是一个存储缓存值的hook，由其它变量计算一个可被跟踪的计算值。依赖的响应式变量发生更改时，计算一个新值，判断是否和之前的值相同。

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

更新值和旧值相同时，则不会更新组件。

use_reactive

use_reactive 可以将一个原始数据值转为响应式变量，并跟踪原始值的变化。

可用于父子组件传递数据时，父组件传递了一个响应式变量的值引用，子组件通过use_memo使用了未被跟踪的值，即使值发生变化，use_memo的值也不会更新。

#[component]
fn Child(count: i32) -> Element {let double_count = use_memo(move || count * 2);rsx! {div {"Count: {double_count}"}}
}

为了处理这种情况，通过use_reactive转换为可跟踪的响应式变量。

#[component]
fn Child(count: i32) -> Element {let double_count = use_memo(use_reactive(&count, |val| val * 2));rsx! {div {"Count: {double_count}"}}
}

提供了一个use_reactive!简化书写依赖，可从闭包函数中获取需要依赖跟踪的值。依赖多个变量时，可使用元组()传递。

#[component]
fn Child(count: i32) -> Element {// let double_count = use_memo(use_reactive(&count, |val| val * 2));let double_count = use_memo(use_reactive!(|count| count * 2));rsx! {div {"Count: {double_count}"}}
}

use_context_provider

use_context_provider是一个用于创建一个上下文数据的hook，它允许在组件树中传递数据。子孙组件可以通过use_context进行消费。

最关键的是变量的数据类型，它是根据类型推导出需要获取上下文的哪个变量数据。

use_drop

use_drop 是一个用于清理资源的hook，在组件销毁时执行清理操作。组件默认会清理hooks、副作用函数，也可以自定义清理操作。

use_drop 可以在服务端渲染时被调用。

还提供其它很多不同地hooks 但由于dioxus仍在设计中，未来不确定性会被移除。

引用

• dioxus

• dioxus-doc