リスト
イテレータ
Yew は、イテレータから HTML を構築するための 2 つの異なる構文をサポートしています。
- Syntax type 1
- Syntax type 2
最初の方法は、イテレータの最終変換で collect::<Html>()
を呼び出すことで、Yew が表示できるリストを返します。
use yew::prelude::*;
let items = (1..=10).collect::<Vec<_>>();
html! {
<ul class="item-list">
{ items.iter().collect::<Html>() }
</ul>
};
もう一つの方法は、for
キーワードを使用することです。これはネイティブの Rust 構文ではなく、HTML マクロによってイテレータを表示するために必要なコードを出力します。
use yew::prelude::*;
let items = (1..=10).collect::<Vec<_>>();
html! {
<ul class="item-list">
{ for items.iter() }
</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>
};
パフォーマンスの最適化
キー付きリストのパフォーマンス向上をテストするための例があります。以下は簡単なテスト手順です:
- オンラインデモにアクセスします。
- 500個の要素を追加します。
- キーを無効にします。
- リストを反転します。
- "最後のレンダリングにかかった時間 Xms" を確認します(この記事の執筆時点では約60ms)。
- キーを有効にします。
- 再度リストを反転します。
- "最後のレンダリングにかかった時間 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 を再利用せずに再作成する必要がある場合は、異なるキーを追加することで再利用されなくなります。