Add memochain example
This commit is contained in:
3 files changed
+55
-3
No files matched your search
@@ -0,0 +1,52 @@
|
|||||||
|
use dioxus::prelude::*;
|
||||||
|
|
||||||
|
fn main() {
|
||||||
|
launch_desktop(app);
|
||||||
|
}
|
||||||
|
|
||||||
|
fn app() -> Element {
|
||||||
|
let mut state = use_signal(|| 0);
|
||||||
|
let mut depth = use_signal(|| 1 as usize);
|
||||||
|
let mut items = use_memo(move || (0..depth()).map(|f| f as _).collect::<Vec<isize>>());
|
||||||
|
|
||||||
|
let a = use_memo(move || state() + 1);
|
||||||
|
|
||||||
|
println!("rendering app");
|
||||||
|
|
||||||
|
rsx! {
|
||||||
|
button { onclick: move |_| state += 1, "Increment" }
|
||||||
|
button { onclick: move |_| depth += 1, "Add depth" }
|
||||||
|
button { onclick: move |_| depth -= 1, "Remove depth" }
|
||||||
|
Child {
|
||||||
|
depth: depth.into(),
|
||||||
|
items: items,
|
||||||
|
state: a,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#[component]
|
||||||
|
fn Child(
|
||||||
|
state: ReadOnlySignal<isize>,
|
||||||
|
items: ReadOnlySignal<Vec<isize>>,
|
||||||
|
depth: ReadOnlySignal<usize>,
|
||||||
|
) -> Element {
|
||||||
|
if depth() == 0 {
|
||||||
|
return None;
|
||||||
|
}
|
||||||
|
|
||||||
|
println!("rendering child: {}", depth());
|
||||||
|
|
||||||
|
let state = use_memo(move || state() + 1);
|
||||||
|
let item = use_memo(move || items()[dbg!(depth()) - 1]);
|
||||||
|
let depth = use_memo(move || depth() - 1);
|
||||||
|
|
||||||
|
rsx! {
|
||||||
|
h3 { "Depth({depth})-Item({item}): {state}"}
|
||||||
|
Child {
|
||||||
|
depth,
|
||||||
|
state,
|
||||||
|
items
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
+2
-2
@@ -39,7 +39,7 @@ fn app() -> Element {
|
|||||||
button { onclick: move |_| count -= 1, "Down low!" }
|
button { onclick: move |_| count -= 1, "Down low!" }
|
||||||
button { onclick: move |_| running.toggle(), "Toggle counter" }
|
button { onclick: move |_| running.toggle(), "Toggle counter" }
|
||||||
button { onclick: move |_| saved_values.push(count().to_string()), "Save this value" }
|
button { onclick: move |_| saved_values.push(count().to_string()), "Save this value" }
|
||||||
button { onclick: move |_| saved_values.write().clear(), "Clear saved values" }
|
button { onclick: move |_| saved_values.clear(), "Clear saved values" }
|
||||||
|
|
||||||
// We can do boolean operations on the current signal value
|
// We can do boolean operations on the current signal value
|
||||||
if count() > 5 {
|
if count() > 5 {
|
||||||
@@ -47,7 +47,7 @@ fn app() -> Element {
|
|||||||
}
|
}
|
||||||
|
|
||||||
// We can cleanly map signals with iterators
|
// We can cleanly map signals with iterators
|
||||||
for value in saved_values.read().iter() {
|
for value in saved_values.iter() {
|
||||||
h3 { "Saved value: {value}" }
|
h3 { "Saved value: {value}" }
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
//! Launch helper macros for fullstack apps
|
//! Launch helper macros for fullstack apps
|
||||||
#![allow(unused)]
|
#![allow(unused)]
|
||||||
use crate::prelude::*;
|
use crate::prelude::*;
|
||||||
use dioxus_lib::prelude::{dioxus_core::AnyProps, *};
|
use dioxus_lib::prelude::*;
|
||||||
use std::sync::Arc;
|
use std::sync::Arc;
|
||||||
|
|
||||||
/// Settings for a fullstack app.
|
/// Settings for a fullstack app.
|
||||||
|
|||||||
Reference in new issue
Block a user