純組件

每個函數元件都是一個純函數，它接受一個屬性物件並傳回一個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 的用武之地。