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-15 16:54:09 +00:00
|
|
|
// You can manually specify the dependencies with `use_reactive` for values that are not reactive like props
|
|
|
|
let computed = use_memo(use_reactive!(
|
|
|
|
|(non_reactive_prop,)| non_reactive_prop + signal()
|
|
|
|
));
|
|
|
|
use_effect(use_reactive!(|(non_reactive_prop,)| println!(
|
|
|
|
"{}",
|
|
|
|
non_reactive_prop + signal()
|
|
|
|
)));
|
|
|
|
let fut = use_resource(use_reactive!(|(non_reactive_prop,)| async move {
|
|
|
|
tokio::time::sleep(std::time::Duration::from_secs(1)).await;
|
|
|
|
non_reactive_prop + signal()
|
|
|
|
}));
|
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}"
|
2024-03-15 16:54:09 +00:00
|
|
|
|
|
|
|
"{fut():?}"
|
2023-08-08 20:06:33 +00:00
|
|
|
}
|
|
|
|
}
|