示例

use yew::prelude::*;
use yew_callbacks::Callbacks;

#[derive(Debug, Callbacks)]
enum Msg {
    OnClick(MouseEvent),
}

#[derive(Debug)]
struct App {
    cb: MsgCallbacks<Self>,
}

impl Component for App {
    type Message = Msg;
    type Properties = ();

    fn create(ctx: &Context<Self>) -> Self {
        Self {
            cb: ctx.link().into(),
        }
    }

    fn view(&self, ctx: &Context<Self>) -> Html {
        html! {
            <button onclick={self.cb.on_click()}>
                { "Hello World!" }
            </button>
        }
    }
}

为什么关心

不是性能。

如果您的子组件的属性发生变化，则子组件将被更新。如果您执行onclick={ctx.link().callback(Msg::OnClick)，则子组件会认为每次父组件更新时都有更新。这是因为每次执行ctx.link().callback(Msg::OnClick)都会创建一个新的回调。

处理多个子组件

此crate还允许对回调的参数进行柯里化。

示例

use yew::prelude::*;
use yew_callbacks::Callbacks;

#[derive(Debug, Callbacks)]
enum Msg {
    OnClick(#[curry] usize, MouseEvent),
}

#[derive(Debug)]
struct App {
    games: Vec<AttrValue>,
    cb: MsgCallbacks<Self>,
}

impl Component for App {
    type Message = Msg;
    type Properties = ();

    fn create(ctx: &Context<Self>) -> Self {
        Self {
            games: vec![
                "Freedom Planet 2".into(),
                "Asterigos: Curse of the Stars".into(),
                "Fran Bow".into(),
                "Cats in Time".into(),
                "Ittle Dew 2+".into(),
                "Inscryption".into(),
            ],
            cb: ctx.link().into(),
        }
    }

    fn view(&self, _ctx: &Context<Self>) -> Html {
        self
            .games
            .iter()
            .enumerate()
            .map(|(i, game)| html! {
                <button onclick={self.cb.on_click(i)}>
                    { format!("You should try {game}") }
                </button>
            })
            .collect()
    }
}