虚拟滚动处理嵌套结构的技巧

本文深入解析了如何用虚拟滚动高效渲染复杂树形菜单——核心在于将嵌套树结构智能拍平为带层级元信息（如level、isExpanded、path）的线性数组，既规避万级节点递归渲染的性能陷阱，又通过增量更新索引、CSS状态驱动缩进与图标、滚动锚定及键盘导航协同等技巧，实现丝滑展开/折叠、精准焦点控制与无缝交互；更强调扁平化必须可逆，确保搜索高亮、拖拽定位等高级功能不打折扣，真正让深度嵌套数据在虚拟滚动中“既快又准、既轻又全”。

虚拟滚动处理树形菜单这类嵌套结构，核心不是“展开所有节点再滚动”，而是把树拍平成可索引的线性列表，同时保留层级关系和展开状态——这样既能复用标准虚拟滚动逻辑，又能精准控制渲染粒度和交互响应。

拍平树结构：用扁平化数组替代递归渲染

万级数据下，直接递归遍历 DOM 节点必然卡顿。正确做法是预处理原始树数据，生成一个带层级、缩进、是否为叶子节点、是否展开等元信息的扁平数组。例如：

• 每个节点记录 level（缩进层级）、isExpanded（当前是否展开）、hasChildren（是否有子节点）
• 仅当父节点展开且有子节点时，才将子节点推入扁平数组；折叠时子节点自动剔除
• 使用 map + reduce 或栈式遍历一次性生成，避免多次递归调用栈开销

动态计算可视区域索引：支持展开/折叠实时重映射

用户点击展开某节点时，不能重新生成整个扁平数组再重置滚动位置——这会导致跳动和卡顿。应采用增量更新策略：

• 维护一个全局 visibleStart / visibleEnd 索引范围，配合 scrollTop 和行高动态计算
• 展开节点时，只在扁平数组对应位置 splice 插入其子节点，并同步调整后续所有节点的索引偏移量
• 利用 Map 缓存每个 node.id → 在扁平数组中的起始索引，加速定位与局部更新

渲染层按需绑定：用 CSS 缩进 + 状态驱动图标

渲染时无需为每层写多层嵌套 JSX，而是统一用单个