当前位置：首页 > React

react如何遍历树

2026-03-30 21:15:33React

遍历树结构的方法

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

递归组件法

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

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

广度优先遍历

利用队列实现层级遍历：

react如何遍历树

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>;
}

树形控件实现

结合状态管理实现可折叠树：

react如何遍历树

function CollapsibleTree({ node }) {
  const [expanded, setExpanded] = useState(false);

  return (
    <div style={{ paddingLeft: '20px' }}>
      <button onClick={() => setExpanded(!expanded)}>
        {expanded ? '-' : '+'} {node.name}
      </button>
      {expanded && node.children?.map(child => (
        <CollapsibleTree key={child.id} node={child} />
      ))}
    </div>
  );
}

性能优化建议

对于大型树结构应考虑以下优化手段：

使用React.memo避免不必要的重新渲染
虚拟滚动技术处理超长列表
惰性加载未展开的子树数据
为每个节点设置稳定的key属性

数据结构示例

典型树节点结构如下：

const treeData = {
  id: 1,
  name: 'Root',
  children: [
    {
      id: 2,
      name: 'Child 1',
      children: [
        { id: 3, name: 'Grandchild 1' }
      ]
    }
  ]
};