react 基础之自定义hooks (获取鼠标位置事件)

前端一课2023-11-02 21:23

获取鼠标位置我们一般都是通过js事件获取，监听mousemove, 在每个页面中获取鼠标事件挺麻烦的，所以我们使用hooks, 简单封装一个react-hooks

js 复制代码

import { useCallback, useEffect, useState } from "react"

// 获取鼠标位置（自定义hooks）
function useMouse() {
    const [x, setX] = useState(0)
    const [y, setY] = useState(0)

    const mouseMoveHandler = useCallback((event: MouseEvent) => {
        setX(event.clientX)
        setY(event.clientY)
    }, [])

    useEffect(() => {
        window.addEventListener('mousemove', mouseMoveHandler)
        return () => {
            // 组件销毁时一定要解绑dom 事件，可能会出现内存泄露问题
            window.removeEventListener('mousemove', mouseMoveHandler)
        }
    })
    return { x, y }
}



// useEffect  会返回一个函数，这个返回函数代表的是组件销毁 可以做一些解绑操作
export default useMouse

使用方法：

js 复制代码

import useMouse from './hooks/useMouse';
 const { x, y } =  useMouse()

在上面的使用方法中x, y 表示的就是就是鼠标的位置