纯组件

每个函数组件都是一个纯函数，它接受一个属性对象并返回一个 Html 对象。纯函数是指在给定相同输入时，总是返回相同输出的函数。

这个例子是一个纯组件。对于给定的属性 is_loading，它总是返回相同的 Html，没有任何副作用。

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

#[derive(Properties, PartialEq)]
pub struct Props {
    pub is_loading: bool,
}

#[function_component]
fn HelloWorld(props: &Props) -> Html {
    if props.is_loading {
        html! { "Loading" }
    } else {
        html! { "Hello world" }
    }
}

备注

如果您有一个内部纯组件，它不使用 hooks 和其他组件机制，您通常可以将其编写为返回 Html 的普通函数，从而避免 Yew 运行组件生命周期相关的一些开销。使用 表达式语法 在 html! 中渲染它们。

非纯组件

您可能想知道，如果组件不使用任何全局变量，那么它是否可以是不“纯”的，因为它只是在每次渲染时调用的固定函数。 这就是下一个主题 - hooks 的用武之地。