8、基于WebAssembly的高性能Web前端开发实践

基于WebAssembly的高性能Web前端开发实践

1. 计数器回调与HTML渲染

在定义钩子之后，我们会定义一个 on_click 回调。为了正确设置这个回调，需要使用花括号 {...} 定义一个新的作用域，然后克隆计数器并将其赋值给一个新变量，该变量会遮蔽外部作用域中的计数器。钩子是引用计数的，其工作方式类似于Rust标准库中的 Arc 。我们在这里创建新作用域并克隆计数器钩子，是为了将克隆后的钩子的所有权转移到回调中。如果没有内部作用域，直接将计数器移入回调，之后就无法在 html! 宏中引用它了。

回调本身很简单，它会解引用计数器（获取其值），加1，然后使用计数器的 set 方法更新其值。这个 set 方法与Yew框架的其他部分相关联，会自动触发任何显示该钩子数据的组件重新渲染。

以下是示例代码：

// 假设前面已经定义了 counter 钩子
let on_click = {
    let counter = counter.clone();
    move |_| {
        let mut value = *counter;
        value += 1;
        counter.set(value);
    }
};

html! {
    <div>
        <p>{"Count: "}{*counter}</p>
        <