如何避免动态修改鼠标光标时触发React组件重渲染

AI 小北

2026-8-25

解决React动态修改光标不触发重渲染的方法

核心思路是绕过React状态更新机制，直接通过DOM操作修改光标样式，避免因useState更新触发组件重渲染。以下是具体实现方案：

1. 使用`useRef`直接操作目标DOM元素

步骤：

创建useRef指向承载图表的容器div
在Chart.js的hover事件中，直接修改该DOM元素的cursor样式

代码示例：

import { useRef, useEffect } from 'react';
import Chart from 'chart.js/auto';

function ChartComponent() {
  const containerRef = useRef(null);
  const chartRef = useRef(null);

  useEffect(() => {
    // 初始化Chart.js实例
    const ctx = containerRef.current.querySelector('canvas').getContext('2d');
    chartRef.current = new Chart(ctx, {
      type: 'line',
      data: {/* 你的图表数据 */},
      options: {/* 基础配置 */}
    });

    // 保存原始hover事件（如果存在）
    const originalOnHover = chartRef.current.options.onHover;

    // 自定义hover事件处理光标逻辑
    chartRef.current.options.onHover = function(event) {
      // 执行原始hover逻辑（可选）
      if (originalOnHover) originalOnHover.call(this, event);

      // 判断鼠标是否在框注释内的逻辑（替换成你的实际判断）
      const isInBoxAnnotation = /* 你的位置检测代码 */;

      // 直接修改DOM的cursor样式
      if (containerRef.current) {
        containerRef.current.style.cursor = isInBoxAnnotation ? 'crosshair' : 'default';
      }
    };

    // 组件卸载时清理事件和Chart实例
    return () => {
      chartRef.current.options.onHover = originalOnHover;
      chartRef.current.destroy();
    };
  }, []);

  return (
    <div ref={containerRef}>
      <canvas></canvas>
    </div>
  );
}