清單
迭合器
Yew 支援兩種不同的語法，從迭合器建立 HTML。
- 語法類型 1
- 語法類型 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」（撰寫本文時約為 60 毫秒）
- 啟用鍵。
- 反轉清單。
- 查看「最後一次渲染耗時 Xms」（撰寫本文時約為 30 毫秒）
因此，在撰寫本文時，對於 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 只會刪除第二個 HTML 元素並保留其餘部分，因為它可以使用鍵來關聯這些部分。
如果您曾經遇到一個 bug 或「功能」，您從一個元件切換到另一個元件，但兩個元件都有 div 作為最上面渲染的元素。在這些情況下，Yew 會重複使用已渲染的 HTML div 作為最佳化。如果您需要重新建立而不是重複使用該 div，則您可以新增不同的鍵，它們將不會被重複使用。