React中鼠标悬停预览图片时onMouseOut失效的解决方法求助

问题出在你用了onMouseOver——这个事件会在鼠标在元素内部移动时持续触发，导致setShowPreview(true)被反复调用，就算触发了onMouseOut设为false，下一次onMouseOver又会把它改回true，而且频繁更新previewLoc状态会让组件疯狂重渲染。

给你两个核心优化方向：

1. 拆分鼠标事件，避免重复设置显示状态 #

把onMouseOver拆成onMouseEnter和onMouseMove：

• onMouseEnter只在鼠标首次进入span时触发一次，负责初始化预览内容、开启显示状态
• onMouseMove负责实时更新鼠标位置，只做位置更新不碰显示状态

同时把onMouseOut换成onMouseLeave，它只会在鼠标完全离开span时触发，不会因为鼠标移到span内部的子元素（如果有的话）就误触发。

修改后的代码示例：

const Graphic = ({ item, text }) => {
    const handleEnter = (event) => {
        setPreviewGraphic(item);
        setShowPreview(true);
        setPreviewLoc([event.pageX, event.pageY]);
    };

    const handleMove = (event) => {
        setPreviewLoc([event.pageX, event.pageY]);
    };

    return (
        <span 
            className='graphic' 
            onMouseEnter={handleEnter}
            onMouseMove={handleMove}
            onMouseLeave={() => setShowPreview(false)}
        >
            {text}
        </span>
    );
};

2. 用useRef存储鼠标位置，减少不必要的重渲染 #

如果你的预览组件不需要依赖previewLoc状态来触发重渲染（比如可以直接通过ref读取实时位置），可以改用useRef存储位置，避免每次鼠标移动都触发组件重渲染：

import { useRef } from 'react';

const Graphic = ({ item, text }) => {
    const previewLocRef = useRef([0, 0]);

    const handleEnter = (event) => {
        setPreviewGraphic(item);
        setShowPreview(true);
        previewLocRef.current = [event.pageX, event.pageY];
    };

    const handleMove = (event) => {
        previewLocRef.current = [event.pageX, event.pageY];
        // 如果预览元素是通过绝对定位显示的，可以直接在这里修改它的style
        // 比如提前给预览元素加个ref，然后：
        // previewRef.current.style.left = `${event.pageX}px`;
        // previewRef.current.style.top = `${event.pageY}px`;
    };

    return (
        <span 
            className='graphic' 
            onMouseEnter={handleEnter}
            onMouseMove={handleMove}
            onMouseLeave={() => setShowPreview(false)}
        >
            {text}
        </span>
    );
};

这样一来，setShowPreview(true)只会执行一次，onMouseLeave设置的false就能正常生效，同时鼠标位置更新不会触发组件重渲染，性能也能提升。

如果还是担心onMouseMove触发太频繁，可以给位置更新加个防抖，比如用setTimeout控制每秒只更新几次位置，但一般来说鼠标移动的实时更新需求下，直接用onMouseMove配合ref已经足够流畅且不会有性能问题。

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