如何使用useReducer和优化数据结构管理React中的嵌套对象数组

在React应用开发过程中，经常会遇到需要管理嵌套对象数组的场景，比如多级菜单、树形列表、购物车商品规格组合等。这类数据的层级深、关联关系复杂，直接用useState管理很容易写出冗余且易出错的更新逻辑，还会因为不当的不可变处理导致性能问题。useReducer配合优化的数据结构可以从根本上解决这些问题，让复杂状态的管理变得更清晰高效。

嵌套对象数组直接管理的痛点

很多开发者一开始会尝试用useState管理嵌套对象数组，比如下面这样的数据结构，代表一个多级分类列表：

// 初始嵌套对象数组
const initCategories = [
  {
    id: 1,
    name: '电子产品',
    children: [
      {
        id: 11,
        name: '手机',
        children: [
          { id: 111, name: '智能手机', children: [] },
          { id: 112, name: '功能手机', children: [] }
        ]
      }
    ]
  }
];

如果要修改id为111的分类名称，用useState需要写很深的展开逻辑：

// useState方式更新深层嵌套数据
const [categories, setCategories] = useState(initCategories);

const updateCategoryName = (id, newName) => {
  const updateDeep = (list) => {
    return list.map(item => {
      if (item.id === id) {
        return { ...item, name: newName };
      }
      if (item.children.length > 0) {
        return { ...item, children: updateDeep(item.children) };
      }
      return item;
    });
  };
  setCategories(updateDeep(categories));
};

这种方式的问题很明显：嵌套层级越深，更新逻辑越复杂，容易出现遗漏展开的情况导致状态突变；每次更新都会生成大量中间对象，即使没有变化的节点也会被重新创建，引发子组件不必要的重渲染；如果后续需要新增、删除嵌套节点，还要写更多类似的递归逻辑，代码可维护性很差。

useReducer的基础用法

useReducer是React提供的用于管理复杂状态的Hook，它接收两个参数：一个是reducer函数，用来定义状态更新的逻辑；另一个是初始状态。返回当前状态和dispatch方法，通过dispatch触发对应的action来更新状态。

基础的useReducer使用示例如下：

import { useReducer } from 'react';

// 定义reducer函数，接收当前state和action，返回新state
function counterReducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      return state;
  }
}

function Counter() {
  // 初始化useReducer，传入reducer和初始状态
  const [state, dispatch] = useReducer(counterReducer, { count: 0 });

  return (
    

      
当前计数：{state.count}
       dispatch({ type: 'increment' })}>加1
       dispatch({ type: 'decrement' })}>减1
    
  );
}

useReducer的核心优势是把状态更新逻辑集中到reducer函数中，让组件本身只负责触发action，逻辑更清晰，也方便后续扩展新的状态操作。

优化数据结构：用扁平化结构替代嵌套结构

要解决嵌套对象数组的管理问题，首先可以优化数据结构，把嵌套的树形结构改成扁平化的键值对结构，用id作为键，每个节点只保存自身的属性和父节点id，不嵌套children数组。

上面的分类数据可以优化为：

// 优化后的扁平化数据结构
const initFlatCategories = {
  1: { id: 1, name: '电子产品', parentId: null },
  11: { id: 11, name: '手机', parentId: 1 },
  111: { id: 111, name: '智能手机', parentId: 11 },
  112: { id: 112, name: '功能手机', parentId: 11 }
};

这种结构的好处是：更新任意节点只需要修改对应id的对象，不需要递归遍历整个树；获取某个节点的子节点只需要遍历所有节点筛选parentId即可；新增、删除节点只需要操作对应的键值对，逻辑非常简单。

结合useReducer管理优化后的数据结构

接下来把扁平化结构和useReducer结合，实现嵌套对象数组的完整管理功能，包括更新节点名称、新增子节点、删除节点。

定义action类型

首先定义所有需要支持的状态操作对应的action类型：

// 定义action类型常量
const ACTION_TYPES = {
  UPDATE_NAME: 'UPDATE_NAME',
  ADD_CHILD: 'ADD_CHILD',
  DELETE_NODE: 'DELETE_NODE'
};

编写reducer函数

reducer函数处理不同的action，返回新的状态对象，保证状态的不可变性：

function categoryReducer(state, action) {
  switch (action.type) {
    case ACTION_TYPES.UPDATE_NAME: {
      // 更新指定id的节点名称
      const { id, newName } = action.payload;
      // 如果节点不存在直接返回原状态
      if (!state[id]) return state;
      return {
        ...state,
        [id]: {
          ...state[id],
          name: newName
        }
      };
    }
    case ACTION_TYPES.ADD_CHILD: {
      // 新增子节点，payload包含父节点id和新节点信息
      const { parentId, newNode } = action.payload;
      return {
        ...state,
        [newNode.id]: {
          ...newNode,
          parentId: parentId
        }
      };
    }
    case ACTION_TYPES.DELETE_NODE: {
      // 删除节点，同时删除所有子节点
      const { id } = action.payload;
      const newState = { ...state };
      // 递归删除所有子节点
      const deleteChildren = (nodeId) => {
        delete newState[nodeId];
        // 找到所有parentId为当前节点id的子节点
        Object.values(newState).forEach(item => {
          if (item.parentId === nodeId) {
            deleteChildren(item.id);
          }
        });
      };
      deleteChildren(id);
      return newState;
    }
    default:
      return state;
  }
}

在组件中使用

在组件中初始化useReducer，实现对应的操作方法，同时可以写一个工具函数把扁平化数据转成树形结构用于渲染：

import { useReducer } from 'react';

// 扁平化转树形的工具函数
function flatToTree(flatData, parentId = null) {
  const tree = [];
  Object.values(flatData).forEach(item => {
    if (item.parentId === parentId) {
      const children = flatToTree(flatData, item.id);
      tree.push({
        ...item,
        children: children.length > 0 ? children : []
      });
    }
  });
  return tree;
}

function CategoryManager() {
  const [categoryMap, dispatch] = useReducer(categoryReducer, initFlatCategories);

  // 更新节点名称的方法
  const handleUpdateName = (id, newName) => {
    dispatch({
      type: ACTION_TYPES.UPDATE_NAME,
      payload: { id, newName }
    });
  };

  // 新增子节点的方法
  const handleAddChild = (parentId) => {
    const newNodeId = Date.now(); // 实际项目可以用更可靠的id生成方式
    dispatch({
      type: ACTION_TYPES.ADD_CHILD,
      payload: {
        parentId,
        newNode: { id: newNodeId, name: '新分类' }
      }
    });
  };

  // 删除节点的方法
  const handleDeleteNode = (id) => {
    dispatch({
      type: ACTION_TYPES.DELETE_NODE,
      payload: { id }
    });
  };

  // 把扁平化数据转成树形用于渲染
  const treeData = flatToTree(categoryMap);

  // 渲染树形列表的递归组件
  const renderTree = (list) => {
    return (
      

        {list.map(item => (
          

            {item.name}
             handleUpdateName(item.id, item.name + '_修改')}>修改名称
             handleAddChild(item.id)}>添加子分类
             handleDeleteNode(item.id)}>删除
            {item.children.length > 0 && renderTree(item.children)}
          
        ))}
      
    );
  };

  return (
    

      
分类管理
      {renderTree(treeData)}
    
  );
}

性能对比和注意事项

对比原来的嵌套结构加useState的方式，优化后的方案有明显优势：

• 更新逻辑更简单，不需要递归遍历整个嵌套结构，只需要操作对应id的节点
• 状态更新更可控，reducer函数集中管理所有状态变更逻辑，不容易出现状态突变的问题
• 性能更好，因为没有变化的节点不会生成新对象，配合React.memo可以避免不必要的子组件重渲染

需要注意的点：扁平化结构的treeData转换需要在渲染时进行，如果数据量很大，可以配合useMemo缓存转换结果，避免每次渲染都重新计算。另外id生成在实际项目中建议使用uuid或者后端返回的唯一标识，不要用Date.now()避免冲突。如果嵌套层级非常深且不需要频繁更新深层节点，也可以结合Immutable.js等不可变数据工具来管理嵌套结构，但是扁平化结构在大多数场景下是更轻量的选择。

useReducerReact嵌套对象数组数据结构优化修改时间：2026-06-30 18:12:56