123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119 |
- use std::collections::HashMap;
- use dioxus_core::prelude::*;
- /*
- a form of use_state 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_state(cx, || 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: FC<()> = |cx| {
- let todos = use_map(cx, || HashMap::new());
- let input = use_ref(|| None);
- cx.render(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())}
- }
- ))}
- }
- }
- })
- }
- ```
- */
- fn use_map() {}
- // a form of "use_state" that allows collection memoization
- // Elements are received as Rc<T> in case the underlying collection is shuffled around
- // Setters/getters can be generated
- fn use_collection<'a, T: Collection>(
- cx: &impl Scoped<'a>,
- f: impl Fn() -> T,
- ) -> CollectionHandle<'a, T> {
- cx.use_hook(
- || {},
- |h| {
- //
- CollectionHandle {
- _p: Default::default(),
- }
- },
- |h| {},
- )
- }
- struct CollectionMemo {}
- struct CollectionHandle<'a, T: Collection> {
- _p: std::marker::PhantomData<&'a T>,
- }
- trait Collection {}
- impl<K, V> Collection for std::collections::HashMap<K, V> {}
- struct MapCollection<K, V> {
- inner: HashMap<K, V>,
- }
- impl<K, V> MapCollection<K, V> {
- fn set(&self, key: K, val: V) {
- //
- }
- }
|