自定义Hooks函数

自定义Hooks 函数 和 用Hooks 创建组件很相似，跟我们平时用 JavaScript 写函数几乎一模一样，可能就是多了些 React Hooks 的特性，自定义 Hooks 函数偏向于功能，而组件偏向于界面和业务逻辑。

自定义Hooks 函数获取窗口大小

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

function useWinSize(){
    const [size,setSize] = useState({  //先用useState设置size状态
        width:document.documentElement.clientWidth,
        height:document.documentElement.clientHeight
    })

    //编写一个每次修改状态的方法 onResize
    const onResize = useCallback( //使用callback，目的是为了缓存方法（useMemo是为了缓存变量)
        () => {
           setSize({
               width:document.documentElement.clientWidth,
               height:document.documentElement.clientHeight
           })
        },
        [],
    )

    //在第一次进入方法时使用useEffect 来注册 resize 监听事件
    useEffect(() => {
        window.addEventListener('resize:',onResize)
        return () => {
            window.removeEventListener('resize:',onResize) //为了防止一直监听，在方法移除时，使用return 的方式移除监听
        }
    }, [])
    return size; //最后返回size变量
}

//编写组件并使用自定义函数
function HWinsize(){
    const size=useWinSize()
    return(
        <div>
            页面size:{size.width} x {size.height}
        </div>
    )
}
export default HWinsize;

在浏览器中预览一下结果，可以看到当我们放大缩小浏览器窗口时，页面上的结果都会跟着变化。