React：解决props变化时列表全量重渲染引发的hover卡顿问题

问题本质 #

实现双栏（十六进制字节栏、ASCII字符栏）hover同步高亮时，将当前hover的字节索引存储在父组件中，会导致每次hover变更触发父组件重渲染，连带所有子节点参与diff流程；即使使用memo、useCallback做缓存，也仅能减少组件函数执行的开销，无法消除React遍历所有子节点做props比对的成本，大文件场景下（十万级以上字节节点）必然出现明显卡顿。

落地优化方案（按性能收益优先级排序） #

1. 绕开React状态流，用原生事件委托+CSS实现高亮（性能最优，推荐首选） #

完全不需要把hover状态接入React的渲染流程，直接用原生DOM能力实现，零React重渲染开销，哪怕百万级节点也能保持60帧响应：

• 给两栏中对应偏移位置的字节节点绑定统一的自定义标识，比如data-byte-idx={字节偏移值}
• 仅在两栏的外层容器上绑定1个mouseover事件监听器，用事件委托处理所有hover逻辑，绝对不要给每个字节节点单独绑定事件
• 事件回调逻辑直接操作DOM类名，不触发任何React状态更新：

const containerRef = useRef(null);
useEffect(() => {
  const container = containerRef.current;
  if (!container) return;

  let lastHighlighted = [];
  const handleHover = (e) => {
    const target = e.target.closest('[data-byte-idx]');
    // 移出字节节点时清除高亮
    if (!target) {
      lastHighlighted.forEach(node => node.classList.remove('hover-active'));
      lastHighlighted = [];
      return;
    }
    const currentIdx = target.dataset.byteIdx;
    // 前后hover是同一个节点直接跳过
    if (lastHighlighted[0]?.dataset.byteIdx === currentIdx) return;
    // 清除上一次的高亮
    lastHighlighted.forEach(node => node.classList.remove('hover-active'));
    // 给两栏同索引节点加高亮样式
    lastHighlighted = Array.from(container.querySelectorAll(`[data-byte-idx="${currentIdx}"]`));
    lastHighlighted.forEach(node => node.classList.add('hover-active'));
  };

  container.addEventListener('mouseover', handleHover);
  return () => container.removeEventListener('mouseover', handleHover);
}, []);

• 高亮样式完全通过CSS类.hover-active控制，整个交互过程不触发任何React调度，性能和原生JS实现一致。

如果配合虚拟滚动使用，仅需要把查询范围限定在当前虚拟滚动渲染的视口容器内，开销可以忽略。

2. 需联动React业务场景的优化 #

如果高亮逻辑需要联动选中、右键菜单、编辑标记等React状态，不能完全脱离React状态流时，按以下规则优化：

• 不要把hover索引存在父组件或Context中，改用支持细粒度订阅的状态方案（比如Zustand带selector订阅、Jotai原子化状态），保证只有「上一个高亮节点」「当前新高亮节点」两个组件会订阅状态变更触发重渲染，其余节点完全不感知状态变化
• 强制搭配虚拟滚动实现，大文件场景下永远不要全量渲染所有字节节点，用成熟的虚拟滚动组件只渲染视口范围内的节点，把单次渲染的组件数量控制在100-200区间，即使触发重渲染也不会有可感知的卡顿

3. 常见避坑点 #

• 不要给每个字节组件单独绑定hover事件监听器，上百个监听器本身就会拖慢交互响应速度，事件委托是唯一的高性能选择
• 不要在hover回调中做全文档范围的DOM查询，所有查询限定在字节列表容器内；缓存上一次高亮的节点列表，避免每次hover都做全量节点遍历
• 不要把memo当成大列表性能优化的银弹，memo只能跳过组件自身的执行，无法消除React遍历所有子节点做props比对的固定开销，节点量级上来之后这部分开销仍然足够造成卡顿

内容的提问来源于stack exchange，提问作者bluewave41