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

Myth丶恋晨 2023-10-06 21:01 60阅读 0赞

#### React Hooks ####

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

## 阐述 ##

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

由于差别不大，所以使用起来也是很随意的。

如果是小型项目是可以的，但是如果项目足够复杂，这会让项目结构不够清晰。所以学习自定义Hooks函数还是很有必要的。

## 编写自定义函数 ##

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

新建一个文件`Example11.js`，然后编写一个 `useWinSize`函数，编写时我们会用到 `useState`、`useEffect` 和 `useCallback` 所以先用 `import` 进行引入。

`ReactHooksDemo\demo01\src\Example11.js`

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

然后编写函数，函数中先用 useState 设置 size 状态，然后编写一个每次修改状态的方法 onResize ，这个方法使用 useCallback，目的是为了缓存方法(useMemo是为了缓存变量)。

然后在第一次进入方法时用 useEffect 来注册 resize 监听时间。

为了防止一直监听，所以在方法移除时，使用return的方式移除监听。

最后返回size变量就可以了。

import React, {
         useState ,useEffect ,useCallback } from 'react';
    
    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的普通函数用起来是一样的。直接在Example11组件使用useWinSize，并把结果实时展示在页面上。

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

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

![在这里插入图片描述][0db9389641244fa4a088abafc85b106f.gif_pic_center]

说明自定义的函数起到了作用。

`ReactHooksDemo\demo01\src\index.js`

import React from 'react';
    import ReactDOM from 'react-dom';
    import Example from './Example11';
    
    ReactDOM.render(<Example />, document.getElementById('root'));

`ReactHooksDemo\demo01\src\Example11.js`

[0db9389641244fa4a088abafc85b106f.gif_pic_center]: https://img-blog.csdnimg.cn/0db9389641244fa4a088abafc85b106f.gif#pic_center