手写一个动态React菜单组件

为何要手写？既定的时间内没有找到合适的现有选择，放弃无谓的搜寻，自己写一个。

基本原理

1. 菜单数据接口获取，一级菜单UI事件监听，对应的下层二级菜单放到一级菜单item的dataset属性里，事件触发时取出并显示。
2. 事件监听（由于菜单之前不存在，于父层监听菜单item的冒泡事件）。
3. 一级菜单：监听mouseover而不是mouseenter,二级菜单监听click并实现跳转页面

功能设计图

基本效果

遇到的问题：菜单快速移动时卡顿

问题可能出自于：

• 频繁的事件触发 如下图所示：

• 频繁的同址DOM更迭（DOM操作） 同样，频繁的移入会导致频繁的二级菜单DOM更新操作。
• 二级菜单的更新是节点替换与重新渲染，每次都会引发重绘和回流
• 高亮实现与切换:遍历移除所有item的高量状态（class），再高亮当前。

---

一级菜单快速移动时存在轻微的卡顿

分析与解释

解决方案

• 一级菜单每个item间加一些外边距
• 对二级菜单更新DOM操作设置延时.
• 将所有二级菜单提前加载完毕，position设置为absolute，visibility为hidden，再通过切换visibility为visible或hidden控制显示与隐藏,只引发回流而重绘。
• 记录上次的高亮节点，每次取消高亮节点，点亮当前，节省遍历的开销.

---

本文完，由于水平有限，可能出现纰漏，望读者朋友不吝赐教！