react如何遍历树
遍历树结构的常见方法
在React中遍历树结构通常采用递归或迭代的方式，以下是几种典型实现方案：
递归组件实现
通过组件自调用实现树形结构的渲染，适用于嵌套数据（如评论、菜单等）：
const TreeNode = ({ node }) => (
<div>
<div>{node.name}</div>
{node.children?.map(child => (
<TreeNode key={child.id} node={child} />
))}
</div>
);使用迭代方法
当需要避免递归深度过大时，可用栈或队列实现迭代遍历：
function TreeIterative({ root }) {
const [nodes] = useState([root]);
return (
<div>
{nodes.map(node => {
const children = node.children || [];
return (
<div key={node.id}>
<div>{node.name}</div>
{children.length > 0 && (
<TreeIterative root={children} />
)}
</div>
);
})}
</div>
);
}广度优先遍历（BFS）
利用队列实现层级遍历，适合需要按层级处理的场景：
function TreeBFS({ root }) {
const [queue] = useState([root]);
return (
<div>
{queue.length > 0 && queue.map(node => (
<div key={node.id}>
<span>{node.value}</span>
{node.children && node.children.forEach(child => {
queue.push(child);
})}
</div>
))}
</div>
);
}深度优先遍历（DFS）
通过栈实现非递归的深度优先遍历：
function TreeDFS({ root }) {
const [stack] = useState([root]);
return (
<div>
{stack.length > 0 && (
<div>
<span>{stack[0].value}</span>
{stack[0].children?.forEach(child => {
stack.unshift(child);
})}
<TreeDFS root={stack.pop()} />
</div>
)}
</div>
);
}使用第三方库
对于复杂树形结构操作，可考虑专用库：
react-arborist：提供虚拟化树形组件rc-tree：Ant Design的树组件基础实现react-sortable-tree：支持拖拽排序的树组件
性能优化建议
当处理大型树结构时：
- 添加
key属性帮助React识别节点变化 - 考虑虚拟滚动技术（如
react-window） - 使用
useMemo缓存计算结果 - 实现懒加载子节点数据
以上方法可根据具体场景选择，递归方式代码简洁但需注意调用栈深度，迭代方式更适合深层嵌套结构。
