递归组件白屏主因是数据结构非树形、缺乏深度守卫、模板未激活或innerhtml滥用；须转扁平数据为children树、加depth参数防爆栈、手动克隆template、禁用innerhtml拼接。
递归组件没渲染或白屏，先查数据结构是否为树形
Vue/React 里 RecursiveMenu 组件收不到子节点，大概率不是组件写错了，而是后端返回的扁平数组（如 [{id:1,parentId:0},{id:2,parentId:1}]）被直接塞进了 items。递归组件只认 children 数组，不认 parentId。
必须提前转树：用 Map 缓存所有节点，遍历一次，对每个节点按 parentId 找父项并 push 进 children；根节点识别要统一（parentId 是 0、null、'' 还是 undefined？建议全转成 undefined 再判断）。
- 别在组件
computed或v-for里反复做转树逻辑——时间复杂度会飙到O(n²) - 转树过程要防循环引用：用
Set记录已处理id，遇到重复id直接跳过或报错 - 转完立刻校验：检查是否有节点的
parentId指向不存在的id，这种脏数据会让递归卡死
深度超过 6 层就爆栈，守卫必须写进函数签名
RangeError: Maximum call stack size exceeded 不是偶然，是递归没设守卫的必然结果。PHP 的 renderCategoryTree() 或 JS 的 renderChildren()，如果函数签名里没显式带 depth 参数，等于把校验权交给数据源——而生产环境的数据永远有错配。
正确做法是：函数开头立即加守卫 if (depth > 6) return ''；每次递归调用必须传 depth + 1；类名、缩进、禁用状态等都基于这个参数生成，不能靠数组索引或全局计数器推导。
- Vue 中不要用
v-if和v-for同时写在递归节点上，改用v-show控制折叠态，避免渲染中断 - React 函数组件里，
depth必须作为参数传入，不能靠闭包变量累积，否则 memo 失效、重渲染错乱 - 服务端 PHP 渲染时，
$depth必须声明类型int，防止字符串"6"被当成true绕过守卫
<template></template> 标签不会自动递归，得手动 clone + 填充
<template></template> 是惰性容器，不是模板引擎。你嵌套一百层 <template></template>，它也只是一堆未解析的文本节点——<slot></slot> 不生效，{{item.name}} 不求值，cloneNode(true) 后仍是静态 HTML。
要让它“活起来”，必须手写 JS：遍历数据 → 匹配当前层级模板 → template.content.cloneNode(true) → 查找 data-slot="children" 元素 → 清空后插入递归生成的子 DOM → 最终 append 到目标容器。
- 每次
cloneNode(true)都是深拷贝，大数据量树建议加节流或虚拟滚动 - IE 完全不支持
<template></template>，降级方案只能用<script type="text/template"></script>+innerHTML解析（但要注意 XSS） -
<slot></slot>在多层<template></template>中无效，它是 Web Components 特性，只在自定义元素 Shadow DOM 里起作用
用 innerHTML += 拼递归菜单，等于放弃事件绑定和性能
表面上菜单出来了，实际上每次 innerHTML += 都会销毁旧 DOM、重建新节点、丢失所有事件监听器——点击子菜单没反应，键盘导航失效，XSS 漏洞敞口。
正确路径只有两条：要么用 DocumentFragment 累积节点再一次性挂载；要么用数组 push 字符串，最后 join('') 一次性赋值给 innerHTML（前提是所有动态内容都经 textContent 转义）。
- React/Vue 中绝对不要在组件内用
innerHTML渲染递归结果，交由虚拟 DOM 控制更新边界 - PHP 拼字符串时，子树 HTML 必须由
renderCategoryTree($child, $depth + 1)返回后拼接，不能把累积字符串当全局变量传参 - DOM 深度超 6 层时，
querySelectorAll('.menu-item')查询耗时随深度 +12%/层，别在递归里反复查
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
