直接用 render 递归组件报 “Maximum update depth exceeded” 是因 props 引用不稳定导致无限重渲染；需用 useMemo 保证 data 稳定、避免内联函数、不触发副作用，并配合展开状态控制渲染时机。
为什么直接用 render 递归组件会报 “Maximum update depth exceeded”？
React 中用函数组件递归渲染树形结构时，常见错误是没控制好 props 变化，导致每次渲染都生成新对象或新数组，触发子组件无限重渲染。核心问题不在递归本身，而在 children 或 data 属性的引用稳定性。
- 避免在父组件内直接写
{data.children.map(...)}并传入内联函数作为子项渲染逻辑 - 确保传给子组件的
data是稳定引用（比如来自useMemo或原始数据源） - 不要在递归组件内部调用
setState或触发副作用（如useEffect无依赖数组）而意外引起重渲染
TreeItem 组件怎么写才支持多层嵌套且不卡顿？
关键不是“能递归”，而是“只在必要时递归”。建议用懒加载 + 展开状态控制子树是否挂载，而不是一次性渲染全部节点。
- 用
useState管理每个节点的expanded状态，初始可设为false - 只在
expanded === true时才渲染children，否则用占位符（如"▶"按钮） - 对深层嵌套加
shouldComponentUpdate类似逻辑：用React.memo包裹TreeItem，并确保props浅比较稳定 - 若节点数超 500，考虑虚拟滚动（如
react-window），但注意它不原生支持嵌套结构，需自行 flatten 数据
如何让 TreeNode 支持点击折叠、拖拽排序、右键菜单？
这些交互能力必须和递归结构解耦——把行为逻辑提到父级或自定义 Hook 里，而不是塞进递归组件内部。
- 折叠/展开统一由父组件管理一个
expandedKeysSet 或 Map，通过onToggle回调通知父级更新 - 拖拽排序不要在
TreeItem内处理onDragStart，改用HTML5 Drag and Drop API的dataTransfer.setData存节点 key，再在目标位置onDrop时重组数据 - 右键菜单推荐用
contextMenu事件 +event.preventDefault()，配合绝对定位浮层；菜单项操作（如删除、新增）应触发父组件的onContextMenuAction回调，而非在子组件里直接修改 state
Vue 3 的 v-for 递归模板为什么总丢 key 或响应失效？
Vue 的递归组件必须显式命名，并在模板中用该名称调用自身；key 必须基于每个节点唯一标识（不能只用索引），且整个数据结构需是响应式的。
立即学习“Java免费学习笔记（深入）”；
- 组件名要和
name选项一致，例如name: 'TreeNode'，模板里写 - 如果数据来自 API，用
ref或reactive包裹，否则node.children变化不会触发更新 - 避免在
v-for中使用计算属性返回新数组（如computed(() => data.filter(...))），这会导致 key 失效；应预处理好数据再传入
id 字段最稳妥，但要注意它是否真正全局唯一——尤其涉及跨层级拖拽合并时，重复 id 会让 Vue/React 的 diff 算法出错。 
