ReactJS渲染JSX时如何避免嵌套map循环？

首先要明确：你当前的嵌套map写法，实际时间复杂度并非严格的O(n²)——总操作数等于「分类数量 + 所有分类下的菜品总数」，本质是线性复杂度O(N)（N为总菜品数+分类数）。除非你的菜单有上百个分类且每个分类有上百个菜品，否则这种写法的性能影响可以忽略不计。但如果想让代码结构更简洁，或者从数据结构层面优化，可以参考以下两种方案：

方案1：预处理扁平化数据，统一渲染 #

先将嵌套的菜单数据扁平化为包含分类信息的一维数组，再通过一次遍历完成分类标题和菜品卡片的渲染：

步骤1：扁平化数据 #

// 把嵌套结构转为扁平数组，每个菜品保留所属分类
const flattenedMenu = menuData.flatMap(category => 
  category.items.map(food => ({ ...food, categoryTitle: category.title }))
);

步骤2：渲染扁平化后的数据 #

使用reduce遍历数组，当遇到新分类时先渲染分类标题，再渲染菜品卡片：

<div className="container-fluid">
  <div className="rajat-menu-wrapper">
    {flattenedMenu.reduce((elements, currentFood, index) => {
      // 第一个元素或当前菜品分类与前一个不同时，插入分类标题
      if (index === 0 || flattenedMenu[index - 1].categoryTitle !== currentFood.categoryTitle) {
        elements.push(
          <h1 
            key={`category-${currentFood.categoryTitle}`} 
            className="rajat-menu-category-heading"
          >
            <span>{currentFood.categoryTitle}</span>
          </h1>
        );
      }
      elements.push(<FoodCard key={currentFood.name} data={currentFood} />);
      return elements;
    }, [])}
  </div>
</div>

这种写法避免了嵌套map，代码逻辑更线性，同时完全保留原有的样式和信息展示。

方案2：组件拆分，优化代码可读性 #

如果不想修改数据结构，可以通过拆分组件的方式，把嵌套逻辑分散到不同组件中，让主组件代码更简洁：

步骤1：拆分分类组件 #

// 单独的分类区域组件
const MenuCategory = ({ category }) => (
  <div key={category.title}>
    <h1 className="rajat-menu-category-heading"><span>{category.title}</span></h1>
    {category.items.map(foodItem => <FoodCard key={foodItem.name} data={foodItem} />)}
  </div>
);

步骤2：主组件调用分类组件 #

<div className="container-fluid">
  <div className="rajat-menu-wrapper">
    {menuData.map(category => <MenuCategory category={category} />)}
  </div>
</div>

这种方式没有改变时间复杂度，但代码结构更清晰，符合React组件拆分的最佳实践，后续维护和扩展也更方便。

额外优化建议：关注组件重渲染性能 #

比起纠结嵌套map的复杂度，更实际的优化是避免不必要的组件重渲染：给FoodCard组件添加React.memo，确保只有当菜品数据变化时才重新渲染：

import { memo } from 'react';

const FoodCard = memo(({ data }) => {
  // FoodCard的渲染逻辑
});

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