本文へスキップ
バージョン: 0.21

リスト

イテレーター​

Yewは、イテレーターからHTMLを構築するための2つの異なる構文をサポートしています。

最初の方法は、イテレーターの最終的な変換で`collect::()`を呼び出すことです。これにより、Yewが表示できるリストが返されます。

use yew::prelude::*;

let items = (1..=10).collect::<Vec<_>>();

html! {
    <ul class="item-list">
        { items.iter().collect::<Html>() }
    </ul>
};

キー付きリスト​

キー付きリストは、**すべての**子要素にキーを持つ最適化されたリストです。`key`はYewによって提供される特別なプロパティで、HTML要素またはコンポーネントに一意の識別子を付与し、Yew内部の最適化のために使用されます。

注意

キーは、HTMLの`id`のグローバルな一意性とは対照的に、各リスト内で一意である必要があります。リストの順序に依存してはなりません。

リストにキーを追加することを常に推奨します。

キーは、一意の`String`、`str`、または整数を特別な`key`プロパティに渡すことによって追加できます。

use yew::prelude::*;

let names = vec!["Sam","Bob","Ray"]

html! {
    <div id="introductions">
        {
            names.into_iter().map(|name| {
                html!{<div key={name}>{ format!("Hello, I'am {}!",name) }</div>}
            }).collect::<Html>()
        }
    </div>
};

パフォーマンスの向上​

パフォーマンスの向上のテストができるキー付きリストの例がありますが、概要を以下に示します。

  1. キー付きリストのホストされたデモにアクセスしてください。
  2. 500個の要素を追加します。
  3. キーを無効にします。
  4. リストを反転します。
  5. "最後のレンダリングにかかった時間: Xms"を確認します（執筆時点では約60msでした）。
  6. キーを有効にします。
  7. リストを反転します。
  8. "最後のレンダリングにかかった時間: Xms"を確認します（執筆時点では約30msでした）。

したがって、執筆時点では、500個のコンポーネントに対して、速度が2倍向上しています。

詳細な説明​

通常、イテレートする際に、データの順序が変更される可能性がある場合は、すべてのリストアイテムにキーが必要です。これは、リストを再レンダリングする際の調整プロセスを高速化するために使用されます。

キーがない場合、`["bob", "sam", "rob"]`を反復処理すると、以下のHTMLになります。

<div id="bob">My name is Bob</div>
<div id="sam">My name is Sam</div>
<div id="rob">My name is rob</div>

次のレンダリングでリストが`["bob", "rob"]`に変更された場合、Yewはid="rob"の要素を削除し、id="sam"をid="rob"に更新できます。

各要素にキーを追加した場合、最初のHTMLは同じになりますが、変更されたリスト`["bob", "rob"]`によるレンダリング後、Yewはキーを使用して関連付けることができるため、2番目のHTML要素のみを削除し、残りの要素はそのままにします。

あるコンポーネントから別のコンポーネントに切り替える場合に、両方ともdivを最高レベルのレンダリング要素として持つバグ/「機能」が発生した場合、Yewは最適化としてレンダリングされたHTML divを再利用します。そのdivを再利用するのではなく再作成する必要がある場合は、異なるキーを追加すると、再利用されなくなります。

参考資料​