说实话，KeepAlive 原理是什么？这个问题啊，咱就是说hen多人dou只停留但真正理解其本质的并不多。

设计数据结构：

切换 B → A 组件卸载切回 A → A 组件重新挂载

用户体验：辛辛苦苦点的数全白费了。

哈哈，你是不是也有这种感觉？所以 KeepAlive 就是为了解决这个问题而生的。

useEffect => { setCache return prev // Yi缓存，不geng新 return { ...prev, : children } })}, )

这样去掉了对 cache 的依赖，效果一样但geng简洁。

kan一个具体场景。我们的 App 有两个 Tab：

// 初始加载挂载 A ← useEffect 触发// 切换到 B挂载 B ← B 首次进入缓存，执行挂载// 注意：没有 "卸载 A"！// 切回 A// 没有 "挂载 A"！ ← A 从未卸载，缓存命中// 切到 B// 没有 "挂载 B"！ ← B 也从未卸载

A 组件切走时控制台没有打印"卸载 A"，因为 display: none 只是隐藏，React 的 cleanup 函数不会执行。切回来时也没有"挂载 A"，计数仍然保持离开时的数字。

注意：这里保存的是第一次渲染时的 children 引用。一旦保存，后续即使 children 变化，Yi缓存的引用不会被覆盖。这就是状态得以保留的根源——React 始终渲染的是Zui初那个 Fiber 节点。

const Counter = => { const = useState // 挂载/卸载的生命周期日志 useEffect => { console.log return => console.log }, ) return => setCount}>加1</button> </div> )}

没有 KeepAlive 时，用户在 A 组件把 count 点到 5，切换到 B，再切回 A：

一句话版本KeepAlive = useState 存 JSX 引用 + display: none 隐藏非激活 DOM，让 React 的 Fiber 节点不被卸载，从而保住所有组件内部状态。

当你从 B 切回 A 时控制台不会打印"挂载 A"，因为 A 组件的 Fiber 从未被卸载过。这就是 KeepAlive 的本质——DOM 存在但不显示，而非销毁后重建。

"用过 Vue 的 <keep-alive> 吗？Ru果让你在 React 中手写一个，你会怎么实现？" 面试官可Neng会这么问你。

"生产级方案..."

"生产级方案会Zuogeng精细的优化..."

import { useState, useEffect } from 'react'const KeepAlive = => { const = useState useEffect => { if { setCache) } }, ) return .map => ) } </> )}export default KeepAlive