官网 | 示例 | 指南 | 中文 | PT-BR | 日本語 | Türkçe | 한국어

使用单一代码库构建 Web、桌面端、移动端以及更多平台的应用。零配置、集成热重载以及基于信号 (Signals) 的状态管理。通过服务器函数添加后端功能，并使用我们的 CLI 进行打包。 ```rust fn app() -> Element { let mut count = use_signal(|| 0); rsx! { h1 { "High-Five counter: {count}" } button { onclick: move |_| count += 1, "Up high!" } button { onclick: move |_| count -= 1, "Down low!" } } } ``` ## ⭐️ 独特功能: - 三行代码即可构建跨平台应用（Web、桌面、移动端、服务器等） - [符合人体工程学的状态管理](https://dioxuslabs.com/blog/release-050)，结合了 React、Solid 和 Svelte 的优点 - 类型安全的路由和服务器函数，由 Rust 强大的编译时能力保证 - 集成 Web、MacOS、Linux 和 Windows 的打包工具 - 还有更多！ [开启 Dioxus 之旅](https://dioxuslabs.com/learn/0.6/). ## 即时热重载只需一个命令 `dx serve`，你的应用即可运行。编辑标记（markup）和样式并立刻看到结果。

## 一流的 Android 和 iOS 支持 Dioxus 是使用 Rust 构建原生移动应用的最快方式。只需运行 `dx serve --platform android`，你的应用就会几秒钟在模拟器或实机设备上运行，并能够直接调用 JNI 和原生 API。

## 为 Web、桌面和移动端打包只需运行 `dx bundle`，你的应用将被构建和打包，并进行最大优化。在 Web 端，得益于 [`.avif` 生成, `.wasm` 压缩, 代码最小化](https://dioxuslabs.com/learn/0.6/guides/assets)等功能， Web 端的构建[体积小于 50kb](https://github.com/ealmloff/tiny-dioxus/) ，桌面/移动端体积小于 5mb。

## 出色的文档我们投入了大量精力来构建清晰、易读且全面的文档。所有 HTML 元素和监听器都附有 MDN 文档，并且我们的文档网站与 Dioxus 本身进行持续集成，以确保文档始终保持最新。请查看 [Dioxus 网站](https://dioxuslabs.com/learn/0.6/) 获取指南、参考、示例代码等。有趣的是：我们使用 Dioxus 网站来测试 Dioxus 的新功能 - [快来看看吧!](https://github.com/dioxusLabs/docsite)

## 社区 Dioxus 是一个社区驱动的项目，拥有非常活跃的 [Discord](https://discord.gg/XgGxMSkvUM) 和 [GitHub](https://github.com/DioxusLabs/dioxus/issues) 社区。我们一直在寻求帮助，乐于回答问题并帮助你入门。[我们的 SDK](https://github.com/DioxusLabs/dioxus-std) 由社区运营，我们甚至有一个 [GitHub 组织](https://github.com/dioxus-community/) 用于那些获得免费升级和支持的最佳 Dioxus crates。

## 全职核心团队 Dioxus 已从一个业余项目发展成为一个小型的全职工程师团队。感谢 FutureWei、Satellite.im 和 GitHub Accelerator 项目的慷慨支持，我们能够全职投入 Dioxus 的开发。我们的长远目标是通过提供高质量的付费企业级工具，使 Dioxus 实现自我维持。如果您的公司有兴趣使用 Dioxus 并希望与我们合作，请联系我们！ ## 支持的平台

Web 端	使用 WebAssembly 直接渲染到 DOM 通过 SSR 进行预渲染并在客户端进行水合 (rehydrate) 简单的 "hello world" 约 50kb，与 React 相当内置的开发服务器和热重载以实现快速迭代
桌面端	使用 Webview 渲染，或实验性地使用 WGPU 或 Freya (Skia) 渲染零配置，只需 `cargo run` 或 `dx serve` 即可构建您的应用完全支持原生系统访问，无需 IPC 支持 MacOS, Linux 和 Windows，或者便携式的 <3mb 的二进制文件
移动端	使用 Webview 渲染，或实验性地使用 WGPU 或 Skia 渲染为 iOS 和 Android 构建 .ipa 和 .apk 文件以最小的开销直接调用 Java 和 Objective-C 从 "hello world" 到在实机设备上运行仅需几秒钟
服务器端渲染	Suspense，水合 (hydration) 和服务器端渲染通过服务器函数快速添加后端功能集成提取器（extractor）, 中间件（middleware）和路由静态站点生成和增量生成

## 运行示例 > 本仓库 main 分支中的示例针对的是 Dioxus 的 git 版本和 CLI。如果您正在寻找适用于 Dioxus 最新稳定版本的示例，请查看 [0.6 分支](https://github.com/DioxusLabs/dioxus/tree/v0.6/examples)。本仓库顶层目录中的示例可以通过以下命令运行： ```sh cargo run --example ``` 但是，我们鼓励你下载 dioxus-cli。如果你在使用 Dioxus 的 git 版本，可以使用以下命令安装相应版本的 CLI： ```sh cargo install --git https://github.com/DioxusLabs/dioxus dioxus-cli --locked ``` 你也使用 CLI 在 Web 平台上运行示例。只需通过如下命令禁用默认的桌面特性并启用 Web 特性： ```sh dx serve --example --platform web -- --no-default-features ``` ## Dioxus 与其他框架的比较我们热爱 Rust 生态系统中的所有框架，并享受着他们所带来的创新。实际上，我们的许多项目都与其他框架共享。例如，我们的 flex-box 库 [Taffy](https://github.com/DioxusLabs/taffy) 被 [Bevy](https://bevyengine.org/), [Zed](https://zed.dev/), [Lapce](https://lapce.dev/), [Iced](https://github.com/iced-rs/iced) 等许多项目使用。 Dioxus 强调以下几个关键点，使其与其他框架有所不同： - **类 React**: 我们依赖组件、props 和 hooks 等概念来构建 UI，我们的状态管理更接近 Svelte 而非 SolidJS。 - **HTML 和 CSS**: 我们完全拥抱 HTML 和 CSS，包括其所有特性和怪癖。 - **渲染器无关**: 得益于[我们快速的虚拟 DOM](https://dioxuslabs.com/blog/templates-diffing)，你可以为任何你想要的平台替换渲染器。 - **协作性**: 只要有可能，我们就会将像 [Taffy](https://github.com/DioxusLabs/taffy), [manganis](https://github.com/DioxusLabs/manganis), [include_mdbook](https://github.com/DioxusLabs/include_mdbook), 和 [blitz](http://github.com/dioxusLabs/blitz) 这样的 crates 分离出来，以便生态系统能够共同成长。 ### Dioxus vs Tauri Tauri 是一个用于构建桌面移动应用的框架，其前端使用基于 Web 的框架（如 React、Vue、Svelte 等）。当你需要进行原生操作时，可以编写 Rust 函数并从前端调用它们。 - **原生 Rust**: Tauri 的架构将您的 UI 限制在 JavaScript 或 WebAssembly。使用 Dioxus，你的 Rust 代码可以在用户的设备上原生运行，在你执行像创建线程、访问文件系统等操作时，无需任何 IPC 桥接。这极大地简化了您的应用架构，使其更易于构建。如果您愿意，也可以使用 Dioxus-Web 作为前端来构建 Tauri 应用。 - **不同的范围**: Tauri 需要支持 JavaScript 及其复杂的构建工具链，这限制了您可以用它做的事情的范围。由于 Dioxus 专注于 Rust，我们能够提供额外的实用工具，如服务器函数、高级打包和原生渲染器。 - **共享 DNA**: 虽然 Tauri 和 Dioxus 是独立的项目，但它们确实共享诸如 Tao 和 Wry 这样的库：由 Tauri 团队维护的窗口和 Webview 库。 ### Dioxus vs Leptos Leptos 是一个用于构建全栈 Web 应用的库，类似于 SolidJS 和 SolidStart。这两个库在 Web 端有着相似的目标，但存在一些关键差异： - **响应式模型**: Leptos 使用信号 (signals) 来驱动响应和渲染，而 Dioxus 仅将信号用于响应。为了管理重新渲染，Dioxus 使用了高度优化的虚拟 DOM 来支持桌面和移动端架构。Dioxus 和 Leptos 都非常快。 - **不同的范围**: Dioxus 为 Web、桌面端、移动端、LiveView 等提供渲染器。我们还维护社区库和跨平台 SDK。 Leptos 更专注于全栈 Web，并拥有一些 Dioxus 所没有的功能，比如 islands、`

` 组件和其他 Web 特有的实用工具. - **不同的 DSL**: Dioxus 使用其自定义的类似 Rust 的 DSL 来构建 UI，而 Leptos 使用类似 HTML 的语法。我们选择这样做是为了保持与 IDE 功能（如代码折叠和语法高亮）的兼容性。通常，Dioxus 的 DSL 倾向于更多的“魔法”，包括字符串的自动格式化和简单 Rust 表达式的热重载。 ```rust // dioxus rsx! { div { class: "my-class", enabled: true, "Hello, {name}" } } // leptos view! {

"Hello " {name}

} ``` ### Dioxus vs Yew Yew 是一个用于构建单页 Web 应用的框架，最初是 Dioxus 的灵感来源。不幸的是，Yew 的架构不支持我们想要的各种功能，因此 Dioxus 应运而生。 - **单页应用**: Yew 专为单页 Web 应用设计，并与 Web 平台紧密绑定。Dioxus 是全栈和跨平台的，使其适用于构建 Web、桌面、移动端和服务器应用。 - **开发者工具**: Dioxus 提供了许多实用工具，如自动格式化、热重载和打包工具。 - **持续支持**: Dioxus 得到非常积极的维护，每天都在添加新功能和修复错误。 ### Dioxus vs egui egui 是一个跨平台 GUI 库，为 Rust 驱动的工具提供支持，比如 [Rerun.io](https://www.rerun.io)。 - **立即模式 (Immediate) vs 保留模式 (Retained)**: egui 设计为每一帧都重新渲染。这更适用于游戏和其他交互式应用，但它不会在帧之间保留样式和布局状态。Dioxus 是一个保留模式的 UI 框架，这意味着 UI 构建一次后，在帧之间进行修改。这使得 Dioxus 能够使用原生的 Web 技术（如 HTML 和 CSS），并具有更好的电池寿命和性能。 - **可定制性**: egui 带来了自己的样式和布局解决方案，而 Dioxus 则希望您使用内置的 HTML 和 CSS。这使得 Dioxus 应用可以使用任何 CSS 库，例如 Tailwind 或 Material UI。 - **状态管理**: egui 的状态管理基于单个全局状态对象。Dioxus 鼓励通过使用组件和 props 来封装状态，使组件更具可复用性。 ### Dioxus vs Iced Iced 是一个受 Elm 启发的跨平台 GUI 库。Iced 使用 WGPU 进行原生渲染，并使用 DOM 节点支持 Web。 - **Elm 状态管理**: Iced 使用 Elm 的状态管理模型，该模型基于消息传递和 reducers。这不同于 Dioxus 的状态管理模型，它有时可能会相当冗长。 - **原生体验**: 由于 Dioxus 使用 Webview 作为其渲染器，它自动获得了原生文本输入、粘贴处理以及其他原生功能（比如无障碍）。Iced 的渲染器目前尚未实现这些功能，使其感觉不那么原生。 - **WGPU**: Dioxus 的 WGPU 渲染器目前还很不成熟，尚未准备好用于生产环境。Iced 的 WGPU 渲染器则成熟得多，并已在生产中使用。这使得某些需要 GPU 访问的应用可以使用 Iced 构建，而目前无法使用 Dioxus 构建。 ### Dioxus vs Electron Dioxus 和 Electron 是两个目标相似但完全不同的项目。Electron 使开发人员能够使用 HTML、CSS 和 JavaScript 等 Web 技术构建跨平台桌面应用。 - **轻量级**: Dioxus 使用系统原生 Webview（或者可选 WGPU 渲染器）来渲染 UI。这使得典型的 Dioxus 应用在 macOS 上大约为 15MB，而 Electron 则为 100MB。Electron 还捆绑了一个嵌入式的 Chromium 实例，它无法像 Dioxus 那样与宿主操作系统共享系统资源。 - **成熟度**: Electron 是一个成熟的项目，拥有庞大的社区和许多工具。相比，Dioxus 与 Electron 相比还很年轻。如果遇到诸如深层链接 (deep-linking) 之类的功能，这些功能需要额外的工作来实现。 ## 贡献 - 查看网站上[关于贡献的部分](https://dioxuslabs.com/learn/0.6/contributing). - 在我们的 [issues](https://github.com/dioxuslabs/dioxus/issues) 上报告问题. - [加入](https://discord.gg/XgGxMSkvUM) Discord 并提问！

## 开源许可此项目基于 [MIT license] 或 [Apache-2 License] 发布。 [apache-2 license]: https://github.com/DioxusLabs/dioxus/blob/master/LICENSE-APACHE [mit license]: https://github.com/DioxusLabs/dioxus/blob/master/LICENSE-MIT 除非您明确声明，否则您有意提交给 Dioxus 的任何贡献，均应按 MIT 或 Apache-2 授权，不附带任何附加条款或条件。