纯组件

当返回的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" }
    }
}

注意

如果你有一个内部纯组件，它不使用钩子和其它组件机制，你通常可以将它写成一个返回Html的普通函数，并避免 Yew 的一些开销，这些开销与运行组件生命周期有关。使用表达式语法在html!中渲染它们。

不纯组件

你可能会想，如果一个组件不使用任何全局变量，它是否可以是不纯的，因为它只是一个在每次渲染时调用的函数。这就是下一个主题的切入点 - 钩子