自定义Hooks函数获取窗口大小（十一）

其实自定义Hooks函数和用Hooks建立组件很类似，跟咱们平时用JavaScript写函数几乎如出一辙，可能就是多了些React Hooks的特性，自定义Hooks函数偏向于功能，而组件偏向于界面和业务逻辑。因为差异不大，因此使用起来也是很随意的。若是是小型项目是能够的，可是若是项目足够复杂，这会让项目结构不够清晰。因此学习自定义Hooks函数仍是颇有必要的。

编写自定义函数

在实际开发中，为了界面更加美观。获取浏览器窗口的尺寸是一个常常使用的功能，这样常常使用的功能，就能够封装成一个自定义Hooks函数，记住必定要用use开头，这样才能区分出什么是组件，什么是自定义函数。

新建一个文件Example9.js,而后编写一个useWinSize,编写时咱们会用到useState、useEffect和useCallback因此先用import进行引入。

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

而后编写函数，函数中先用useState设置size状态，而后编写一个每次修改状态的方法onResize，这个方法使用useCallback，目的是为了缓存方法(useMemo是为了缓存变量)。 而后在第一次进入方法时用useEffect来注册resize监听时间。为了防止一直监听因此在方法移除时，使用return的方式移除监听。最后返回size变量就能够了。

function useWinSize(){
    const [ size , setSize] = useState({
        width:document.documentElement.clientWidth,
        height:document.documentElement.clientHeight
    })

    const onResize = useCallback(()=>{
        setSize({
            width: document.documentElement.clientWidth,
            height: document.documentElement.clientHeight
        })
    },[]) 
    useEffect(()=>{
        window.addEventListener('resize',onResize)
        return ()=>{
            window.removeEventListener('resize',onResize)
        }
    },[])

    return size;
}

这就是一个自定义函数，其实和咱们之前写的JS函数没什么区别，因此这里也不作太多的介绍。

编写组件并使用自定义函数

自定义Hooks函数已经写好了，能够直接进行使用，用法和JavaScript的普通函数用起来是同样的。直接在Example9组件使用useWinSize并把结果实时展现在页面上。

function Example9(){

    const size = useWinSize()
    return (
        <div>页面Size:{size.width}x{size.height}</div>
    )
}

export default Example9

以后就能够在浏览器中预览一下结果，能够看到当咱们放大缩小浏览器窗口时，页面上的结果都会跟着进行变化。说明自定义的函数起到了做用。

转自：http://www.jspang.com/posts/2019/08/12/react-hooks.html