你的第一个组件

你的第一个组件

现在,我们已经有了一个初始化的 HotDog 应用程序,我们可以开始构建其组件。

什么是组件?

Dioxus中,应用程序由称为组件的单个函数组成,这些组件函数接受一些属性并渲染成一个元素:

rust 复制代码
fn DogApp(props: DogAppProps) -> Element {
    todo!()
}

组件属性

所有组件都需要一个对象来指定该组件可以接受的参数。Dioxus 中的所有 Props 结构体都需要实现 Properties trait ,该特性要求同时实现 ClonePartialEq

rust 复制代码
#[derive(Props, PartialEq, Clone)]
struct DogAppProps {
    breed: String,
}

Dioxus提供了 #[component] 宏,用于简化组件的定义。该宏会隐式的将函数的参数转换为专属于该组件的属性结构。

rust 复制代码
#[component]
fn DogApp(breed: String) -> Element {
    todo!()
}

构建应用程序时,您将经常使用 #[component]。但是在开发库时,我们通常建议使用派生 Props的方式。

不可变属性

如果你熟悉 JavaScript,那么你可能也熟悉像 React 这样的库。Dioxus 与 React 非常相似:如果你了解 React,那么你使用 Dioxus 时会感到非常熟悉。

与 React 类似,Dioxus 的组件是通过调用函数组件来渲染的。在每次渲染时,Dioxus 会对组件的 props 进行 .clone() 操作。这确保了你不会意外修改 props,从而避免因状态管理问题导致的难以追踪的故障。

rust 复制代码
#[component]
fn DogApp(breed: String) -> Element {
    tracing::info!("Rendered with breed: {breed}");

    todo!()
}

Dioxus 提供了使 ·.clone()· 方法调用更高效的类型,因此无需担心性能问题

组件函数会被多次调用

与 React 类似,Dioxus 会在组件生命周期中多次调用你的组件函数。这被称为重新渲染 。在 Dioxus 中,重新渲染的成本极低(远低于 React!)。在大多数情况下,你无需担心重新渲染过于频繁。

当 Dioxus 重新渲染你的组件时,它会将上一次渲染返回的 Element 与当前渲染返回的 Element 进行比较。

例如,当 DogApp 组件的 breed 属性发生变化时,Dioxus 会再次调用 DogApp 函数,并将之前的 Element 与新的 Element 进行比较。

rust 复制代码
#[component]
fn DogApp(breed: String) -> Element {
    rsx! {
        "Breed: {breed}"
    }
}

Dioxus 仅在以下两种情况下重新渲染组件:

  • 当通过 PartialEq 确定 props 发生变化时
  • 当调用 signal.set() 或 signal.write() 等函数时,这些函数会调用 Scope.needs_update()

与 React 不同,Dioxus 的所有组件默认都会进行缓存,这意味着 Dioxus 在决定是否重新渲染组件之前,会先比较 props。作为额外的优化措施,Dioxus 仅比较 RSX 中的动态部分。不包含动态数据的元素不会被检查是否发生变化。

组件组合

在 Dioxus 中,组件通过组合创建应用程序。每个组件都会维护自己的状态并处理自己的更新。这使得将应用程序抽象为不同部分变得容易,甚至可以将应用程序的某些部分作为库分享给他人使用。

要组合组件,我们将使用 rsx!{} 宏来定义应用程序的结构。

rust 复制代码
#[component]
fn App() -> Element {
    rsx! {
        Header {}
        DogApp { breed: "corgi" }
        Footer {}
    }
}

我们将在下一章更深入地介绍 rsx!{} 的内容。

相关推荐
寻月隐君1 小时前
Rust 网络编程实战:用 Tokio 手写一个迷你 TCP 反向代理 (minginx)
后端·rust·github
芳草萋萋鹦鹉洲哦9 小时前
【vue3+tauri+rust】如何实现下载文件mac+windows
windows·macos·rust
寻月隐君17 小时前
Rust 异步编程实践:从 Tokio 基础到阻塞任务处理模式
后端·rust·github
萧曵 丶21 小时前
Rust 中的返回类型
开发语言·后端·rust
浪裡遊1 天前
Sass详解:功能特性、常用方法与最佳实践
开发语言·前端·javascript·css·vue.js·rust·sass
受之以蒙1 天前
Rust & WASM 之 wasm-bindgen 基础:让 Rust 与 JavaScript 无缝对话
前端·笔记·rust
Elixin1 天前
第一章:环境搭建
rust
一只叫煤球的猫1 天前
普通程序员,从开发到管理岗,为什么我越升职越痛苦?
前端·后端·全栈
Pomelo_刘金2 天前
Rust 宣布发布1.88.0
rust
寻月隐君2 天前
告别 Vec!掌握 Rust bytes 库,解锁零拷贝的真正威力
后端·rust·github