Rust高效Hooks库leptos-use的使用指南

leptos-use是一个为Leptos框架设计的高效Hooks工具集，它提供了一系列实用的React式钩子函数，可以显著简化前端开发工作。

主要特性

• 专为Leptos框架优化
• 提供类似React Hooks的开发体验
• 包含大量实用的前端功能Hooks
• 类型安全且高效

安装方法

在Cargo.toml中添加依赖：

[dependencies]
leptos-use = "0.7"

常用Hooks及使用示例

1. use_window

获取窗口尺寸和滚动位置：

use leptos::*;
use leptos_use::use_window;

#[component]
pub fn WindowInfo() -> impl IntoView {
    let window = use_window();
    
    view! {
        <div>
            <p>窗口宽度: {move || window.width()}</p>
            <p>窗口高度: {move || window.height()}</p>
        </div>
    }
}

2. use_local_storage

本地存储操作：

use leptos::*;
use leptos_use::{use_local_storage, UseLocalStorageReturn};

#[component]
pub fn StorageExample() -> impl IntoView {
    let UseLocalStorageReturn {
        set_value,
        value,
        remove,
        ..
    } = use_local_storage::<String>("my-key");
    
    let input_value = create_rw_signal("".to_string());
    
    view! {
        <div>
            <input
                type="text"
                prop:value=input_value
                on:input=move |ev| input_value.set(event_target_value(&ev))
            />
            <button on:click=move |_| set_value(input_value.get())>
                "保存到本地存储"
            </button>
            <p>存储的值: {value}</p>
        </div>
    }
}

3. use_interval

定时器功能：

use leptos::*;
use leptos_use::use_interval;

#[component]
pub fn Timer() -> impl IntoView {
    let count = create_rw_signal(0);
    
    use_interval(
        move || {
            count.update(|c| *c += 1);
        },
        1000, // 1秒间隔
    );
    
    view! {
        <div>计数: {count}</div>
    }
}

4. use_event_listener

事件监听：

use leptos::*;
use leptos_use::use_event_listener;
use web_sys::KeyboardEvent;

#[component]
pub fn KeyLogger() -> impl IntoView {
    let last_key = create_rw_signal(None::<String>);
    
    use_event_listener(
        window(),
        ev::keydown,
        move |event: KeyboardEvent| {
            last_key.set(Some(event.key()));
        },
    );
    
    view! {
        <div>
            <p>最后按下的键: {move || last_key.get().unwrap_or_default()}</p>
        </div>
    }
}

5. use_debounce

防抖函数：

use leptos::*;
use leptos_use::{use_debounce_fn, use_debounce};

#[component]
pub fn SearchBox() -> impl IntoView {
    let search_query = create_rw_signal("".to_string());
    let debounced_query = use_debounce(search_query, 500); // 500ms防抖
    
    view! {
        <div>
            <input
                type="text"
                prop:value=search_query
                on:input=move |ev| search_query.set(event_target_value(&ev))
                placeholder="输入搜索内容..."
            />
            <p>实际搜索内容: {debounced_query}</p>
        </div>
    }
}

高级用法

组合使用多个Hooks

use leptos::*;
use leptos_use::{use_window, use_throttle};

#[component]
pub fn ResponsiveComponent() -> impl IntoView {
    let window = use_window();
    let throttled_width = use_throttle(move || window.width(), 200); // 200ms节流
    
    view! {
        <div class:mobile=move || throttled_width.get() < 768>
            {move || 
                if throttled_width.get() < 768 {
                    "移动设备视图"
                } else {
                    "桌面视图"
                }
            }
        </div>
    }
}

完整示例代码

下面是一个结合多个leptos-use Hooks的完整示例：

use leptos::*;
use leptos_use::{use_window, use_local_storage, use_interval};

#[component]
pub fn App() -> impl IntoView {
    // 使用use_window获取窗口尺寸
    let window = use_window();
    
    // 使用use_local_storage存储用户偏好
    let storage = use_local_storage::<String>("theme-preference");
    
    // 使用use_interval创建定时器
    let counter = create_rw_signal(0);
    use_interval(
        move || {
            counter.update(|c| *c += 1);
        },
        1000,
    );
    
    view! {
        <div class="app">
            <h1>leptos-use综合示例</h1>
            
            <div class="window-info">
                <h2>窗口信息</h2>
                <p>宽度: {move || window.width()}</p>
                <p>高度: {move || window.height()}</p>
            </div>
            
            <div class="storage-example">
                <h2>本地存储</h2>
                <input
                    type="text"
                    prop:value=storage.value
                    on:input=move |ev| storage.set_value(event_target_value(&ev))
                    placeholder="输入主题偏好"
                />
                <p>当前偏好: {storage.value}</p>
            </div>
            
            <div class="timer">
                <h2>定时器</h2>
                <p>已运行: {counter} 秒</p>
            </div>
        </div>
    }
}

注意事项

1. leptos-use需要与Leptos框架配合使用
2. 大多数Hooks都会自动清理资源，无需手动处理
3. 注意响应式数据的生命周期管理
4. 查看官方文档获取完整的Hooks列表和详细用法

leptos-use通过提供这些实用Hooks，可以大幅提升Leptos应用开发效率和代码可维护性。