react实现keep-alive功能

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>
  );
}

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>
  );
}

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

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>
  );
}