提升React网格多选/悬停状态性能，解决交互延迟问题

核心问题排查 #

你当前的延迟主要来自这几个点：

• 100ms的debounce直接拖慢了交互反馈
• 每个单元格绑定onMouseEnter的事件开销（虚拟网格单元格动态挂载卸载，频繁绑定解绑）
• 用state存单个高亮单元格导致的频繁渲染更新

具体优化步骤 #

1. 调整防抖策略，移除过长延迟 #

预选是即时交互，100ms的防抖完全没必要，改成10-20ms的节流，或者直接去掉防抖——虚拟网格本身只渲染可视区域单元格，事件触发量不会大到性能爆炸：

import { throttle } from 'lodash';

// 用节流替代防抖，缩短延迟
const handlePreselect = throttle((targetIndex) => {
  // 处理预选范围计算逻辑
}, 10);

2. 全局监听容器鼠标事件，替代单元格绑定 #

给虚拟网格容器绑定mousemove事件，通过鼠标坐标计算hover的单元格索引，比给每个单元格绑事件高效得多，还能避免单元格动态挂载时的事件延迟：

import { useRef, useEffect, useState } from 'react';

function VirtualGrid() {
  const gridContainerRef = useRef(null);
  const shiftPressedRef = useRef(false);
  const lastSelectedIndexRef = useRef(null);
  const [preselectedRange, setPreselectedRange] = useState([null, null]);

  // 监听Shift键状态，用ref存避免触发组件重渲染
  useEffect(() => {
    const handleKeyDown = (e) => {
      if (e.key === 'Shift') shiftPressedRef.current = true;
    };
    const handleKeyUp = (e) => {
      if (e.key === 'Shift') shiftPressedRef.current = false;
    };
    window.addEventListener('keydown', handleKeyDown);
    window.addEventListener('keyup', handleKeyUp);
    return () => {
      window.removeEventListener('keydown', handleKeyDown);
      window.removeEventListener('keyup', handleKeyUp);
    };
  }, []);

  // 监听容器鼠标移动，计算当前hover的单元格
  useEffect(() => {
    const container = gridContainerRef.current;
    if (!container) return;

    const handleMouseMove = (e) => {
      if (!shiftPressedRef.current || !lastSelectedIndexRef.current) return;

      // 根据网格布局计算单元格索引（自行替换成你的列数、单元格尺寸）
      const rect = container.getBoundingClientRect();
      const columnCount = 4;
      const cellWidth = container.clientWidth / columnCount;
      const cellHeight = 150;
      const colIndex = Math.floor((e.clientX - rect.left) / cellWidth);
      const rowIndex = Math.floor((e.clientY - rect.top) / cellHeight);
      const currentIndex = rowIndex * columnCount + colIndex;

      // 计算预选区间，更新状态
      const start = Math.min(lastSelectedIndexRef.current, currentIndex);
      const end = Math.max(lastSelectedIndexRef.current, currentIndex);
      setPreselectedRange([start, end]);
    };

    container.addEventListener('mousemove', handleMouseMove);
    return () => container.removeEventListener('mousemove', handleMouseMove);
  }, []);

  return (
    <div ref={gridContainerRef} className="virtual-grid">
      {/* 虚拟网格单元格渲染逻辑 */}
      {visibleCells.map(cell => (
        <GridCell
          key={cell.index}
          index={cell.index}
          isInPreselectedRange={
            preselectedRange[0] !== null && 
            cell.index >= preselectedRange[0] && 
            cell.index <= preselectedRange[1]
          }
        />
      ))}
    </div>
  );
}

3. 优化状态存储与渲染逻辑 #

• 不要存单个高亮单元格，而是存预选区间（startIndex和endIndex），一次state更新就能覆盖整个预选范围，减少更新次数
• 用React.memo包裹单元格组件，只有当索引、选中状态、预选状态等关键props变化时才重新渲染：

const GridCell = React.memo(({ index, isInPreselectedRange, isSelected }) => {
  return (
    <div 
      className={`cell 
        ${isSelected ? 'selected' : ''} 
        ${isInPreselectedRange ? 'preselected' : ''}`}
    >
      {/* 单元格内容 */}
    </div>
  );
});

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