React列表渲染中用Map缓存可避免重复计算、减少重渲染，支持动态/非字符串键；适用于派生数据缓存、按需更新（配合React.memo）、LRU淘汰及虚拟滚动，但不可替代useState或用于SSR。
在 React 列表渲染中，用 Map 做 Key-Value 缓存，核心是避免重复计算、减少重渲染开销，并精准控制缓存生命周期——它比普通对象更安全、更灵活，尤其适合动态键或非字符串键场景。
用 Map 缓存列表项的派生数据
当列表项需要根据 props 或状态做耗时处理（如格式化、过滤、聚合），可将结果缓存在 Map 中，以组合 key 为索引：
- key 推荐用稳定标识拼接，例如：
`${id}-${status}-${locale}` - 若 key 含对象（如 filter 配置），先
JSON.stringify({ id, status, ... })；含响应式引用（如 Vue 的 ref 或 React 的 useMemo 依赖）建议先解构再序列化，防止意外触发依赖收集 - 缓存逻辑可封装在自定义 Hook 内，配合
useMemo或useRef持久化 Map 实例，避免每次渲染重建
结合 React.memo + Map 实现按需更新
对子组件做精细化缓存控制时，Map 可存储“是否已渲染过某 id”的标记，配合 React.memo 跳过不必要的 diff：
- 在父组件维护一个
renderedCache = useRef(new Map()) - 子组件接收
id和data，父组件在 map 渲染前检查：if (renderedCache.current.has(id)) { /* 复用缓存 DOM 或跳过 */ } - 注意：该策略适用于 DOM 结构稳定、仅数据微调的场景（如局部状态更新），不替代 key 的语义作用
用 Map 实现带淘汰机制的列表缓存（如 LRU）
长列表滚动时，内存需可控。利用 Map 的插入顺序特性，轻松实现 LRU 缓存：
立即学习“Java免费学习笔记（深入）”；
- 每次
get或put时，先delete再set，把对应项移到末尾 - 超出容量时，用
cache.keys().next().value取最老的 key 并删除——无需额外数组或时间戳 - 示例：100 条数据的虚拟滚动列表，缓存最近访问的 20 项渲染结果，其余释放，显著降低内存占用
避开常见陷阱
Map 在 React 中不是万能缓存，要注意边界：
- 不要把整个列表 state 存进 Map 替代 useState——它不触发重渲染，违背 React 数据流原则
- 缓存值如果是函数或 JSX 元素，要确保其依赖项已稳定（如用 useCallback 包裹），否则缓存失效或闭包旧值
- 服务端渲染（SSR）时，
Map实例无法序列化，应只在客户端初始化，或用 plain object + JSON 做 fallback
