在React状态中使用Map()存储选中项是否为不良模式？

嘿，这个问题问得挺实在的！先给你吃个定心丸：用Map来存储选中项绝对不是什么不良模式，反而在很多场景下是非常合理的选择，关键看你的具体需求和操作频率。

下面分几种情况帮你捋清楚：

1. 数据量小、操作不频繁：Array完全够用 #

如果你的选中项数据量确实很小（比如几十条以内），而且查询、增删操作不是特别频繁，那Array的O(n)开销其实完全可以忽略不计。而且Array的API大家更熟悉，写起来也更顺手：

• 检查是否选中：selectedIds.includes(item.id)
• 添加选中项：selectedIds.push(item.id)（记得先判断是否已存在避免重复）
• 删除选中项：selectedIds = selectedIds.filter(id => id !== item.id)

这种情况下，Array的代码简洁易读，维护成本低，完全没必要纠结性能问题。

2. 频繁增删查、或需要关联额外数据：Map是更优解 #

如果你的组件需要频繁对选中项做查询、添加、删除操作，哪怕数据量不大，Map的O(1)操作也能让你的代码逻辑更清晰、性能更稳定：

• 检查是否选中：selectedMap.has(item.id)
• 添加选中项：selectedMap.set(item.id, true)（如果需要存额外信息，比如选中时的配置，直接把true换成对应数据就行）
• 删除选中项：selectedMap.delete(item.id)

这种写法不需要像Array那样用findIndex或者filter去遍历处理，逻辑更直接，也不容易出现漏判重复、删除不干净的问题。

3. 额外备选：用Set存纯标识 #

如果你的选中项只需要存储唯一的标识（比如ID），不需要关联任何额外数据，那Set其实比Map更合适。它就是专门为“存储唯一值集合”设计的，API同样是O(1)操作，而且更轻便：

• 检查是否选中：selectedSet.has(item.id)
• 添加选中项：selectedSet.add(item.id)（自动去重，不用自己判断）
• 删除选中项：selectedSet.delete(item.id)

总结 #

没有绝对的“正确答案”，只有最贴合你需求的选择：

• 简单场景选Array，代码直观；
• 频繁操作或需要存额外数据选Map；
• 纯唯一标识存储选Set。

不管选哪种，只要代码清晰、能满足业务需求，都没问题，完全不存在“不良模式”的说法~

内容的提问来源于stack exchange，提问作者Marina