React自定义下拉框操作DOM修改data属性会引发repaint性能问题吗？

你的实现属于合理的高效实现，不存在严重的性能隐患。

原因说明 #

• 浏览器本身自带DOM修改的批量合并优化，同步任务中多次修改DOM属性不会逐次触发重绘，而是全部修改完成后只触发一次重绘，你在DevTools中观测到的Paint次数很少已经验证了这一点，不需要担心循环修改DOM的性能问题。
• 你没有修改React状态，避免了下拉组件及其子元素的重渲染开销，对于下拉框这类通常选项数最多只有几十项的组件，直接操作DOM的开销可以忽略不计。
• 观测到的大量Composite layer操作属于正常的高效渲染表现：如果data-selected关联的样式只涉及opacity、transform这类不需要重排重绘的属性，浏览器会直接走合成层渲染，性能消耗远低于Paint操作。

可选优化点 #

如果后续你的下拉选项数量会超过100项，可以优化逻辑避免每次遍历所有子元素，进一步降低开销：

// 新增ref存储当前选中的选项
const currentSelectedItem = useRef(null);

const handleChildMouseOver = (event) => {
  // 清除上一个选中项的标记
  if (currentSelectedItem.current) {
    currentSelectedItem.current.removeAttribute("data-selected");
  }
  // 匹配当前hover的选项（提前给所有选项加data-role="option"属性避免误匹配）
  const targetOption = event.target.closest('[data-role="option"]');
  if (targetOption) {
    targetOption.setAttribute("data-selected", "true");
    currentSelectedItem.current = targetOption;
  }
}

选项数较少的场景下是否做这个优化差异不大。

内容的提问来源于stack exchange，提问作者Tim R. Jensen