dioxus

<p> <p align="center" > <img src="https://raw.githubusercontent.com/DioxusLabs/dioxus/main/notes/header-light.svg#gh-light-mode-only" > <img src="https://raw.githubusercontent.com/DioxusLabs/dioxus/main/notes/header-dark.svg#gh-dark-mode-only" > <a href="https://dioxuslabs.com"> <img src="https://raw.githubusercontent.com/DioxusLabs/dioxus/main/notes/dioxus_splash_8.avif"> </a> </p> </p> <div align="center">  <a href="https://crates.io/crates/dioxus"> <img src="https://yellow-cdn.veclightyear.com/835a84d5/cd20050e-bf79-4061-befa-0beb219eb5ef.svg?style=flat-square" alt="Crates.io版本" /> </a>  <a href="https://crates.io/crates/dioxus"> <img src="https://yellow-cdn.veclightyear.com/835a84d5/af254adc-2571-4d24-89a2-eda9a8577777.svg?style=flat-square" alt="下载量" /> </a>  <a href="https://docs.rs/dioxus"> <img src="https://yellow-cdn.veclightyear.com/835a84d5/ad12a90f-5952-4b83-bd52-89bd55530add.svg?style=flat-square" alt="docs.rs文档" /> </a>  <a href="https://github.com/jkelleyrtp/dioxus/actions"> <img src="https://yellow-cdn.veclightyear.com/835a84d5/fbf91d97-b4c2-4ca6-93b5-dbebc171ea6b.svg" alt="CI状态" /> </a>  <a href="https://dioxuslabs.com/awesome"> <img src="https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg" alt="Awesome页面" /> </a>  <a href="https://discord.gg/XgGxMSkvUM"> <img src="https://yellow-cdn.veclightyear.com/835a84d5/83a16ac8-237d-4029-b772-e3290c394f0f.svg?logo=discord&style=flat-square" alt="Discord链接" /> </a> </div> <div align="center"> <h3> <a href="https://dioxuslabs.com"> 网站 </a> <span> | </span> <a href="https://github.com/DioxusLabs/dioxus/tree/main/examples"> 示例 </a> <span> | </span> <a href="https://dioxuslabs.com/learn/0.5/guide"> 指南 </a> <span> | </span> <a href="https://github.com/DioxusLabs/dioxus/blob/main/translations/zh-cn/README.md"> 中文 </a> <span> | </span> <a href="https://github.com/DioxusLabs/dioxus/blob/main/translations/pt-br/README.md"> PT-BR </a> <span> | </span> <a href="https://github.com/DioxusLabs/dioxus/blob/main/translations/ja-jp/README.md"> 日本語 </a> <span> | </span> <a href="https://github.com/DioxusLabs/dioxus/blob/main/translations/tr-tr"> Türkçe </a> </h3> </div> <br> <br>

使用单一代码库构建Web、桌面和移动应用等。零配置设置，集成热重载，以及基于信号的状态管理。通过服务器函数添加后端功能，并使用我们的CLI进行打包。

fn app() -> Element {
    let mut count = use_signal(|| 0);

    rsx! {
        h1 { "击掌计数器: {count}" }
        button { onclick: move |_| count += 1, "击上!" }
        button { onclick: move |_| count -= 1, "击下!" }
    }
}

⭐️ 独特特性：

三行代码实现跨平台应用（Web、桌面、移动、服务器等）
人体工程学状态管理结合了React、Solid和Svelte的精华
性能极高，由Rust最快的wasm框架sledgehammer驱动
集成打包工具，可部署到Web、macOS、Linux和Windows
更多特性！阅读Dioxus导览。

即时热重载

只需一个命令dx serve，您的应用就能运行。编辑标记和样式，实时查看结果。Rust代码的热重载尚未完全支持，但可以通过hot-lib-reloader实现。

用于部署Web和桌面应用的打包工具

只需运行dx bundle，您的应用就会以最大化优化进行构建和打包。在Web上，利用.avif生成、.wasm压缩、代码压缩等优势。构建小于50kb的Web应用和小于15MB的桌面/移动应用。

出色的文档

我们投入了大量精力来构建清晰、可读且全面的文档。所有HTML元素和监听器都有MDN文档，我们的文档站点与Dioxus本身进行持续集成，以确保文档始终保持最新。查看Dioxus网站获取指南、参考、示例等。有趣的是：我们使用Dioxus网站作为新Dioxus功能的测试平台 - 来看看吧！

注重开发者体验

Dioxus优先考虑开发者体验，我们在端到端工具链上投入了大量精力。我们开发了一个VSCode扩展，可以自动格式化RSX代码、将HTML转换为RSX等。我们还构建了一个功能强大的CLI，支持创建新应用、启动服务和跨平台打包，未来还计划支持部署。

社区

Dioxus是一个社区驱动的项目，拥有非常活跃的Discord和GitHub社区。我们一直在寻求帮助，也很乐意回答问题并帮助您入门。我们的SDK由社区运营，我们甚至有一个GitHub组织来管理最佳的Dioxus crate，它们可以获得免费升级和支持。

全职核心团队

Dioxus从一个业余项目发展成为一个由全职工程师组成的小团队。感谢FutureWei、Satellite.im和GitHub加速器计划的慷慨支持，我们能够全职致力于Dioxus的开发。我们的长期目标是通过提供付费的高质量企业工具，使Dioxus实现自我可持续发展。如果您的公司有兴趣采用Dioxus并希望与我们合作，请联系我们！

支持的平台

<div align="center"> <table style="width:100%"> <tr> <td> <b>网页</b> <br /> <em>一级支持</em> </td> <td> <ul> <li>使用WebAssembly直接渲染到DOM</li> <li>使用SSR预渲染并在客户端重新激活</li> <li>"Hello World"示例约50kb，与React相当</li> <li>内置开发服务器和热重载，便于快速迭代</li> </ul> </td> </tr> <tr> <td> <b>全栈</b> <br /> <em>一级支持</em> </td> <td> <ul> <li>支持Suspense、水合和服务器端渲染</li> <li>通过服务器函数快速添加后端功能</li> <li>提供提取器、中间件和路由集成</li> <li>兼容桌面和移动平台！</li> </ul> </td> </tr> <tr> <td> <b>桌面</b> <br /> <em>一级支持</em> </td> <td> <ul> <li>使用Webview渲染，或实验性地使用WGPU或<a href="https://freyaui.dev">Freya</a>（skia）</li> <li>零配置设置。只需`cargo run`或`dx serve`即可构建应用</li> <li>无需IPC即可完全支持本地系统访问</li> <li>支持macOS、Linux和Windows。可移植的3MB以下二进制文件</li> </ul> </td> </tr> <tr> <td> <b>实时视图</b> <br /> <em>一级支持</em> </td> <td> <ul> <li>在服务器端完全渲染应用或单个组件</li> <li>与Axum和Warp等流行Rust框架集成</li> <li>极低延迟，能够支持10,000+同时运行的应用</li> </ul> </td> </tr> <tr> <td> <b>移动</b> <br /> <em>二级支持</em> </td> <td> <ul> <li>使用Webview渲染，或实验性地使用WGPU或Skia</li> <li>支持iOS和Android</li> <li>目前处于实验阶段，2024年将有大量改进</li> </ul> </td> </tr> <tr> <td> <b>终端</b> <br /> <em>二级支持</em> </td> <td> <ul> <li>直接在终端中渲染应用，类似于<a href="https://github.com/vadimdemedes/ink">ink.js</a></li> <li>采用浏览器熟悉的flexbox和CSS模型</li> <li>内置文本输入、按钮和焦点系统等小部件</li> </ul> </td> </tr> </table> </div>

运行示例

可以使用cargo run --example <example>运行此仓库顶层的示例。然而，我们建议您下载dioxus-cli并使用dx serve运行示例，因为许多示例也支持网页。在运行网页版时，您需要修改Cargo.toml以禁用默认的桌面功能，或使用

Dioxus与其他框架的比较

我们喜爱所有框架，并乐于看到Rust生态系统的创新。事实上，我们的许多项目与其他框架共享。例如，我们的弹性盒子布局库Taffy被Bevy、Zed、Lapce、Iced等多个项目使用。

Dioxus强调几个关键点，使其与其他框架不同：

类React风格：我们依靠组件、属性和钩子等概念构建UI，状态管理更接近Svelte而非SolidJS。
HTML和CSS：我们完全依赖HTML和CSS，包括其所有特性。
渲染器无关：得益于我们快速的虚拟DOM，您可以为任何平台替换渲染器。
协作性：我们尽可能将Taffy、magnanis、include_mdbook和blitz等库独立出来，以促进生态系统的共同发展。

Dioxus vs Tauri

Tauri是一个用于构建桌面（即将支持移动）应用的框架，其前端使用基于Web的框架如React、Vue、Svelte等编写。当需要执行原生操作时，可以编写Rust函数并从前端调用。

原生Rust：Tauri的架构将UI限制在JavaScript或WebAssembly。使用Dioxus，您的Rust代码可以直接在用户机器上运行，让您能够执行线程创建、文件系统访问等操作，无需IPC桥接。这大大简化了应用架构，使构建更加容易。如果愿意，您可以使用Dioxus-Web作为前端来构建Tauri应用。
不同范围：Tauri需要支持JavaScript及其复杂的构建工具，限制了可做的事情。由于Dioxus专注于Rust，我们能够提供额外的实用工具，如服务器函数、高级打包和原生渲染器。
共享基因：虽然Tauri和Dioxus是独立项目，但它们共享了Tao和Wry等库：这些是由Tauri团队维护的窗口和网页视图库。

Dioxus vs Leptos

Leptos是一个用于构建全栈Web应用的库，类似于SolidJS和SolidStart。这两个库在Web方面有相似的目标，但存在几个关键区别：

响应式模型：Leptos使用信号作为其底层响应式机制，而Dioxus选择虚拟DOM和重新渲染。理论上信号更高效，但实际上，Dioxus的虚拟DOM几乎不进行实际的差异比较（得益于我们受块级DOM启发的模板），并且实际上比Leptos更快。
控制流：由于Leptos使用信号实现响应式，您受限于Leptos的原语来处理for循环和if语句。如果处理不当，您的应用可能失去响应性，导致难以调试的UI问题。使用Dioxus，您可以使用迭代器、常规Rust for循环和if语句，同时保持应用的响应性。实际上，Dioxus中插入计数器到列表的组件可能如下所示：

fn Counters() -> Element {
    let mut counters = use_signal(|| vec![0; 10]);

    rsx! {
        button { onclick: move |_| counters.push(counters.len()), "添加计数器" }
        ul {
            for idx in 0..counters.len() {
                li {
                    button { onclick: move |_| counters.write()[idx] += 1, "{counters.index(idx)}" }
                    button { onclick: move |_| { counters.remove(idx); }, "移除" }
                }
            }
        }
    }
}

而在Leptos中，您会使用<For>组件：

fn Counters() -> impl IntoView {
    let counters = RwSignal::new(vec![0; 10]);

    view! {
        <button on:click=move |_| counters.update(|n| n.push(n.len()))>"添加计数器"</button>
        <For
            each=move || 0..counters.with(Vec::len)
            key=|idx| *idx
            let:idx
        >
            <li>
                <button on:click=move |_| counters.update(|n| n[idx] += 1)>
                    {Memo::new(move |_| counters.with(|n| n[idx]))}
                </button>
                <button on:click=move |_| counters.update(|n| { n.remove(idx); })>
                    "移除"
                </button>
            </li>
        </For>
    }
}

Copy 状态：Dioxus 0.1 到 0.4 版本依赖于生命周期来放宽 Rust 借用检查器的规则。这对事件处理程序很有效，但在异步方面存在困难。在 Dioxus 0.5 中，我们借鉴了 Leptos 的做法，切换到了 Copy 状态模型。
不同的范围：Dioxus 为 Web、桌面、移动、LiveView 等提供渲染器。我们还维护社区库和跨平台 SDK。这项工作的范围很大，这意味着我们历来发布速度比 Leptos 慢。Leptos 专注于全栈 Web 开发，具有 Dioxus 所没有的功能，如基于 <Suspense /> 的流式 HTML、岛屿架构、<Form /> 组件和其他特定于 Web 的功能。通常，使用 Leptos 构建的 Web 应用会有更小的占用空间。
不同的 DSL：虽然两个框架都针对 Web，但 Dioxus 使用自己的类 Rust DSL 来构建 UI，而 Leptos 使用更类似 HTML 的语法。我们选择这种方式是为了保持与 IDE 功能（如代码折叠和语法高亮）的兼容性。总的来说，Dioxus 在其 DSL 中倾向于更多的"魔法"。例如，Dioxus 会自动为你格式化字符串，而 Leptos 可以将字符串分割为静态和动态段。

// dioxus
rsx! {
  div { class: "my-class", enabled: true, "Hello, {name}" }
}

// leptos
view! {
  <div class="my-class" enabled={true}>
    "Hello "
    {name}
  </div>
}

Dioxus vs Yew

Yew 是一个用于构建单页 Web 应用的框架，最初是 Dioxus 的灵感来源。不幸的是，Yew 的架构不支持我们想要的各种功能，因此 Dioxus 应运而生。

单页应用：Yew 专为单页 Web 应用设计，与 Web 平台紧密相连。Dioxus 是全栈和跨平台的，适用于构建 Web、桌面、移动和服务器应用。
开发者工具：Dioxus 提供了许多实用工具，如自动格式化、热重载和打包器。
持续支持：Dioxus 得到积极维护，每天都在添加新功能和修复 bug。

Dioxus vs egui

egui 是一个跨平台的 Rust GUI 库，为 Rerun.io 等工具提供支持。

即时 vs 保留：egui 设计为每帧重新渲染。这适用于游戏和其他交互式应用，但它不会在帧之间保留样式和布局状态。Dioxus 是一个保留式 UI 框架，意味着 UI 只构建一次，然后在帧之间进行修改。这使得 Dioxus 能够使用原生 Web 技术如 HTML 和 CSS，实现更好的电池续航和性能。
可定制性：egui 带有自己的样式和布局解决方案，而 Dioxus 期望你使用内置的 HTML 和 CSS。这使得 Dioxus 应用可以使用任何 CSS 库，如 Tailwind 或 Material UI。
状态管理：egui 的状态管理基于单一全局状态对象。Dioxus 通过使用组件和属性来鼓励状态的封装，使组件更易复用。

Dioxus vs Iced

Iced 是一个受 Elm 启发的跨平台 GUI 库。Iced 使用 WGPU 进行原生渲染，并支持使用 DOM 节点的 Web 渲染。

Elm 状态管理：Iced 使用 Elm 的状态管理模型，基于消息传递和归约器。这与 Dioxus 的状态管理模型simply不同，有时可能会比较冗长。
原生体验：由于 Dioxus 使用 webview 作为渲染器，它自动获得原生文本输入、粘贴处理和其他原生功能如无障碍性。Iced 的渲染器目前还没有实现这些功能，使其感觉不太原生。
WGPU：Dioxus 的 WGPU 渲染器目前还不太成熟，尚未准备好用于生产环境。Iced 的 WGPU 渲染器更加成熟，已在生产环境中使用。这使得某些需要 GPU 访问的应用类型可以用 Iced 构建，而目前无法用 Dioxus 构建。

Dioxus vs Electron

Dioxus 和 Electron 是两个完全不同的项目，但目标相似。Electron 使开发者能够使用 Web 技术如 HTML、CSS 和 JavaScript 构建跨平台桌面应用。

轻量级：Dioxus 使用系统原生 WebView（或可选的 WGPU 渲染器）来渲染 UI。这使得典型的 Dioxus 应用在 macOS 上约为 15MB，相比之下 Electron 约为 100MB。Electron 还附带嵌入式 Chromium 实例，无法像 Dioxus 那样与主机操作系统共享系统资源。
成熟度：Electron 是一个成熟的项目，拥有庞大的社区和大量工具。相比之下，Dioxus 还相当年轻。预计在实现深度链接等功能时需要额外的工作。