你的第一个组件

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

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

rust 复制代码

fn DogApp(props: DogAppProps) -> Element {
    todo!()
}

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

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 仅在以下两种情况下重新渲染组件：

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

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

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

rust 复制代码

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

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