mirror of
https://github.com/yewstack/yew.git
synced 2025-12-08 21:26:25 +00:00
90b4e55ebc
* change suffixes from md to mdx fix broken links for English locale tree shake and update docusaurus add docusaurus ideal image plugin use svg and themed image delete unused static asset * move localized landing page * change GitLocalize project page * nit pick * remove ignore to have the block checked
125 lines
3.5 KiB
Plaintext
125 lines
3.5 KiB
Plaintext
---
|
|
title: "Lists"
|
|
---
|
|
|
|
import Tabs from '@theme/Tabs';
|
|
import TabItem from '@theme/TabItem';
|
|
|
|
## Iterators
|
|
|
|
Yew supports two different syntaxes for building HTML from an iterator.
|
|
|
|
<Tabs>
|
|
<TabItem value="Syntax type 1" label="Syntax type 1">
|
|
|
|
The first is to call `collect::<Html>()` on the final transform in your iterator, which returns a
|
|
list that Yew can display.
|
|
|
|
```rust
|
|
use yew::{html, Html};
|
|
|
|
let items = (1..=10).collect::<Vec<_>>();
|
|
|
|
html! {
|
|
<ul class="item-list">
|
|
{ items.iter().collect::<Html>() }
|
|
</ul>
|
|
};
|
|
```
|
|
|
|
</TabItem>
|
|
<TabItem value="Syntax type 2" label="Syntax type 2">
|
|
|
|
The alternative is to use the `for` keyword, which is not native Rust syntax and instead is used by
|
|
the HTML macro to output the needed code to display the iterator.
|
|
|
|
```rust
|
|
use yew::{html};
|
|
|
|
let items = (1..=10).collect::<Vec<_>>();
|
|
|
|
html! {
|
|
<ul class="item-list">
|
|
{ for items.iter() }
|
|
</ul>
|
|
};
|
|
```
|
|
|
|
</TabItem>
|
|
</Tabs>
|
|
|
|
## Keyed lists
|
|
|
|
A keyed list is a optimized list that has keys on all tags.
|
|
`key` is a special prop provided by Yew which gives an html element a unique identifier which can be used for optimization purposes.
|
|
|
|
:::caution
|
|
|
|
Key has to be unique and must not depend on the order of the list.
|
|
|
|
:::
|
|
|
|
It is always recommended to add keys to lists.
|
|
|
|
Keys can be added by passing a unique value to the special `key` prop:
|
|
|
|
```rust , ignore
|
|
use yew::html;
|
|
|
|
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>
|
|
};
|
|
|
|
```
|
|
|
|
### Performance increases
|
|
|
|
We have [Keyed list](https://github.com/yewstack/yew/tree/master/examples/keyed_list) example that lets you test the performance improvements, but here is rough example of testing:
|
|
|
|
1. Go to [Keyed list](https://github.com/yewstack/yew/tree/master/examples/keyed_list) hosted demo
|
|
2. Add 500 elements.
|
|
3. Disable keys.
|
|
4. Reverse the list.
|
|
5. Look at "The last rendering took Xms" (At the time of writing this it was ~60ms)
|
|
6. Enable keys.
|
|
7. Reverse the list.
|
|
8. Look at "The last rendering took Xms" (At the time of writing this it was ~30ms)
|
|
|
|
So just at the time of writing this, for 500 components its a x2 increase of speed.
|
|
|
|
### Detailed explanation
|
|
|
|
Usually you just need a key on every list item when you iterate and the order of data can change.
|
|
So lets say you iterate through `["bob","sam","rob"]` ended up with html:
|
|
|
|
```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>
|
|
```
|
|
|
|
Then if your list changed to `["bob","rob"]`,
|
|
yew would delete from previous html element with id="rob" and update id="sam" to be id="rob"
|
|
|
|
Now if you had added a key to each element, html would stay the same, but in case where it changed to `["bob","rob"]`, yew would just delete the second html element since it knows which one it is.
|
|
|
|
Keys also help for weird cases where yew reuses html elements.
|
|
|
|
If you ever encounter a bug/"feature" where you switch from one component to another but both have a div as the highest rendered element.
|
|
Yew reuses the rendered html div in those cases as an optimization.
|
|
If you need that div to be recreated instead of reused, then you can add different keys and they wont be reused
|
|
|
|
## Further reading
|
|
|
|
- [TodoMVC](https://github.com/yewstack/yew/tree/master/examples/todomvc)
|
|
- [Keyed list](https://github.com/yewstack/yew/tree/master/examples/keyed_list)
|
|
- [Router](https://github.com/yewstack/yew/tree/master/examples/router)
|