純粹元件

如果回傳的 Html 為確定性的，來自 prop 的衍生，視圖函數不會改變其狀態或具備其他副作用，則 function 元件被視為純粹元件。

以下範例為純粹元件。對於特定的 prop 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! 中渲染它們。

不純元件

您可能想知道如果元件不使用任何全域變數，它是否會是不純的，因為它只是一個每次渲染都會被呼叫的函式。這便是下一個主題的內容 - 掛勾