本文探讨在 React 前端对同一数组按状态（如 new/purchased/damaged）进行三次分组渲染时，如何以单次遍历替代重复 filter()，显著提升性能与可维护性。核心方案是结合 useMemo 与 Array.prototype.reduce() 构建状态映射表。
本文探讨在 react 前端对同一数组按状态（如 new/purchased/damaged）进行三次分组渲染时，如何以**单次遍历**替代重复 `filter()`，显著提升性能与可维护性。核心方案是结合 `usememo` 与 `array.prototype.reduce()` 构建状态映射表。
在构建多标签（Tab）界面时，一个常见场景是：后端返回统一的汽车列表（cars: Car[]），每个对象包含 status: 'new' | 'purchased' | 'damaged' 字段，而 UI 需要分别渲染三个 Tab 下对应状态的子列表。此时若采用三次独立 filter()（如分别提取 newCars、purchasedCars、damagedCars），虽逻辑清晰，但存在明显性能冗余——数组被遍历了三次，时间复杂度为 O(3n) ≈ O(n)，但常数因子高达 3。
更优解是利用 reduce() 进行单次遍历、一次分组，将原始数组按 status 键归类到 Map
以下是推荐实现：
const carsMap = useMemo(() => {
return cars.reduce((map, car) => {
const { status } = car;
// 获取当前 status 对应的数组，若不存在则初始化空数组
const list = map.get(status) ?? [];
// 将当前 car 推入对应数组（注意：此处直接映射原始对象；如需字段精简，可在此处做 transform）
list.push({
id: car.id,
name: car.name,
// 其他需透传的字段...
});
return map.set(status, list);
}, new Map<string, Array<{ id: string; name: string }>>());
}, [cars]);使用时，各 Tab 可直接通过 Map#get() 安全获取对应列表：
立即学习“前端免费学习笔记（深入）”；
// 新车 Tab
{carsMap.get('new')?.map((car, index) => (
<CarItem key={car.id} car={car} />
))}
// 已购 Tab
{carsMap.get('purchased')?.map((car, index) => (
<CarItem key={car.id} car={car} />
))}
// 损坏 Tab
{carsMap.get('damaged')?.map((car, index) => (
<CarItem key={car.id} car={car} />
))}✅ 关键优势总结：
- 性能最优：仅遍历 cars 数组一次，避免重复扫描，尤其在数据量大（>1000 条）时差异显著；
- 内存友好：Map 查找时间复杂度为 O(1)，比多次 filter() + map() 的链式调用更高效；
- 可维护性强：新增状态（如 'reserved'）无需修改分组逻辑，只需在 UI 层添加新 Tab 并调用 get('reserved')；
- 类型安全：TypeScript 可精确约束 Map 的键值类型（如 Map）。
⚠️ 注意事项：
- 若需对每项做深度转换（如格式化日期、计算衍生字段），建议在 reduce 内部完成，而非在 map() 渲染时重复处理；
- Map#get() 返回 undefined，务必使用可选链（?.）或提供默认空数组（?? []）防止运行时错误；
- useMemo 依赖项 [cars] 必须准确——若 cars 是引用不变的对象（如来自 Redux store），需确保其浅层引用变化触发重计算；否则可考虑 useDeepCompareMemo 或规范化数据结构。
综上，当面对多状态分组需求时，reduce() + Map 是兼顾性能、可读性与扩展性的黄金组合，应作为前端数据预处理的首选模式。
