函数组件

让我们重新审视一下之前的陈述

Yew 的核心思想是将可重用 UI 所需的一切都保存在一个地方 - rust 文件中。

通过引入一个概念来定义应用程序的逻辑和呈现行为，我们将完善此语句：“组件”。

什么是组件？

组件是 Yew 的构建块。

它们

• 以 Props 的形式获取参数
• 可以有自己的状态
• 计算对用户可见的 HTML 片段（DOM）

Yew 组件的两种类型

你当前正在阅读有关函数组件的内容 - 当使用 Yew 时编写组件的推荐方式，以及编写简单的呈现逻辑时。

有一种更高级但不太容易访问的方式来编写组件 - 结构组件。它们允许非常详细的控制，尽管大多数时候你不需要这种级别的细节。

创建函数组件

要创建函数组件，请将 #[function_component] 属性添加到函数。按照惯例，该函数以 PascalCase 命名，就像所有组件一样，以将其在 html! 宏内部对普通 html 元素的使用进行对比。

use yew::{function_component, html, Html};

#[function_component]
fn HelloWorld() -> Html {
    html! { "Hello world" }
}

// Then somewhere else you can use the component inside `html!`
#[function_component]
fn App() -> Html {
    html! { <HelloWorld /> }
}

组件发生了什么

在渲染时，Yew 将构建这些组件的虚拟树。它将调用每个（函数）组件的视图函数来计算 DOM 的虚拟版本（VDOM），你作为库用户将其视为 Html 类型。对于前面的示例，它将如下所示

<App>
  <HelloWorld>
    <p>"Hello world"</p>
  </HelloWord>
</App>

当需要更新时，Yew 将再次调用视图函数，并将新的虚拟 DOM 与其以前的版本进行协调，并且仅将新的/更改的/必要的部件传播到实际 DOM。这就是我们所说的渲染。

注意

在幕后，Html 只是 VNode（虚拟节点）的别名。