回调(Callbacks)

组件“link”是一种机制,通过该机制,组件可以注册回调并自行更新。

send_message

向组件发送消息。消息将由update方法处理来确定组件是否应重新渲染。

send_message_batch

同时向组件发送多条消息。这与send_message类似,但如果任何消息导致update方法返回true ,则组件将在处理完所有消息后重新渲染。

如果给定的 vector 为空,则此函数不执行任何操作。

callback

创建一个回调,该回调将在执行时向组件发送消息。 实际上,它会 将闭包返回的结果传递给send_message

有一种不同的方法叫做callback_once ,它接受FnOnce而不是Fn 。但是,您应该小心使用它,因为如果这个方法执行多次,其回调将会引发 panic。

  1. // 创建一个回调来接收文本,并且将文本作为`Msg::Text`消息变量发送给组件。
  2. let cb = link.callback(|text: String| Msg::Text(text));
  3. // 前面那行仅仅是为了清楚的演示
  4. // 它可以简化成这样:
  5. let cb = link.callback(Msg::Text);
  6. // 将会发送`Msg::Text("Hello World!")`到组件。
  7. cb.emit("Hello World!".to_owned());

batch_callback

创建一个回调,该回调将在执行时向组件发送一批消息。 该方法与callback的不同之处在于,传递给此方法的闭包不必返回消息。作为替代,闭包可以返回Vec<Msg>Option<Msg> ,其中Msg是组件的消息类型。

Vec<Msg>被视为一批消息,并在底层调用send_message_batch发送。

Option<Msg>会在值为Some时调用send_message 。当你不需要更新时,可以将值设置为None ,此时什么都不会发生。

这是通过使用SendAsMessage特性来实现的。您可以为你自己的类型实现SendAsMessage ,这样您就可以在batch_callback中使用它们。

callback一样,这个方法也有一个FnOnce对应实现,那就是 batch_callback_once 。它和callback_once的限制条件也是相同的。

Callbacks

(这部分可能会独立成为一小章。)

Callbacks 用于与 Yew 中的 services,agents 和父组件进行通信。它们仅仅是个 Fn,并由Rc 包裹,这将允许他们被克隆。

它们有一个 emit 函数,该函数将它的<IN> 类型作为参数并将其转换为目标所期望的消息。如果一个回调从父组件中通过 props 提供给子组件,则子组件可以在其 update生命周期钩子中对该回调调用emit,以将消息发送回父组件。在html! 宏内被提供作为 props 的闭包或函数会自动转换为 Callbacks。

一个简单的回调示例是这样的:

  1. let onclick = self.link.callback(|_| Msg::Clicked);
  2. html! {
  3. <button onclick=onclick>{ "Click" }</button>
  4. }

传递给callback的函数必须始终带有一个参数。例如, onclick处理程序需要一个函数,该函数采用MouseEvent类型的参数。然后处理程序可以决定应该向组件发送什么样的消息。该消息会被无条件地安排在下一个更新循环中。

如果您需要一个可能会引起更新的回调,请使用batch_callback

  1. let onkeypress = self.link.batch_callback(|event| {
  2. if event.key() == "Enter" {
  3. Some(Msg::Submit)
  4. } else {
  5. None
  6. }
  7. });
  8. html! {
  9. <input type="text" onkeypress=onkeypress />
  10. }

相关例子