列表
迭代器
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”（在撰写本文时约为 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 将仅删除第二个 HTML 元素，而不会触及其余元素，因为它可以使用键将它们关联起来。
如果你遇到一个 bug/"特性"，即你在两个组件之间切换，但它们都将 div 作为最高渲染元素。在这种情况下，Yew 会将渲染的 HTML div 作为优化进行重用。如果你需要重新创建该 div 而不是重用它，则可以添加不同的键，它们将不会被重用。