自定义Hooks函数（案例：获取窗口大小）

重点：

1、封装自定义Hooks函数，一定要用use开头，这样才能区分出什么是组件，什么是自定义函数
2、useCallback为缓存方法，useMome为缓存状态/属性，两者都是优化性能

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

编写自定义函数

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

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

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

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

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并把结果实时展示在页面上。

1 2 3 4 5 6 7 8 9

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

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

 

 

 

 

.