P10:自定义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
之后就可以在浏览器中预览一下结果,可以看到当我们放大缩小浏览器窗口时,页面上的结果都会跟着进行变化。说明自定义的函数起到了作用。
2. 本站不保证所提供下载的免费资源的准确性、安全性和完整性,免费资源仅供下载学习之用!如有链接无法下载、失效,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或技术教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
5. 加入前端开发QQ群:565733884,我们大家一起来交流技术!
码云笔记 » P10:自定义Hooks函数获取窗口大小