<Activity> 的「卸载但保留状态」语义<Activity> 与 display:none / 手写 KeepAlive 的差异Tab 切换、路由前进后退时，若直接卸载组件，其局部状态（输入框内容、滚动位置、表单草稿）会丢失。经典解法是 KeepAlive——把组件从树里「摘下但存着」。React 19 前社区需手写（见 03-KeepAlive 实现），React 19.2 起官方提供 <Activity>。
<Activity> 让被包裹的树在「不活跃」时不渲染到屏幕，但保留 state 与（部分）DOM，重新激活时无缝恢复：
import { Activity } from 'react';
<Activity mode={active ? 'visible' : 'hidden'}>
<HeavyPanel />
</Activity>visible：正常挂载渲染；hidden：离屏、不渲染 UI，但内部状态与副作用被保留（类似「冻结」），避免重挂载开销。| 方案 | 实现 | 状态保留 | 官方支持 |
|---|---|---|---|
display:none | CSS 隐藏 | 保留（始终挂载） | 是，但常驻 DOM |
| 手写 KeepAlive | 缓存 fiber / portal 搬运 | 保留 | 否，需维护 |
<Activity> | React 内建 | 保留且离屏不渲染 | 是，19.2+ |
<Activity> 的优势是「离屏即不渲染」，比常驻 DOM 更省，比手写方案更可靠（由 React 协调而非 hack）。
<Activity> 切换非紧急，可配合 useTransition 让切回大面板时的恢复不阻塞输入。它和 33-错误边界实践进阶 一样是「生产级组件」的体验保障。
<Activity> 是 React 官方的视图缓存原语：离屏不渲染但保留状态，取代脆弱的手写 KeepAlive，是 Tab / 路由缓存的推荐方案。