mirror of
https://github.com/yewstack/yew.git
synced 2025-12-08 21:26:25 +00:00
66 lines
2.0 KiB
Plaintext
66 lines
2.0 KiB
Plaintext
---
|
||
title: '函数组件'
|
||
slug: /concepts/function-components
|
||
---
|
||
|
||
让我们重新回顾一下之前的标语：
|
||
|
||
> Yew 的核心思想是将可重用的 UI 部分所需的所有内容集中在一个地方 - Rust 文件中。
|
||
|
||
我们将通过引入将定义应用程序的逻辑和呈现行为的概念来完善这个陈述："组件"。
|
||
|
||
## 什么是组件？
|
||
|
||
组件是 Yew 的构建块。
|
||
|
||
它们应当：
|
||
|
||
- 以 [Props](./properties.mdx) 的形式接受参数
|
||
- 可以拥有自己的状态
|
||
- 计算用户可见的 HTML 片段（DOM）
|
||
|
||
## Yew 组件的两种风味
|
||
|
||
您当前正在阅读有关函数组件的内容 - 这是在开始使用 Yew 时以及在编写简单的呈现逻辑时编写组件的推荐方式。
|
||
|
||
还有一种更高级但不太容易访问的编写组件的方式 - [结构组件](advanced-topics/struct-components/introduction.mdx)。它们允许非常详细的控制，尽管大多数情况下您不需要那么详细的控制。
|
||
|
||
## 创建函数组件
|
||
|
||
要创建一个函数组件，请将 `#[component]` 属性添加到一个函数中。按照惯例，函数的名称采用 PascalCase，与 `html!` 宏中的普通 html 元素形成对比。
|
||
|
||
```rust
|
||
use yew::{component, html, Html};
|
||
|
||
#[component]
|
||
fn HelloWorld() -> Html {
|
||
html! { "Hello world" }
|
||
}
|
||
|
||
// 然后在其他地方，您可以在 `html!` 中使用组件
|
||
#[component]
|
||
fn App() -> Html {
|
||
html! { <HelloWorld /> }
|
||
}
|
||
```
|
||
|
||
## 组件内部发生了什么
|
||
|
||
在渲染时，Yew 将构建这些组件的虚拟树。它将调用每个（函数）组件的 view 函数来计算 DOM 的虚拟版本（VDOM），您作为库用户将其视为 `Html` 类型。对于上面的示例，这将如下所示：
|
||
|
||
```xhtml
|
||
<App>
|
||
<HelloWorld>
|
||
<p>"Hello world"</p>
|
||
</HelloWord>
|
||
</App>
|
||
```
|
||
|
||
当需要更新时，Yew 将再次调用 view 函数，并将新的虚拟 DOM 与其之前的版本进行协调，并仅将新的/更改的/必要的部分传 播到实际的 DOM。这就是我们所说的 **渲染**。
|
||
|
||
:::note
|
||
|
||
实际上，`Html` 只是 `VNode` 的别名 - 一个虚拟节点。
|
||
|
||
:::
|