React Keep-Alive 实现

核心答案

React无原生Keep-Alive，核心目标是缓存组件DOM和状态，避免卸载，仅隐藏组件。

1. 核心思路：缓存组件的Fiber节点、DOM节点及内部状态，通过"隐藏而非卸载"实现状态保留。

2. 常用方案：基础版用HOC控制display属性；工业级用react-activation库（基于Portal和缓存池）；路由场景通过维护组件缓存池实现。

3. 关键点：避免组件卸载、确保状态恢复、实现缓存管理（防止内存泄漏）。

延伸追问

• 1. Keep-Alive缓存的是组件的哪些内容？——组件的Fiber节点、DOM节点、内部state及ref等状态。

• 2. 大量缓存组件会导致什么问题？如何解决？——会造成内存泄漏，需实现LRU等缓存淘汰策略或手动清除无用缓存。

• 3. React 18的Concurrent Mode对Keep-Alive实现有影响吗？——有影响，需适配并发更新的Fiber架构，确保缓存状态与并发渲染兼容。

• 4. 如何实现"按需缓存"？——按路由、组件cacheKey控制缓存启用/禁用，仅缓存必要组件。

• 5. Keep-Alive与memo的区别？——Keep-Alive缓存组件实例（避免卸载），memo缓存组件渲染结果（避免重复渲染）。

（注：文档部分内容可能由 AI 生成）