純粋コンポーネント

関数コンポーネントは、ビュー関数が状態を変化させたり、その他の副作用を持たない場合、返されるHtmlがそのpropsから決定論的に導出される場合に、純粋とみなされます。

以下の例は、純粋コンポーネントです。特定の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!でそれらをレンダリングするには、式構文を使用してください。

非純粋コンポーネント

グローバル変数を使用しない場合、コンポーネントは単なるレンダリングごとに呼び出される関数であるため、非純粋になり得るのか疑問に思うかもしれません。ここで次のトピック、フックが登場します。