自定义Hook-useHover

效果图

useHover

import { useState, useRef, useCallback } from 'react'

/**
 * 处理将鼠标悬停在包装的组件上的事件。
 * @param {callbackRef} DOM节点-Ref
 * @param {isHovering} 是否选中
 */
const useHover = () =>
{
    const [isHovering, setIsHovering] = useState(false);

    const handleMouseOver = useCallback(() => setIsHovering(true), []);
    const handleMouseOut = useCallback(() => setIsHovering(false), []);

    const nodeRef = useRef();

    const callbackRef = useCallback(
        node =>
        {
            if (nodeRef.current)
            {
                nodeRef.current.removeEventListener('mouseover', handleMouseOver);
                nodeRef.current.removeEventListener('mouseout', handleMouseOut);
            }

            nodeRef.current = node;

            if (nodeRef.current)
            {
                nodeRef.current.addEventListener('mouseover', handleMouseOver);
                nodeRef.current.addEventListener('mouseout', handleMouseOut);
            }
        },
        [handleMouseOver, handleMouseOut]
    );

    return [callbackRef, isHovering];
};
export default useHover

index

import useHover from './useHover '

const containerStyle = {
    width: '200px',
    height: '200px',
    margin: '200px auto'
}
const index = () =>
{
    const [hoverRef, isHovering] = useHover();

    return (
        <div style={isHovering ? { ...containerStyle, backgroundColor: 'pink' } : { ...containerStyle, backgroundColor: 'yellow' }} ref={hoverRef} >
            {isHovering ? 'Hovering' : 'Not hovering'}
        </div>
    )
};
export default index