React 本身没有内置 keep-alive 功能（类似 Vue 的 <keep-alive> 组件，用于缓存组件状态、避免重复渲染），但可通过 组件状态管理、路由配置、第三方库 三种核心方式实现，具体方案如下：

1. 基础方案：通过 “父组件状态缓存” 实现（非路由场景）

适用于非路由切换的组件（如标签页、弹窗内组件），核心思路是：用父组件的状态存储子组件的渲染结果 / 关键数据，控制子组件 “卸载 / 挂载” 而非 “销毁 / 重建”。

实现逻辑：

• 父组件通过 useState 维护 “是否缓存” 的状态（如 cachedComponents 对象）。
• 子组件切换时，不直接卸载，而是通过 display: none 隐藏，或把组件实例 / 数据存入父组件状态。
• 再次切换回子组件时，直接复用缓存的状态或渲染结果。

代码示例（标签页缓存）：

import { useState } from 'react';
import Tab1 from './Tab1';
import Tab2 from './Tab2';

function KeepAliveTabs() {
  // 1. 维护激活的标签和缓存的组件状态
  const [activeKey, setActiveKey] = useState('tab1');
  const [cachedStates, setCachedStates] = useState({
    tab1: null, // 缓存Tab1的状态
    tab2: null  // 缓存Tab2的状态
  });

  // 2. 子组件状态更新时，同步到父组件缓存
  const handleTab1StateChange = (state) => {
    setCachedStates(prev => ({ ...prev, tab1: state }));
  };

  const handleTab2StateChange = (state) => {
    setCachedStates(prev => ({ ...prev, tab2: state }));
  };

  // 3. 渲染所有标签（隐藏非激活标签，而非卸载）
  return (
    <div>
      <div className="tab-header">
        <button onClick={() => setActiveKey('tab1')}>标签1</button>
        <button onClick={() => setActiveKey('tab2')}>标签2</button>
      </div>
      <div className="tab-content">
        {/* 用display控制显示/隐藏，保留组件实例和状态 */}
        <div style={{ display: activeKey === 'tab1' ? 'block' : 'none' }}>
          <Tab1 
            initialState={cachedStates.tab1} 
            onStateChange={handleTab1StateChange} 
          />
        </div>
        <div style={{ display: activeKey === 'tab2' ? 'block' : 'none' }}>
          <Tab2 
            initialState={cachedStates.tab2} 
            onStateChange={handleTab2StateChange} 
          />
        </div>
      </div>
    </div>
  );
}

2. 路由场景：通过 “React Router + 状态缓存” 实现

适用于路由切换时缓存页面（如列表页→详情页，返回列表页保留筛选状态），核心思路是：用 “高阶组件（HOC）” 或 “上下文（Context）” 缓存路由组件的状态，路由切换时不销毁组件，仅隐藏。

关键步骤：

1. 创建 “缓存容器”：用一个组件存储所有需要缓存的路由组件实例。
2. 监听路由变化：通过 react-router-dom 的 useLocation 或 useNavigate，判断当前路由是否需要缓存。
3. 控制组件显示：缓存的组件用 display: none 隐藏，未缓存的组件正常卸载。

代码示例（基于 React Router v6）：

import { useState, useEffect } from 'react';
import { useLocation, Routes, Route } from 'react-router-dom';
import Home from './Home';
import List from './List'; // 需要缓存的列表页
import Detail from './Detail';

// 1. 缓存容器组件：管理需要缓存的路由组件
function KeepAliveRouter() {
  const location = useLocation();
  // 存储缓存的组件：key=路由path，value=组件状态/实例
  const [cachedComponents, setCachedComponents] = useState({
    '/list': null // 初始缓存List页面
  });

  // 2. 路由变化时，判断是否缓存当前组件（这里仅缓存/list）
  useEffect(() => {
    const currentPath = location.pathname;
    // 若离开的是需要缓存的路由，保存其状态（需List组件暴露状态）
    if (currentPath === '/list' && List.saveState) {
      setCachedComponents(prev => ({
        ...prev,
        '/list': List.saveState() // 假设List组件有saveState方法返回当前状态
      }));
    }
  }, [location.pathname]);

  // 3. 渲染路由：缓存的组件用div包裹隐藏，未缓存的正常渲染
  return (
    <div>
      {/* 缓存的组件：始终挂载，用display控制显示 */}
      {cachedComponents['/list'] && (
        <div style={{ display: location.pathname === '/list' ? 'block' : 'none' }}>
          <List initialState={cachedComponents['/list']} />
        </div>
      )}

      {/* 非缓存路由：正常挂载/卸载 */}
      <Routes location={location}>
        <Route path="/" element={<Home />} />
        {/* /list 已通过缓存容器渲染，这里可省略或留空 */}
        <Route path="/list" element={null} />
        <Route path="/detail/:id" element={<Detail />} />
      </Routes>
    </div>
  );
}

3. 成熟方案：使用第三方库（推荐）

手动实现缓存需处理状态同步、内存泄漏等问题，复杂场景建议用成熟库，核心推荐 react-keep-alive（专为 React 设计的 keep-alive 库）。

步骤 1：安装依赖

npm install react-keep-alive --save
# 或 yarn add react-keep-alive

步骤 2：全局配置（基于 React Router v6）

import { BrowserRouter as Router } from 'react-router-dom';
import { KeepAliveProvider, KeepAlive } from 'react-keep-alive';

function App() {
  return (
    {/* 1. 全局注入KeepAliveProvider */}
    <KeepAliveProvider>
      <Router>
        <Routes>
          <Route path="/" element={<Home />} />
          {/* 2. 用KeepAlive包裹需要缓存的路由组件 */}
          <Route 
            path="/list" 
            element={
              <KeepAlive name="list-page"> {/* name唯一标识缓存实例 */}
                <List />
              </KeepAlive>
            } 
          />
          <Route path="/detail/:id" element={<Detail />} />
        </Routes>
      </Router>
    </KeepAliveProvider>
  );
}

关键特性（react-keep-alive）：

• 支持缓存指定路由 / 组件，通过 name 标识唯一缓存实例。
• 提供 onActivate/onDeactivate 钩子，监听组件 “激活 / 失活” 状态。
• 支持手动清除缓存（useKeepAliveStore 钩子）。

总结：不同场景的方案选择

注意：缓存组件会占用内存，需避免缓存过多组件；若组件依赖外部数据（如接口），需在 “激活” 时重新校验数据有效性（如通过 onActivate 钩子刷新）。