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

其实自定义 Hooks 函数和用 Hooks 创建组件很相似,跟我们平时用 JavaScript 写函数几乎一模一样,可能就是多了些React Hooks的特性,自定义 Hooks 函数偏向于功能,而组件偏向于界面和业务逻辑。由于差别不大,所以使用起来也是很随意的。如果是小型项目是可以的,但是如果项目足够复杂,这会让项目结构不够清晰。所以学习自定义 Hooks 函数还是很有必要的。

编写自定义函数

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

新建一个文件Example9.js,然后编写一个useWinSize函数,编写时我们会用到useStateuseEffectuseCallback所以先用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

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

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

「点点赞赏,手留余香」

0

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » P10:自定义Hooks函数获取窗口大小

发表回复