react树形结构如何遍历
深度优先遍历（DFS）
深度优先遍历从根节点开始，沿着树的深度遍历子节点，直到没有子节点为止，再回溯到上一层继续遍历。适用于需要优先处理子节点或递归场景。
递归实现
function traverseTreeDFS(node) {
if (!node) return;
console.log(node.value); // 处理当前节点
node.children?.forEach(child => traverseTreeDFS(child)); // 递归子节点
}非递归实现（使用栈）
function traverseTreeDFS(root) {
const stack = [root];
while (stack.length) {
const node = stack.pop();
console.log(node.value); // 处理当前节点
// 子节点逆序入栈（保证顺序正确）
node.children?.slice().reverse().forEach(child => stack.push(child));
}
}广度优先遍历（BFS）
广度优先遍历按层级从上到下逐层遍历，适用于需要按层级处理节点的场景（如渲染目录结构）。
实现（使用队列）
function traverseTreeBFS(root) {
const queue = [root];
while (queue.length) {
const node = queue.shift();
console.log(node.value); // 处理当前节点
node.children?.forEach(child => queue.push(child)); // 子节点入队
}
}实际应用示例
渲染树形组件
function TreeNode({ node }) {
return (
<div>
<span>{node.name}</span>
{node.children?.map(child => (
<TreeNode key={child.id} node={child} />
))}
</div>
);
}查找特定节点
function findNodeById(root, id) {
const queue = [root];
while (queue.length) {
const node = queue.shift();
if (node.id === id) return node;
node.children?.forEach(child => queue.push(child));
}
return null;
}性能优化建议
- Memoization: 对递归组件使用
React.memo避免不必要的渲染。 - 虚拟滚动: 对大型树结构使用虚拟滚动技术（如
react-window）。 - Immutable数据: 使用Immutable.js或Immer管理树数据，减少重复渲染。
注意事项
- 循环引用需特殊处理（如使用
visited集合）。 - 深度过大的递归可能导致栈溢出，建议非递归实现。
- 动态加载子树时考虑分片遍历。
