Leptos-002 组件

WITLab
206 阅读3分钟

Leptos-002 组件

在大多数Web框架中 , 组件是基本的单位 ，Leptos也不例外。 从概念上讲，它们类似于HTML元素：它们表示 DOM，具有自包含的定义行为。关于leptos 的基本使用可以看之前的文章

创建组件

leptos中使用 #[component]宏将一个函数定义为组件 , 函数的返回类型必须是 impl IntoView 下面是在主函数中使用一个简单的组件的例子

src/main.rs

use leptos::prelude::*;

#[component]
fn App() -> impl IntoView {
    view! {
        <h1>" 一键三连 "</h1>
    }
}

fn main() {
    mount_to_body(App);
}

image.png

Signal

创建一个信号，这是Leptos中反应变化和状态管理的基本单位。 这将返回一个（getter，setter）元组。要访问当前值，您将使用count.get（）（或者使用简写count（））。要设置当前值，可以调用set_count.set（...）（或者set_count（...）).

例如下面代码创建了一个点击按钮 , <p> 中的数字会变成 3 的实例

use leptos::prelude::*;

#[component]
fn App() -> impl IntoView {
    let (count, count_set) = signal(0);
    view! {
        <button
            on:click=move|_|{count_set.set(3)}
        >"click me"</button>
        <p>{count}</p>
    }
}

fn main() {
    mount_to_body(App);
}

其中on:click=move|_|{} 定义了一个click事件监听器 , 内部的count_set.set() 会在click 发生的时候通过count_set 讲 signal 设置为 3

image.png

值得注意的是<p></p> 中是 count 而不是 count() / count.get() 是因为 view 中只有函数和 signal 才会被视为有效的反映值对 DOM 进行更新 , 现在代码中是使用的 signal 作为反映值 , 也可以使用函数 , 只需要将view!{} 中的 {count} 进行如下替换 , 效果不变

    view! {
        <button
            on:click=move|_|{count_set.set(3)}
        >"click me"</button>
        // 替换 count
        <p>{move||count.get()}</p>
    }

对signal的可变引用

现在的程序是将<p> 中的元素设置为 3 , 算是一个没有什么实际意义的功能 , 可以使用count_set.write() 获取对于 signal 的可变引用并对其进行修改 , 将程序变为按下按钮之后累加

use leptos::prelude::*;

#[component]
fn App() -> impl IntoView {
    let (count, count_set) = signal(0);
    view! {
        <button
            on:click=move|_|{*count_set.write() += 1}
        >"+"</button>
        <strong>"  >>"{move||count.get()}"<<  "</strong>
        <button
            on:click=move|_|{*count_set.write() -= 1}
        >"-"</button>
    }
}

fn main() {
    mount_to_body(App);
}

image.png

with和update

为了避免不必要的克隆和覆盖，Leptos 提供了 with 和 update，更适合在信号中操作复杂数据结构的部分内容。

let (read_signal, write_signal) = signal(vec![1, 2, 3]);

write_signal.update(|value| {
    value[0] = 11;
});

read_signal.with(|value| {
    assert_eq!(value[0], 11);
});

with 是一种只读操作，用于借用信号的当前值，而不克隆它。适合需要从信号中读取数据但不修改的场景。

update 是一种可变操作，允许你直接对信号的内部数据进行修改，而不需要完全替换整个值。适合在需要更新信号的一部分内容时使用。

对比如下表:

方法用途性能影响适用场景
get获取信号当前值克隆整个值，可能较慢简单数据类型或偶尔读取值
set替换信号值替换整个值，可能不够高效简单数据替换
with借用信号的只读值无需克隆，性能较好读取复杂数据但不修改
update修改信号值的某部分内容直接修改值，无需替换整个对象更新复杂数据的部分内容

参考: book.leptos.dev/view/01_bas…

视频: 小破站

avatar
文章
阅读
粉丝