react-activation 主要解决 React 项目中的「页面缓存」需求(是第三方库，非React 官方)，类似于 Vue 中的 <KeepAlive>：

功能	说明
<KeepAlive> 组件	缓存组件 DOM，不卸载
<AliveScope> 容器	缓存容器，必须包裹在外层
useAliveController Hook	提供缓存管理 API（如 drop、refresh）
useActivate / useUnactivate 生命周期	激活与失活钩子

• 地址：GitHub 仓库

• NPM：https://www.npmjs.com/package/react-activation

• 适配版本：推荐用于 React 16 和 React 17（React 18 存在一些副作用不稳定问题）

---

一、KeepAlive 组件

<KeepAlive> 是一个高阶组件，用于缓存（keep-alive）React 组件的状态，类似于 Vue 的 ，在组件卸载后保留其状态和 DOM，提升体验（例如表单不丢失、滚动位置保留等）。

用于缓存组件的 UI 和状态，当 <AdminHome /> 页面切走再回来，状态不会丢失，组件不会重新挂载。

<KeepAlive id="admin-home"><AdminHome />
</KeepAlive>

基本属性

属性	类型	默认值	说明
id	string	-	缓存唯一标识，必须唯一，一般用 pathname
name	string	同 id	可选的缓存名称（某些缓存操作可以用 name）
when	boolean	true	是否启用缓存，设为 false 表示不缓存
saveScrollPosition	false | 'screen' | 'container' | ((node: HTMLElement) => any)	false	是否保存并恢复页面的滚动位置： false（默认）：不保存滚动位置 'screen': 保存并恢复页面（window）滚动位置 'container': 自动寻找最近的滚动容器保存滚动位置 (node) => HTMLElement: 自定义返回要记录滚动位置的 DOM 元素
autoFreeze	boolean	true	切换时是否冻结 DOM，节省资源
extra	any	undefined	附加信息，可在缓存控制器中使用（不常用）

---

二、AliveScope 容器

<AliveScope> 是 react-activation 提供的作用域容器，用来管理缓存组件的上下文和分组控制。

• 提供上下文，让 KeepAlive 可以记录并复用组件状态

• 管理组件缓存生命周期

• 可用于分组销毁缓存（配合 dropScope(scopeId)）

1. <AliveScope> 是必须包裹住所有 <KeepAlive> 的组件，否则 KeepAlive 不会起作用。

   如果不包裹 <KeepAlive>，它内部就无法访问缓存管理上下文：

   • KeepAlive 会直接按普通组件渲染，不会缓存
   • useActivate / useUnactivate 钩子不会被调用
   • useAliveController() 获取到的控制器是空的

   <AliveScope name="user-scope"><KeepAlive id="user-list"><UserList /></KeepAlive><KeepAlive id="user-detail"><UserDetail /></KeepAlive>
   </AliveScope>
   

   标准写法是直接把 <AliveScope> 放在根节点。

   import React from 'react';
   import ReactDOM from 'react-dom';
   import { AliveScope } from 'react-activation';
   import App from './App';ReactDOM.render(<AliveScope><App /></AliveScope>,document.getElementById('root')
   );
   

2. AliveScope 可选属性

   属性	类型	默认值	说明
   name	string	default	作用域唯一标识，可用于区分多个 AliveScope
   include	string[]	[]	允许缓存的组件 ID 列表（白名单）
   exclude	string[]	[]	禁止缓存的组件 ID 列表（黑名单）
   max	number	Infinity	缓存数量上限，超过后会自动淘汰最久未使用的（LRU 策略）
   cacheKey	string	同 name	与 localStorage 缓存相关的 key（需要搭配 persist）
   persist	boolean	false	是否持久化缓存（刷新页面或关闭浏览器后，再次进入，缓存状态仍然保留，保存在 localStorage）
   autoClear	boolean	false	是否在页面刷新后自动清空缓存（防止缓存穿透，防止过时数据）

3. 配合 KeepAlive 使用

   import { AliveScope, KeepAlive } from 'react-activation';
   import UserList from './UserList';
   import UserDetail from './UserDetail';export default function Root() {return (<AliveScope name="user-scope" include={['user-list']}><KeepAlive id="user-list"><UserList /></KeepAlive><KeepAlive id="user-detail"><UserDetail /></KeepAlive></AliveScope>);
   }
   

   • 只有 user-list 会被缓存（受 include 控制）

   • 可以通过 useAliveController().dropScope('user-scope') 一键清除

4. 多个 AliveScope 的使用方式

   把用户模块和管理员模块的缓存完全隔离开，这样每个作用域有自己独立的缓存池

   <!-- 用户模块 -->
   <AliveScope name="user-scope"><KeepAlive id="user-list"><UserList /></KeepAlive><KeepAlive id="user-detail"><UserDetail /></KeepAlive>
   </AliveScope><!-- 管理员模块 -->
   <AliveScope name="admin-scope"><KeepAlive id="admin-home"><AdminHome /></KeepAlive>
   </AliveScope>
   

   这时可以使用 useAliveController() 来获取缓存控制器，跨作用域控制：

   import { useAliveController } from 'react-activation';export default function ClearButton() {const { dropScope } = useAliveController();return (<><button onClick={() => dropScope('user-scope')}>清空用户模块缓存</button><button onClick={() => dropScope('admin-scope')}>清空管理员模块缓存</button></>);
   }
   

   • dropScope(‘user-scope’) 会销毁 user-scope 作用域中所有 KeepAlive 缓存

   • 也可以用 refreshScope(name) 强制刷新一个作用域内所有组件

---

三、useAliveController Hook

这是一个自定义 Hook，提供对缓存组件的控制，比如手动刷新（drop）某个缓存组件、获取缓存状态等。

const { drop, dropScope, refresh } = useAliveController();// 单作用域: 卸载某个缓存组件（通过 KeepAlive 的 id）
// 使用场景：点击“关闭标签页”
drop('user-list');  // 卸载 id 为 'user-list' 的 KeepAlive 缓存
drop('user-detail');
// 👉 全部要写一遍，或维护复杂缓存 id 列表// 多作用域: 卸载该作用域下的所有缓存组件（通过 AliveScope 的 name）,比 drop(id) 更高级别的操作
// 使用场景：退出登录清除所有缓存
dropScope('user-scope'); // 卸载 <AliveScope name="user-scope"> 下的所有 KeepAlive 缓存// 强制刷新（先卸载再重建）
// 使用场景：点击“重置表单”或“刷新页面”
refresh('user-list'); // 会先 drop(‘user-list’)，然后立刻重新挂载组件

• dropScope 的参数是 中的 name。

• 使用前确保这些组件确实是包裹在 <AliveScope> 内的。

• AliveScope 是 react-activation 中用于分组缓存的容器，必须明确设置 name 才能使用 dropScope。
  .

🔥 在 react-activation 中，组件必须处于「非激活状态」( 即 KeepAlive 的 when 为 false、或组件被隐藏 )，才允许卸载或刷新。不会立即卸载当前正在显示的组件

方法	作用	会立即卸载当前正在显示的组件吗？	何时真正卸载？
drop(id)	删除某个缓存组件的状态	❌ 不会立即卸载当前正在显示的	⚠️ 当该组件被切换隐藏时
dropScope(scopeId)	删除整个 AliveScope 中的缓存	❌ 不会立即卸载当前正在显示的	⚠️ 当前组件不显示后才会销毁
refresh(id)	删除后重新创建组件	❌ 不会立即刷新当前激活组件	⚠️ 必须切到其他组件再切回来才生效

• drop / dropScope / refresh 不会卸载当前正在显示的组件

• 它们只对非激活（未渲染）的组件生效

• ✅ 正确的做法是：切换走 → drop → 才生效：

  history.push('/other');
  await drop('/current'); // ✅ 现在它处于非激活状态，drop 生效
  

---

四、生命周期

react-activation（React 第三方库） 提供的自定义 Hook，模拟 Vue 的 activated / deactivated 生命周期。

<AliveScope><KeepAlive id="user"><UserPage /></KeepAlive>
</AliveScope>import { useActivate, useUnactivate, useAliveEffect } from 'react-activation';// 组件激活时调用（进入或返回该缓存组件时），替代 useEffect 的 didShow
useActivate(() => {console.log('页面被激活（显示）: 进入时刷新数据')
});// 组件失活时调用（从该组件跳出，但未卸载），类似 componentWillPause
useUnactivate(() => {console.log('页面被隐藏但未卸载: 退出时保存状态')
});// 只有当组件是“激活状态”时，才会执行 useEffect，可以响应 deps 的变化，可替代 useEffect + useActivate 组合
useAliveEffect(() => {const timer = setInterval(() => {console.log('只在激活状态时轮询');}, 1000);return () => clearInterval(timer);
}, []);

类似于 Vue3：

<template><KeepAlive include="UserPage"><component :is="currentView" /></KeepAlive>
</template>// 原生生命周期钩子
onActivated(() => {console.log('组件被缓存激活');
});onDeactivated(() => {console.log('组件被缓存关闭');
});

---

五、完整示例

✅ 标签切换自动缓存
✅ 点击关闭标签页 → 销毁对应缓存
✅ 支持多个 AliveScope 管理模块分组
✅ 使用 KeepAlive + useActivate + useUnactivate

1. main.tsx（注册多个作用域）

   import React from 'react';
   import ReactDOM from 'react-dom';
   import { AliveScope } from 'react-activation';
   import App from './App';ReactDOM.render(<><AliveScope name="module-user"><App /></AliveScope>{/* 可拓展其他模块作用域 */}</>,document.getElementById('root')
   );
   

2. App.tsx（入口，渲染标签页）

   import React from 'react';
   import TabView from './components/TabView';export default function App() {return (<div><TabView /></div>);
   }
   

3. TabView.tsx（核心组件）

   import React, { useState } from 'react';
   import { KeepAlive, useAliveController } from 'react-activation';
   import PageA from './PageA';
   import PageB from './PageB';
   import PageC from './PageC';const tabComponents: Record<string, React.ReactNode> = {A: <PageA />,B: <PageB />,C: <PageC />,
   };const TabView = () => {const [tabs, setTabs] = useState(['A', 'B', 'C']);const [active, setActive] = useState('A');const { drop } = useAliveController();const closeTab = async (key: string) => {// 比如当前 tabs 是 ['A', 'B', 'C']，要关闭 A 标签setTabs(prev => prev.filter(t => t !== key)); // 更新标签页列表(异步)，由['A', 'B', 'C'] -> ['B', 'C']if (active === key) { // 如果关闭的是当前激活标签const other = tabs.find(t => t !== key); // 从标签页列表['A', 'B', 'C']中找出第一个非 key 的 tab（即 'B'）if (other) setActive(other); // 激活新标签B}await drop(`page-${key}`); // 卸载对应标签的缓存组件(卸载'page-A')};return (<div><div style={{ display: 'flex', gap: 8, marginBottom: 12 }}>{tabs.map(tab => (<divkey={tab}style={{padding: '6px 12px',border: active === tab ? '2px solid blue' : '1px solid #ccc',borderRadius: 4,cursor: 'pointer',background: '#f7f7f7',position: 'relative',}}onClick={() => setActive(tab)}>Page {tab}<spanonClick={e => {e.stopPropagation();closeTab(tab);}}style={{marginLeft: 6,color: 'red',cursor: 'pointer',fontWeight: 'bold',}}>×</span></div>))}</div><div style={{ border: '1px solid #ccc', padding: 12 }}>{tabs.map(tab =>active === tab ? (<KeepAlive id={`page-${tab}`} key={tab}>{tabComponents[tab]}</KeepAlive>) : null)}</div></div>);
   };export default TabView;
   

4. PageA.tsx（缓存与生命周期）

   import React, { useState } from 'react';
   import { useActivate, useUnactivate } from 'react-activation';export default function PageA() {const [count, setCount] = useState(0);useActivate(() => {console.log('PageA 激活');});useUnactivate(() => {console.log('PageA 失活');});return (<div><h2>Page A</h2><p>计数: {count}</p><button onClick={() => setCount(c => c + 1)}>+1</button></div>);
   }
   

   PageB.tsx、PageC.tsx 同上