mirror of
https://github.com/yewstack/yew.git
synced 2025-12-08 21:26:25 +00:00
35 lines
1.2 KiB
Plaintext
35 lines
1.2 KiB
Plaintext
---
|
|
title: '纯组件'
|
|
---
|
|
|
|
每个函数组件都是一个[纯](https://zh.wikipedia.org/wiki/%E7%BA%AF%E5%87%BD%E6%95%B0)函数，它接受一个属性对象并返回一个 `Html` 对象。纯函数是指在给定相同输入时，总是返回相同输出的函数。
|
|
|
|
这个例子是一个纯组件。对于给定的属性 `is_loading`，它总是返回相同的 `Html`，没有任何副作用。
|
|
|
|
```rust
|
|
use yew::{Properties, component, Html, html};
|
|
|
|
#[derive(Properties, PartialEq)]
|
|
pub struct Props {
|
|
pub is_loading: bool,
|
|
}
|
|
|
|
#[component]
|
|
fn HelloWorld(props: &Props) -> Html {
|
|
if props.is_loading {
|
|
html! { "Loading" }
|
|
} else {
|
|
html! { "Hello world" }
|
|
}
|
|
}
|
|
```
|
|
|
|
:::note
|
|
如果您有一个内部纯组件，它不使用 hooks 和其他组件机制，您通常可以将其编写为返回 `Html` 的普通函数，从而避免 Yew 运行组件生命周期相关的一些开销。使用 [表达式语法](concepts/html/literals-and-expressions.mdx#expressions) 在 `html!` 中渲染它们。
|
|
:::
|
|
|
|
## 非纯组件
|
|
|
|
您可能想知道，如果组件不使用任何全局变量，那么它是否可以是不“纯”的，因为它只是在每次渲染时调用的固定函数。
|
|
这就是下一个主题 - [hooks](./hooks) 的用武之地。
|