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>
  );
};
// 帶狀態(tài)的子組件
const Tab1 = () => {
  // 切換標簽后，輸入框內(nèi)容不會丟失
  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>計數(shù)：{count}</p>
      <button onClick={() => setCount(count + 1)}>增加</button>
    </div>
  );
};

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);
  // 組件激活時觸發(fā)（顯示時）
  useActivate(() => {
    console.log('組件被激活');
  });
  // 組件失活時觸發(fā)（隱藏時）
  useDeactivate(() => {
    console.log('組件被失活');
  });
  // 模擬滾動條狀態(tài)保留
  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>
  );
};

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