2023-08-08 20:06:33 +00:00
|
|
|
use dioxus::prelude::*;
|
|
|
|
|
|
|
|
fn main() {
|
2024-01-31 01:59:57 +00:00
|
|
|
launch(app);
|
2023-08-08 20:06:33 +00:00
|
|
|
}
|
|
|
|
|
2024-01-14 04:51:37 +00:00
|
|
|
fn app() -> Element {
|
2024-01-19 22:19:49 +00:00
|
|
|
let mut signal = use_signal(|| 0);
|
2023-08-08 20:06:33 +00:00
|
|
|
|
2024-02-01 00:33:53 +00:00
|
|
|
use_future(move || async move {
|
2023-08-08 20:06:33 +00:00
|
|
|
loop {
|
|
|
|
tokio::time::sleep(std::time::Duration::from_secs(1)).await;
|
2024-01-19 22:19:49 +00:00
|
|
|
signal += 1;
|
2023-08-08 20:06:33 +00:00
|
|
|
}
|
|
|
|
});
|
|
|
|
|
2024-03-13 17:00:18 +00:00
|
|
|
rsx! {
|
|
|
|
"Parent count: {signal}"
|
|
|
|
Child {
|
|
|
|
non_reactive_prop: signal()
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
2024-01-19 22:19:49 +00:00
|
|
|
|
2024-03-13 17:00:18 +00:00
|
|
|
#[component]
|
|
|
|
fn Child(non_reactive_prop: i32) -> Element {
|
|
|
|
let mut signal = use_signal(|| 0);
|
2024-01-19 22:19:49 +00:00
|
|
|
|
2024-03-13 17:00:18 +00:00
|
|
|
// You can manually specify the dependencies with `use_dependencies` for values that are not reactive like props
|
|
|
|
let computed =
|
|
|
|
use_memo(move || non_reactive_prop + signal()).use_dependencies((&non_reactive_prop,));
|
2023-08-08 20:06:33 +00:00
|
|
|
|
2024-01-16 19:18:46 +00:00
|
|
|
rsx! {
|
2024-03-13 17:00:18 +00:00
|
|
|
button {
|
|
|
|
onclick: move |_| signal += 1,
|
|
|
|
"Child count: {signal}"
|
|
|
|
}
|
|
|
|
|
|
|
|
"Sum: {computed}"
|
2023-08-08 20:06:33 +00:00
|
|
|
}
|
|
|
|
}
|