🐰

Dioxus (Rustでfrontend) 入門3

2022/10/23に公開

Rust

プロパティとインラインプロパティ

Dioxusのコンポーネントは Propsを引数にとりElementを返す関数です。

マニュアルは以下にあります。

#[derive(PartialEq, Props)]
struct VoteButtonProps {
    score: i32
}

fn VoteButton(cx: Scope<VoteButtonProps>) -> Element {
    cx.render(rsx!{
        div {
            div { "+" }
            div { "{cx.props.score}"}
            div { "-" }
        }
    })
}

Propsをderiveに設定することで、StructをPropsとして、コンポーネントに渡せるようになります。

マニュアルにも記載がありますが、大きな文字列を持つPropの場合借用として渡す方法が有用です。
その場合には <'a> のアノテーションをつけ、ライフタイムを明示します。

#[derive(Props)]
struct TitleCardProps<'a> {
    title: &'a str,
}

fn TitleCard<'a>(cx: Scope<'a, TitleCardProps<'a>>) -> Element {
    cx.render(rsx!{
        h1 { "{cx.props.title}" }
    })
}

インラインProps

#[inline_props]
fn TitleCard(cx: Scope, title: String) -> Element {
    cx.render(rsx!{
        h1 { "{title}" }
    })
}

inline_props マクロを用いると上記のような引数でPropsを定義することができます。
ただ、これはマクロで、下記のコードと同等になります。

#[derive(Props, PartialEq)]
struct TitleCardProps {
    title: String,
}

fn TitleCard(cx: Scope<TitleCardProps>) -> Element {
    cx.render(rsx!{
        h1 { "{cx.props.title}" }
    })
}

メモ化

Dioxusではより効率的にレンダリングするために、メモ化(Memoization)を使用します。
これはコンポーネントのPropsに渡された内容が変更されたとき再レンダリングを行うかどうか判断するためのプロセスです。
コンポーネントのプロパティが変更されても出力に影響がない場合、コンポーネントを再レンダリングする必要がない場合に、レンダリングを抑制できるため時間を節約できます。

コンポーネントが再レンダリングを必要とするか、同じままかどうかを判断するために、PartialEqを使用します。このため、deriveにPartialEqを設定する必要があります。

また、この再レンダリングを必要とするかどうかを自作の関数で判定することも可能ですが、手動で判定する場合相当注意深くコーディングを行う必要があります。

プロパティとインラインプロパティ

インラインProps

メモ化

Discussion