dioksus信号

dioksus信号是一个具有本地订阅的数据便捷运行时。

可复制数据

所有信号都实现了Copy，即使内部值没有实现Copy。这使得将任何数据移动到futures或子组件变得容易。

use dioxus::prelude::*;
use dioxus_signals::*;

#[component]
fn App() -> Element {
    let signal = use_signal(|| "hello world".to_string());

    spawn(async move {
        // signal is Copy even though String is not copy
        print!("{signal}");
    });

    rsx! {
        "{signal}"
    }
}

本地订阅

只有当你在组件中读取信号时，信号才会订阅组件。它永远不会在读取未来或事件处理程序中的数据时订阅组件。

use dioxus::prelude::*;
use dioxus_signals::*;

#[component]
fn App() -> Element {
    // Because signal is never read in this component, this component will not rerun when the signal changes
    let mut signal = use_signal(|| 0);

    rsx! {
        button {
            onclick: move |_| {
                signal += 1;
            },
            "Increase"
        }
        for id in 0..10 {
            Child {
                signal,
            }
        }
    }
}

#[derive(Props, Clone, PartialEq)]
struct ChildProps {
    signal: Signal<usize>,
}

fn Child(props: ChildProps) -> Element {
    // This component does read from the signal, so when the signal changes it will rerun
    rsx! {
        "{props.signal}"
    }
}

由于订阅是在读取（而不是创建）数据时发生的，因此您可以通过正常的上下文API提供信号

use dioxus::prelude::*;
use dioxus_signals::*;

#[component]
fn App() -> Element {
    // Because signal is never read in this component, this component will not rerun when the signal changes
    use_context_provider(|| Signal::new(0));

    rsx! {
        Child {}
    }
}

#[component]
fn Child() -> Element {
    let signal: Signal<i32> = use_context();
    // This component does read from the signal, so when the signal changes it will rerun
    rsx! {
        "{signal}"
    }
}

计算数据

除了组件中的本地订阅之外，dioksus-signals 还提供了一种推导具有本地订阅的数据的方法。

当钩子内的任何信号更改时，use_memo钩子才会重新运行

use dioxus::prelude::*;
use dioxus_signals::*;

#[component]
fn App() -> Element {
    let mut signal = use_signal(|| 0);
    let doubled = use_memo(move || signal * 2);

    rsx! {
        button {
            onclick: move |_| signal += 1,
            "Increase"
        }
        Child {
            signal: doubled
        }
    }
}

#[component]
fn Child(signal: ReadOnlySignal<usize>) -> Element {
    rsx! {
        "{signal}"
    }
}