应主动设计受控缓存生命周期：用闭包封装Map缓存及clear方法，路由离开时调用clear清理；避免DOM/组件实例作key，清除监听器和定时器，必要时限制缓存大小或使用WeakMap。
在单页应用（SPA）中，路由切换时若不清除与当前页面强相关的临时缓存，容易导致内存持续增长、界面显示陈旧数据，甚至因闭包持有 DOM 或大型对象而引发内存泄漏。闭包本身不自动清理，但可以**主动设计一个受控的缓存生命周期**——让缓存变量定义在闭包内，同时提供明确的“销毁入口”，在路由离开时调用它。
用闭包封装带清理能力的缓存容器
核心是把缓存（如 Map）和清理函数一起封闭在同一个作用域里，外部只能通过返回的接口读写，无法绕过逻辑直接操作内部状态。
- 缓存容器（如 Map）声明在闭包顶层，只被内部函数共享
- 提供 set、get、clear 方法，其中 clear 是唯一能清空缓存的出口
- 不暴露原始 Map 对象，避免外部误操作或意外强引用
在路由组件中绑定清理时机
以 React Router v6 为例，需在组件卸载前触发缓存清除。关键不是“自动”，而是“可预测地调用”。
- 在组件内调用缓存工厂函数，获得专属缓存实例和 clear 方法
- 用 useEffect 的清理函数执行 cache.clear()
- 确保每次路由进入都新建缓存（或复用），离开时必清——这样每个页面的缓存彼此隔离
避免常见陷阱：闭包 + 缓存 ≠ 安全
闭包只是提供了封装能力，不等于内存安全。以下情况仍会导致泄漏：
立即学习“Java免费学习笔记（深入）”；
- 缓存键用了 DOM 元素、React 组件实例等强引用对象 → 改用 id 或字符串作 key
- 缓存值包含未释放的事件监听器或定时器 → 清理函数中要一并 removeEventListener 或 clearTimeout
- 用普通 Map 缓存大量数据且从不清理 → 可加最大条目数限制，或改用 WeakMap（仅适用于以对象为 key 的场景）
一个轻量实用的实现示例
下面是一个带清除能力的内存缓存工厂：
<!-- 返回 { get, set, clear }，内部 Map 不可被外部访问 -->
const createRouteCache = () => {
const cache = new Map();
return {
get: (key) => cache.get(key),
set: (key, value) => cache.set(key, value),
clear: () => cache.clear()
};
};
在组件中使用：
function UserProfile() {
const routeCache = createRouteCache();
useEffect(() => {
return () => routeCache.clear(); // 路由离开时触发
}, []);
// 后续可用 routeCache.get/set 管理本页临时数据
}
