Dioxus 介绍 [翻译]

Dioxus 介绍 [翻译]

欢迎来到 Dioxus 文档!Dioxus 是一个使用Rust编程语言构建的跨平台应用框架。只需一份代码,即可构建可在网页、桌面和移动设备上运行的应用。

Dioxus的设计旨在让熟悉ReactFlutter 等工具的开发者感到亲切。

rust 复制代码
use dioxus::prelude::*;

pub 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!" }
    }
}

该文档分成三部分:

  • Tutorial 引导你开发第一个 Dioxus app
  • Core Concepts 提供详细的指引, 比如 状态的管理
  • Guides 提供一些概念的指引, 比如 assets, routing, testing

首先,尝试浏览 Tutorial 部分来了解 Dioxus。在进行大型项目之前,我们强烈建议阅读整个基本概念指南概述

本指引加上你已经知道一些 Rust 的基础知识, 如果没有, 请先阅读 Rust 编程语言 以了解 Rust .

什么是 Dioxus ?

Dioxus是一个对开发人员友好的框架,它使开发人员能够使用一份代码让程序在多个平台运行.

在许多方面,DioxusFlutter 相似:我们整合了自己的构建工具,培育生态系统,并提供一种标记语言来声明用户界面。但在关键领域,Dioxus 采取了不同的方法:

  • 应用程序使用 HTML 和 CSS 进行声明,而非自定义样式解决方案
  • 响应式设计灵感源自 React 和 SolidJS 等 Web 框架
  • Dioxus 代码原生运行,无需虚拟机,并支持直接与系统 API 进行 FFI 调用

我们的目标是提供一个更好的 Flutter :更快、更轻量的 native web 。您可以将 Dioxus 视为 Flutter 和 NextJS 的混合体:跨平台应用程序,具有出色的全栈支持。目前,Dioxus 应用程序只能用 Rust 编写,但我们计划未来支持更多语言。

为什么要使用 Dioxus?

我们开发 Dioxus 是因为我们认为当前开发一个app 的标准过于复杂.开发人员需要学习和安装大量的工具来构建他们的app.

我们对Dioxus的愿景是一个快速,灵活的框架,并且学习曲线最少。我们希望开发人员自信地将其应用程序从想法到产出尽可能快地实现。我们认为,更少的工具和更简单的体系结构使开发应用程序变得更加容易。更容易构建的应用程序也更快地发布,并且更有可能成功。

语法和生态系统

Dioxus语法类似于React的JSX 标记,借用 React 的 component和 hook 的概念。所有组件都是 Rust 函数,它定义属性 Properties,用 hook 定义状态, 并返回 Element。我们仅支持 rsx!{} 宏, 这样可以确保您的应用程序自动优化,并具有出色的DevTools支持,例如热加载。

rust 复制代码
#[component]
fn Component(name: String) -> Element {
    let mut count = use_signal(|| 0);

    rsx! {
        h1 { "Hello, {name}" }
        p { "Count: {count}" }
    }
}

Dioxus 设计为易于扩展且在系统 API 之上保持相对轻量级。这意味着当原生 API 不足时,您可以轻松切换到系统 API。在针对网页时,这意味着使用 web-sys,而在 Android 平台上则使用 jni

rust 复制代码
fn PromptModal() {
    #[cfg(web)]
    web_sys::call_web_function();

    #[cfg(android)]
    jni_sys::call_android_function();
}

Dioxus 核心框架涵盖了多个实用工具,这些工具要么设计复杂,要么难以与 dx 工具集集成:

  • app 路由
  • 通过 服务器函数 实现后端集成
  • 集成并优化资源
  • 状态管理(基于信号的响应性)
  • SDK:第一方系统集成

Dioxus 目前的稳定性

Dioxus 尚未达到 * 1.0* 版本。

目前我们处于 0.6 版本,该版本已稳定了大量 API 并大幅提升了开发者体验。在 0.5 版本中我们对状态管理系统 进行了全面改造,而在 0.6 版本中则对工具链进行了全面改造。

未来几个版本(0.7、0.8)可能会对您的应用程序带来兼容性变更。幸运的是,这些计划中的变更仅会影响特定 API 的语法 ,而不会对您的应用程序整体造成影响。每次版本更新时,我们都会提供一份较为全面的迁移指南------例如 0.6 版本

示例,项目,教程等

Dioxus 生态系统正在不断发展,相关示例、项目、教程、书籍及其他学习资源的数量也在持续增长。

我们强烈推荐以下官方资源:

谁在赞助 Dioxus?

Dioxus 的资金来源包括企业赞助、企业支持合同、众筹以及风险投资。我们致力于保持资金来源的健康平衡,以协调未来发展的各种竞争性愿景。我们希望为每个人提供一个比 Flutter 更好的解决方案------不受苹果、Meta 或谷歌的控制------并且我们需要确保 Dioxus 拥有可持续的长期财务未来。

最终,我们希望 Dioxus 能够实现自我维持。这意味着您将来可以选择使用 Dioxus Deploy 部署您的生产应用程序。Dioxus Deploy 的收入将反过来资助 Dioxus 本身的开发。

我们承诺永远保持 Dioxus 的免费和开源状态。您无需向我们支付费用来构建应用程序,我们也不会更改 Dioxus 的许可证。

相关推荐
UXbot7 分钟前
AI原型设计工具评测:从创意到交互式Demo,5款产品全面解析
前端·ui·设计模式·ai·ai编程·原型模式
落魄江湖行8 分钟前
硅基同事埋的坑,我用2小时才填平:Nuxt 4 路由踩坑:可选参数 [[id]] 与 [id] 的区别
前端
一勺菠萝丶14 分钟前
管理后台使用手册在线预览与首次登录引导弹窗实现
java·前端·数据库
军军君0114 分钟前
Three.js基础功能学习十四:智能黑板实现实例一
前端·javascript·css·typescript·前端框架·threejs·智能黑板
小村儿16 分钟前
连载05-Claude Skill 不是抄模板:真正管用的 Skill,都是从实战里提炼出来的
前端·后端·ai编程
xiaotao13123 分钟前
JS new 操作符完整执行过程
开发语言·前端·javascript·原型模式
robch29 分钟前
python3 -m http.server 8001直接启动web服务类似 nginx
前端·nginx·http
吴声子夜歌35 分钟前
ES6——数组的扩展详解
前端·javascript·es6
guhy fighting44 分钟前
new Map,Array.from,Object.entries的作用以及使用方法
开发语言·前端·javascript
大漠_w3cpluscom44 分钟前
CSS 技巧:CSS 单位使用指南
前端