React 中按状态分组数据的最优实践：一次遍历胜过多次过滤

在 react 前端需将汽车数组按 status（如 ‘new’/’purchased’/’damaged’）分组渲染时，避免重复遍历是提升性能的关键；使用 Array.prototype.reduce() 配合 map 仅需单次遍历即可完成三组数据构建，比多次 Filter() 或嵌套 filter + map 更高效、更简洁。

在 react 前端需将汽车数组按 status（如 ‘new’/’purchased’/’damaged’）分组渲染时，避免重复遍历是提升性能的关键；使用 `array.prototype.reduce()` 配合 `map` 仅需单次遍历即可完成三组数据构建，比多次 `filter()` 或嵌套 `filter + map` 更高效、更简洁。

当后端返回的是未分类的原始汽车数组（例如 [{id: 1, status: ‘new’}, {id: 2, status: ‘damaged’}, …]），而 ui 需要为三种状态分别渲染独立 Tab 时，开发者常面临一个关键权衡：如何在保证可维护性的同时，最小化计算开销？

你最初采用的方案——对同一数组三次调用 .filter().map()——看似直观，实则隐含性能损耗：

const newCars = useMemo(() => cars.filter(c => c.status === 'new').map(c => ({ id: c.id })), [cars]); const purchasedCars = useMemo(() => cars.filter(c => c.status === 'purchased').map(c => ({ id: c.id })), [cars]); const damagedCars = useMemo(() => cars.filter(c => c.status === 'damaged').map(c => ({ id: c.id })), [cars]);

该写法会遍历 cars 数组共 3 次，时间复杂度为 O(3n) ≈ O(n)，虽属线性，但常数因子显著增大，尤其在 cars 规模达数百或上千项时，可测得明显延迟（尤其在低功耗设备或频繁更新场景下）。

而你尝试的 Map 方案虽结构更集中，但核心逻辑仍为：

statuses.forEach(status =>    cars.filter(car => car.status === status) // ❌ 每次都重遍历整个 cars );

→ 仍未解决重复遍历问题，性能与第一种方案实质等价。

✅ 正确解法：单次遍历 + 分流聚合
利用 Array.prototype.reduce() 在一次迭代中完成状态分组，配合 Map 存储结果。它将时间复杂度严格控制在 O(n)（常数因子为 1），且语义清晰、扩展性强：

const carsByStatus = useMemo(() => {   return cars.reduce((map, car) => {     const { status } = car;     const list = map.get(status) ?? [];     list.push({       id: car.id,       // ✅ 按需映射其他字段，避免冗余属性       name: car.name,       year: car.year,     });     return map.set(status, list);   }, new Map<String, Array<{ id: number; name: string; year: number }>>()); }, [cars]);

使用时直接取值渲染：

// 新车 Tab {carsByStatus.get('new')?.map((car, idx) => (   <CarItem key={car.id} car={car} /> ))}  // 已购 Tab {carsByStatus.get('purchased')?.map((car, idx) => (   <CarItem key={car.id} car={car} /> ))}

⚠️ 注意事项：

• key 推荐用唯一 ID 而非 index：map() 中若用 index 作 key，当列表顺序变化（如排序、增删）时易触发错误 dom 复用，应始终优先使用稳定标识符（如 car.id）；
• Map 的默认值处理：get(status) 可能返回 undefined，务必通过可选链 ?. 或空值合并 ?? [] 安全访问；
• 类型安全增强：typescript 下可定义精确的 Map 类型（如 Map），配合 as const 断言实现编译期状态校验；
• 是否预设所有状态？ 若业务要求三个 Tab 始终存在（即使某状态无数据），可在 reduce 前初始化 Map：new Map([[‘new’,[]],[‘purchased’,[]],[‘damaged’,[]]])。

? 总结：
在数据分组场景中，“一次遍历”是性能优化的黄金准则。reduce + Map 不仅击败多次 filter 的运行效率，还提升了代码内聚性——逻辑集中、状态明确、易于单元测试。相比“为每个 Tab 单独计算”，它天然支持动态状态扩展（如未来新增 ‘reserved’ 状态，仅需追加枚举值，无需新增 useMemo 块）。真正的 clean code，始于对数据流动本质的理解。