React-手把手带你实现 Keep-Alive 效果

前言

在 Vue 中，我们可以通过 <keep-alive> 轻松缓存组件实例。但在 React 中，组件卸载（Unmount）意味着状态和 DOM 的彻底销毁。如何在 React 中实现"切换页面不丢失滚动位置、不重置表单"？本文将为你拆解三种主流方案。

一、 Keep-Alive 的本质是什么？

在实现 React 版缓存组件前，先明确 Vue keep-alive 的核心逻辑，才能精准复刻：

• 核心本质：缓存组件实例，保留组件内部状态（如输入框内容、滚动位置）；
• 行为特征：组件切换时不销毁 / 重建，仅通过「隐藏 / 显示」控制渲染状态；
• React 目标：实现和 Vue 一致的效果 ------ 组件切走不丢状态，切回来能恢复。

---

二、 React 实现 keep-alive 的 3 种方案

方案 1：CSS 隐藏 + 不卸载组件（最简单）

核心思路：

通过 display: none 隐藏不活跃的组件，保留组件的 DOM 节点和内部状态，仅切换 display 属性控制显示 / 隐藏，不触发组件的卸载 / 重新挂载生命周期。

适用场景

• 少量组件切换（2-3 个，如 tab 标签页）；
• 简单业务场景（如表单页、列表页切换）。

优缺点

✅ 优点：实现简单，无额外依赖，状态保留完整；

❌ 缺点：所有组件都会挂载在 DOM 树中，组件数量多（如 5 个以上）会增加 DOM 节点数量，可能影响页面渲染性能。

import { useState } from 'react';

// 模拟 Tab 切换场景
const KeepAliveByCSS = () => {
  // 控制当前激活的标签
  const [activeKey, setActiveKey] = useState('tab1');

  return (
    <div>
      <div className="tab-header">
        <button onClick={() => setActiveKey('tab1')}>标签1</button>
        <button onClick={() => setActiveKey('tab2')}>标签2</button>
      </div>
      <div className="tab-content">
        {/* 始终挂载，仅通过 CSS 隐藏 */}
        <div style={{ display: activeKey === 'tab1' ? 'block' : 'none' }}>
          <Tab1 />
        </div>
        <div style={{ display: activeKey === 'tab2' ? 'block' : 'none' }}>
          <Tab2 />
        </div>
      </div>
    </div>
  );
};

// 带状态的子组件
const Tab1 = () => {
  // 切换标签后，输入框内容不会丢失
  const [inputVal, setInputVal] = useState('');
  return <input value={inputVal} onChange={(e) => setInputVal(e.target.value)} placeholder="标签1输入框" />;
};

const Tab2 = () => {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>计数：{count}</p>
      <button onClick={() => setCount(count + 1)}>增加</button>
    </div>
  );
};

---

方案 2：使用 react-activation 第三方库（推荐）

这是目前社区内最成熟的方案，它通过将组件渲染到"外部容器"再动态挂载回来的方式，模拟了 Vue 的行为。

核心功能

• 提供 <KeepAlive> 容器组件，包裹需要缓存的组件即可生效；

• 内置 useActivate/useDeactivate 钩子函数，分别在组件「激活」和「失活」时触发；

• 支持缓存控制（如指定缓存 Key、条件缓存）；

• 能保留 DOM 状态（如滚动条位置、输入框焦点）。

使用示例

import { KeepAlive, useActivate, useDeactivate } from 'react-activation';
import { useState } from 'react';

const KeepAliveByLib = () => {
  const [show, setShow] = useState(true);

  return (
    <div>
      <button onClick={() => setShow(!show)}>
        {show ? '隐藏组件' : '显示组件'}
      </button>
      {/* 用 KeepAlive 包裹需要缓存的组件 */}
      {show && (
        <KeepAlive id="cached-component">
          <CachedComponent />
        </KeepAlive>
      )}
    </div>
  );
};

// 被缓存的组件
const CachedComponent = () => {
  const [inputVal, setInputVal] = useState('');
  const [scrollTop, setScrollTop] = useState(0);

  // 组件激活时触发（显示时）
  useActivate(() => {
    console.log('组件被激活');
  });

  // 组件失活时触发（隐藏时）
  useDeactivate(() => {
    console.log('组件被失活');
  });

  // 模拟滚动条状态保留
  const handleScroll = (e) => {
    setScrollTop(e.target.scrollTop);
  };

  return (
    <div>
      <input 
        value={inputVal} 
        onChange={(e) => setInputVal(e.target.value)} 
        placeholder="缓存的输入框" 
      />
      <div 
        style={{ height: '200px', overflow: 'auto', marginTop: '10px' }}
        onScroll={handleScroll}
      >
        {Array.from({ length: 50 }).map((_, index) => (
          <p key={index}>滚动测试行 {index + 1}</p>
        ))}
      </div>
      <p>当前滚动位置：{scrollTop}</p>
    </div>
  );
};

---

方案 3：全局状态管理 + 状态回显（Redux）

如果不想引入第三方库，也可以通过全局状态缓存实现核心效果，本质是组件卸载前存状态，重新挂载时取状态。

核心思路

在组件 useEffect 的清理函数中，将关键数据（输入框、计数、滚动位置等）保存到全局 Store；重新挂载时再读取初始化。

• 优点：符合 React 数据流规范，内存占用可控。

• 缺点：

  1. 无法恢复 DOM 状态：如页面的滚动位置、输入框的焦点、已播放的视频进度，需单独编写逻辑处理。
  2. 开发成本高：每个需要缓存的组件都要手动编写保存/恢复逻辑。

• 补救措施 ：若要恢复滚动位置，需手动在卸载前记录 scrollTop，并在渲染后通过 window.scrollTo 还原。

---

三、缓存 React Router 路由组件

实际开发中，最常见的场景是切换路由不丢失页面状态（如列表页滚动位置、表单输入内容），可结合 React Router + react-activation 实现。

核心代码如下：

import { BrowserRouter, Routes, Route, useLocation } from 'react-router-dom';
import { KeepAlive } from 'react-activation';
import Profile from './pages/Profile';
import Home from './pages/Home';
import Settings from './pages/Settings';

// 路由容器组件（获取当前路由路径）
const RouterContainer = () => {
  const location = useLocation();
  const currentPath = location.pathname;

  return (
    <Routes>
      {/* 普通路由（不缓存） */}
      <Route path="/" element={<Home />} />
      <Route path="/settings" element={<Settings />} />
      
      {/* 缓存路由组件：when 控制是否缓存，id 为缓存标识 */}
      <Route
        path="/profile"
        element={
          <KeepAlive id="profile" when={currentPath === "/profile"}>
            <Profile />
          </KeepAlive>
        }
      />
    </Routes>
  );
};

// 根组件
const App = () => {
  return (
    <BrowserRouter>
      <RouterContainer />
    </BrowserRouter>
  );
};

---

四、 方案选择建议

方案	优点	缺点	适用场景
CSS 隐藏	实现简单、无依赖	DOM 节点冗余、性能一般	少量组件（2-3 个）、简单 tab 切换
react-activation	功能完整、支持 DOM 状态缓存	新增第三方依赖	中大型项目、需完整 keep-alive 效果
全局状态缓存	无额外依赖、贴合状态管理	仅恢复数据、需手动处理 DOM	已用全局状态库、仅需数据缓存

---

五、总结

1. React 无原生 keep-alive，但可通过CSS 隐藏、react-activation 库、全局状态缓存3 种方案模拟核心效果；
2. 简单场景用 CSS 隐藏，中大型项目优先选 react-activation（兼顾易用性和完整性）；
3. 路由组件缓存可结合 React Router + react-activation 实现，核心是通过 KeepAlive 包裹路由元素并指定缓存标识。