当前位置：首页 > React

react如何遍历树

2026-02-26 04:23:44React

遍历树结构的方法

在React中遍历树结构通常涉及递归或迭代方法，以下是几种常见实现方式：

递归组件法

使用React组件自身递归渲染子节点：

const TreeNode = ({ node }) => (
  <div>
    {node.name}
    {node.children?.map(child => (
      <TreeNode key={child.id} node={child} />
    ))}
  </div>
);

迭代法（广度优先）

利用队列实现非递归的广度优先遍历：

function TreeBFS({ root }) {
  const [result, setResult] = useState([]);

  useEffect(() => {
    const queue = [root];
    const nodes = [];
    while (queue.length) {
      const current = queue.shift();
      nodes.push(current);
      if (current.children) {
        queue.push(...current.children);
      }
    }
    setResult(nodes);
  }, [root]);

  return <div>{result.map(node => (
    <div key={node.id}>{node.name}</div>
  ))}</div>;
}

迭代法（深度优先）

使用栈实现非递归的深度优先遍历：

function TreeDFS({ root }) {
  const [result, setResult] = useState([]);

  useEffect(() => {
    const stack = [root];
    const nodes = [];
    while (stack.length) {
      const current = stack.pop();
      nodes.push(current);
      if (current.children) {
        stack.push(...[...current.children].reverse());
      }
    }
    setResult(nodes);
  }, [root]);

  return <div>{result.map(node => (
    <div key={node.id}>{node.name}</div>
  ))}</div>;
}

性能优化建议

对于大型树结构，建议添加以下优化措施：

为每个节点设置唯一key属性
对展开/折叠状态进行本地管理
使用虚拟滚动技术（如react-window）处理超大树

树操作扩展

常见的树操作方法可以封装为工具函数：

// 查找节点
function findNode(tree, predicate) {
  for (const node of tree) {
    if (predicate(node)) return node;
    if (node.children) {
      const found = findNode(node.children, predicate);
      if (found) return found;
    }
  }
  return null;
}

以上方法可根据具体需求组合使用，递归方式代码简洁但可能受调用栈限制，迭代方式性能更稳定但代码稍复杂。

react如何遍历树