自定义hook-副作用

简介

1 .自定义Hook更像是一种约定，而不是一种功能。如果函数以use开头，并且调用了其他的hook,那么就可以称之为一个自定义hook
2 .hook是一种复用状态逻辑的方式，但是他不复用state本身
3 .事实上，每一次调用都有一个完全独立的state

检测窗口的宽度

1 .代码

function useWidth(props){
    const [width,setWidth]=useState(document.body.clientWidth)

    function handleChange(e){
        setWidth(document.body.clientWidth)
    }

    useEffect(()=>{
        window.addEventListener('resize',handleChange,false)

        return ()=>{
            window.removeEventListener('resize',handleChange,false)
        }
    })
    return width
    
}
export default useWidth

检测鼠标移动位置

// 封装一段检测鼠标移动的代码
function useMouse(props){
    const [isEffect,setEffect]=useState(props.isEffect)
    const [mouse,setMouse]=useState({x:0,y:0})

    // 如何从外部控制是否要执行这个操作呢？传入一个变量来控制,好像我是无法动态向他传入一个参数来改变里面的逻辑的。只有根据if判断使用另一个组件里面传入不同参数的hook

    function handleMouseMove(e){
        setMouse({
            x:e.clientX,
            y:e.clientY
        })
    }

    useEffect(()=>{
        document.documentElement.addEventListener("mousemove",handleMouseMove,false)
        return ()=>{
            document.documentElement.removeEventListener("mousemove",handleMouseMove,false)
        }
    })
    // 直接把mouseMove事件绑定在全局界面上，然后返回最后输出的结果

    return mouse
}