Evan Almloff
0127501dbf
Improve inline docs * improve incorrect event handler return error message * Improve event handler docs * document the eval functions * document spawn and common spawn errors * fix event handler docs * add notes about how you use attributes and elements in rsx * add doc aliases for attributes and events we rename * add some more aliases for common search terms * don't doc ignore any public examples in core * don't ignore public doc examples in ssr * don't ignore examples in the dioxus package readme * add a warning when you launch without a renderer enabled * fix some outdated element docs * add a bunch of examples to resource * add notes about desktop events * add more docs for use_resource * add on_unimplemented hint to Dependency * fix some unresolved links * add examples to each of the router traits * add not implemented errors for router traits * add an example to the routable trait * expand rsx macro docs * improve memo docs * update the dioxus readme * mention dioxus crate features in the docs * fix a bunch of doc tests * fix html doc tests * fix router doc tests * fix dioxus signals doc tests * fix dioxus ssr doc tests * fix use_future example in the hooks cheat sheet * add a javascript alias for eval * fix hook explanation values * remove unused embed-doc-image dependency
77 lines
2.4 KiB
Rust
77 lines
2.4 KiB
Rust
/*
|
|
a form of use_signal explicitly for map-style collections (BTreeMap, HashMap, etc).
|
|
|
|
Why?
|
|
---
|
|
Traditionally, it's possible to use the "use_state" hook for collections in the React world.
|
|
Adding a new entry would look something similar to:
|
|
|
|
```js
|
|
let (map, set_map) = useState({});
|
|
set_map({ ...map, [key]: value });
|
|
```
|
|
The new value then causes the appropriate update when passed into children.
|
|
|
|
This is moderately efficient because the fields of the map are moved, but the data itself is not cloned.
|
|
However, if you used similar approach with Dioxus:
|
|
|
|
```rust
|
|
let (map, set_map) = use_signal(|| HashMap::new());
|
|
set_map({
|
|
let mut newmap = map.clone();
|
|
newmap.set(key, value);
|
|
newmap
|
|
})
|
|
```
|
|
Unfortunately, you'd be cloning the entire state every time a value is changed. The obvious solution is to
|
|
wrap every element in the HashMap with an Rc. That way, cloning the HashMap is on par with its JS equivalent.
|
|
|
|
Fortunately, we can make this operation even more efficient in Dioxus, leveraging the borrow rules of Rust.
|
|
|
|
This hook provides a memoized collection, memoized setters, and memoized getters. This particular hook is
|
|
extremely powerful for implementing lists and supporting core state management needs for small apps.
|
|
|
|
If you need something even more powerful, check out the dedicated atomic state management Dioxus Dataflow, which
|
|
uses the same memoization on top of the use_context API.
|
|
|
|
Here's a fully-functional todo app using the use_map API:
|
|
```rust
|
|
static TodoList: Component = |cx| {
|
|
let todos = use_map(|| HashMap::new());
|
|
let input = use_signal(|| None);
|
|
|
|
rsx!{
|
|
div {
|
|
button {
|
|
"Add todo"
|
|
onclick: move |_| {
|
|
let new_todo = TodoItem::new(input.contents());
|
|
todos.insert(new_todo.id.clone(), new_todo);
|
|
input.clear();
|
|
}
|
|
}
|
|
button {
|
|
"Clear todos"
|
|
onclick: move |_| todos.clear()
|
|
}
|
|
input {
|
|
placeholder: "What needs to be done?"
|
|
ref: input
|
|
}
|
|
ul {
|
|
{todos.iter().map(|todo| rsx!(
|
|
li {
|
|
key: todo.id
|
|
span { "{todo.content}" }
|
|
button {"x", onclick: move |_| todos.remove(todo.key.clone())}
|
|
}
|
|
))}
|
|
}
|
|
}
|
|
})
|
|
}
|
|
|
|
```
|
|
|
|
*/
|