React组件(三)：自定义hook

利用 react hooks 实现组件封装

1.自定义 hook

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

// 1.创建一个函数组件：注意自定义 hook 命名规范
const useMousePosition = () => {
    // 2.定义 state 的初始值和修改 state 的函数
    const [positions, setPosition] = useState({ x: 0, y: 0 });

    useEffect(() => {
        const updateMouse = (e: MouseEvent) => {
            // 4.鼠标位置改变，给 positions 重新赋值
            setPosition({ x: e.clientX, y: e.clientY });
        };
        // 3.监听鼠标移动
        document.addEventListener("mousemove", updateMouse);
        return () => {
            // 移除鼠标移动事件
            document.removeEventListener("mousemove", updateMouse);
        }
    }, [])
    // 返回鼠标位置
    return positions;
};

export default useMousePosition;

2.使用自定义 hook

import useMousePosition from "./hooks/useMousePosition";

function App() {
    const positions = useMousePosition();
 
    return (
        <p>x: {positions.x}, y: {positions.y}</p>
    )
}

hook 太有意思了！！