当前位置：首页 > React

react实现递归

2026-01-26 17:00:16React

React 实现递归的方法

在 React 中实现递归通常用于渲染嵌套数据结构（如树形菜单、评论回复等）。以下是几种常见的实现方式：

递归组件

通过组件调用自身实现递归渲染：

function Tree({ data }) {
  return (
    <ul>
      {data.map((item) => (
        <li key={item.id}>
          {item.name}
          {item.children && <Tree data={item.children} />}
        </li>
      ))}
    </ul>
  );
}

使用 useReducer

对于复杂递归逻辑，useReducer 可以管理状态：

function reducer(state, action) {
  switch (action.type) {
    case 'toggle':
      return state.map(item => 
        item.id === action.id 
          ? { ...item, expanded: !item.expanded }
          : item
      );
    default:
      return state;
  }
}

function RecursiveList({ items }) {
  const [state, dispatch] = useReducer(reducer, items);

  return (
    <ul>
      {state.map(item => (
        <li key={item.id}>
          <button onClick={() => dispatch({ type: 'toggle', id: item.id })}>
            {item.name}
          </button>
          {item.expanded && item.children && (
            <RecursiveList items={item.children} />
          )}
        </li>
      ))}
    </ul>
  );
}

性能优化

递归组件可能导致性能问题，可通过以下方式优化：

react实现递归

添加适当的 key 属性
使用 React.memo 避免不必要的重渲染
对大数据集进行虚拟滚动处理

const MemoizedTree = React.memo(function Tree({ data }) {
  return (
    <ul>
      {data.map((item) => (
        <li key={item.id}>
          {item.name}
          {item.children && <MemoizedTree data={item.children} />}
        </li>
      ))}
    </ul>
  );
});