Keep-Alive-Pattern[20260812215104]# euv Keep Alive 模式 > 项目代码

euv Keep Alive 模式

项目代码：github.com/euv-dev/euv

euv 是一个 Rust + WASM 前端 UI 框架，使用响应式信号系统来管理 UI 状态。在构建基于标签页的界面或多视图应用时，一个常见的挑战是在用户切换离开再返回时如何保持组件的状态。Keep Alive 模式通过使用 CSS display: none 隐藏组件而不是卸载它们来解决这个问题，确保所有内部状态——包括信号、定时器和表单输入——在视图切换期间得以保留。

在本文中，我们将深入探索 Keep Alive 模式，涵盖 CSS display 切换、用于资源管理的清理钩子、使用 watch! 管理定时器生命周期，以及该模式大放异彩的实际场景。

问题：组件卸载时的状态丢失

在典型的标签页界面中，切换标签意味着卸载当前标签的组件并挂载新的组件。这在简单情况下效果很好，但有一个显著的缺点：所有本地状态都会丢失。考虑一个包含以下内容的标签页：

用户一直在递增的计数器
部分填写的表单字段
后台运行的定时器
标签页内容中的滚动位置

当用户切换离开再返回时，所有这些状态都消失了。计数器重置为零，表单字段为空，定时器已停止，滚动位置回到顶部。

Keep Alive 模式通过在 DOM 中保持组件挂载但使用 display: none 将其隐藏来解决这个问题，从而在标签切换期间保持所有状态。

CSS Display 切换：核心技术

Keep Alive 模式的核心是使用 CSS display 来显示和隐藏标签内容，而不是条件地挂载和卸载组件。

let tab: Signal<String> = use_signal(|| "counter".to_string());

html! {
    div {
        div { class: c_tab_bar()
            div { class: if { tab.get() == "counter" } { c_tab_item_active() } else { c_tab_item_inactive() }
                onclick: move |_event: Event| { tab.set("counter".to_string()); } "Counter" }
            div { class: if { tab.get() == "form" } { c_tab_item_active() } else { c_tab_item_inactive() }
                onclick: move |_event: Event| { tab.set("form".to_string()); } "Form" }
        }
        div { style: { display: if { tab.get() == "counter" } { "block".to_string() } else { "none".to_string() }; }
            { counter_tab() } }
        div { style: { display: if { tab.get() == "form" } { "block".to_string() } else { "none".to_string() }; }
            { form_tab() } }
    }
}

让我们来分解这个实现：

标签栏： 两个标签项（"Counter" 和 "Form"），其活动/非活动类根据 tab 信号条件设置。点击标签会更新信号。
计数器标签内容： counter_tab() 组件被包裹在一个 div 中，其 display 样式根据条件设置。当 tab 为 "counter" 时，display 为 "block"（可见）；否则为 "none"（隐藏）。
表单标签内容： 类似地，form_tab() 组件被包裹在一个仅在 tab 为 "form" 时可见的 div 中。

关键的洞察是 counter_tab() 和 form_tab() 始终保持在 DOM 中挂载。当标签使用 display: none 隐藏时，它不会被从 DOM 中移除——它只是变得不可见。这意味着这些组件内部的所有信号、事件处理器和内部状态都会被保留。

当用户切换回之前访问过的标签时，组件会立即再次可见，所有状态保持完整。没有重新渲染成本，没有状态重新初始化，没有用户数据丢失。

使用 use_cleanup 和 watch! 管理定时器

Keep Alive 模式最重要的方面之一是管理定时器等资源。当标签被隐藏时，你可能希望暂停或停止后台定时器以节省资源。当标签再次变为可见时，你可能希望重新启动它们。euv 提供了 use_cleanup 和 watch! 来优雅地处理这个问题。

fn timer_tab() -> VirtualNode {
    let elapsed: Signal<i32> = use_signal(|| 0);
    let running: Signal<bool> = use_signal(|| false);
    let handle: Signal<Option<IntervalHandle>> = use_signal(|| None);

    use_cleanup(move || {
        if let Some(h) = handle.get() {
            h.clear();
        }
    });

    watch!(running, |is_running: bool| {
        if is_running {
            let new_handle = use_interval(1000, move || {
                let current: i32 = elapsed_signal.get();
                elapsed_signal.set(current + 1);
            });
            handle_signal.set(Some(new_handle));
        } else {
            if let Some(existing_handle) = handle.get() {
                existing_handle.clear();
            }
            handle.set(None);
        }
    });

    // ...
}

让我们详细检查这段代码：

信号

elapsed: Signal<i32> — 追踪已过的秒数，初始化为 0。
running: Signal<bool> — 控制定时器当前是否正在运行，初始化为 false。
handle: Signal<Option<IntervalHandle>> — 存储 use_interval 返回的句柄，如果没有活动的定时器则为 None。

use_cleanup 用于资源管理

use_cleanup 钩子注册一个在组件卸载时运行的清理函数。在 Keep Alive 模式中，组件很少被卸载（因为它保持在 DOM 中），但 use_cleanup 作为安全网仍然是必不可少的。

use_cleanup(move || {
    if let Some(h) = handle.get() {
        h.clear();
    }
});

这确保了如果组件被卸载（例如，当父组件被销毁时），间隔定时器会被正确清除以防止内存泄漏。

watch! 用于响应式定时器控制

watch! 宏观察 running 信号并对其变化做出反应。这就是定时器生命周期管理发生的地方：

watch!(running, |is_running: bool| {
    if is_running {
        let new_handle = use_interval(1000, move || {
            let current: i32 = elapsed_signal.get();
            elapsed_signal.set(current + 1);
        });
        handle_signal.set(Some(new_handle));
    } else {
        if let Some(existing_handle) = handle.get() {
            existing_handle.clear();
        }
        handle.set(None);
    }
});

当 running 变为 true 时：

使用 use_interval(1000, ...) 创建一个新的间隔定时器，每 1000 毫秒（1 秒）触发一次。
每次间隔触发时，它读取当前的 elapsed 值并将其加 1。
间隔句柄存储在 handle 信号中以便后续清理。

当 running 变为 false 时：

如果存在现有的间隔句柄，则将其清除（停止）。
handle 信号被设置为 None。

这个模式允许你根据任何条件响应式地启动和停止定时器——不仅仅是标签可见性，还可以是用户操作（例如"开始"/"暂停"按钮）、组件生命周期事件或任何其他信号变化。

将 Keep Alive 与定时器管理结合

在实际应用中，你可以通过将 running 信号绑定到标签的可见性来将 Keep Alive 模式与定时器管理结合：

// 在 Keep Alive 标签组件内部：
// watch!(tab, |current_tab: String| {
//     if current_tab == "timer" {
//         running.set(true);
//     } else {
//         running.set(false);
//     }
// });

这确保定时器仅在标签可见时运行，在标签隐藏时节省 CPU 周期。

何时使用 Keep Alive 模式

Keep Alive 模式非常适合以下场景：

1. 带有状态组件的标签页界面

当你的应用程序有多个标签页，且每个标签页包含状态组件（计数器、表单、具有用户交互的列表）时，Keep Alive 模式确保用户在切换标签页时不会丢失工作成果。

2. 多步骤表单

在多步骤表单中，每个步骤是一个独立的"视图"，Keep Alive 在用户前后导航时保留前面步骤中输入的数据。

3. 具有实时数据的仪表盘

显示实时数据（图表、指标、活动信息流）的仪表盘从 Keep Alive 中受益，因为数据不需要在用户每次返回该视图时重新加载。

4. 媒体播放器

如果你的应用程序包含媒体播放器（音频或视频），Keep Alive 确保播放继续进行（或至少播放器状态被保留），即使用户导航到应用程序的其他部分。

5. 复杂的交互组件

代码编辑器、绘图画布或具有用户可配置视图的数据表格等组件从 Keep Alive 中获益匪浅，因为它们往往有大量的内部状态。

最佳实践与权衡

最佳实践

始终使用 use_cleanup 进行资源管理： 即使 Keep Alive 组件很少被卸载，也要始终为定时器、事件监听器和其他资源注册清理函数。
使用 watch! 暂停/恢复后台任务： 当标签被隐藏时，暂停任何后台定时器或动画以节省资源。
限制 Keep Alive 组件的数量： 每个隐藏的组件仍然消耗内存并维护其信号图。不要对很少重新访问的组件使用 Keep Alive。
考虑延迟初始化： 如果标签内容的初始化成本较高，考虑将初始化推迟到首次访问该标签时，同时在此之后保持其存活。
测试内存泄漏： 由于 Keep Alive 组件会持续存在于父组件的整个生命周期中，确保它们不会随时间积累无界数据。

权衡

内存使用： Keep Alive 组件即使在隐藏时也保持在内存中。对于有许多标签页或复杂组件的应用程序，这可能会增加内存消耗。
CPU 使用： 隐藏组件中的信号监听器和计算值可能仍然会执行。使用 watch! 在标签隐藏时暂停不必要的工作。
复杂性： Keep Alive 模式为你的组件架构增加了复杂性。仅在状态保留是真正需要时才使用它。

结论

Keep Alive 模式是 euv 中一种强大的技术，用于在视图切换期间保持组件状态。通过使用 CSS display: none 隐藏组件而不是卸载它们，你可以确保所有响应式信号、定时器和用户数据保持完整。结合 use_cleanup 进行资源清理和 watch! 进行响应式定时器管理，你可以构建提供无缝、有状态用户体验的标签页界面。

有效使用 Keep Alive 的关键是理解何时需要它（有状态标签页、多步骤表单、仪表盘）以及何时不需要它（简单的无状态视图）。通过遵循本文中概述的最佳实践，你可以利用 Keep Alive 模式在 euv 中构建精致、专业的 Web 应用程序。