hook是 react 16.8 的新增特性。它通常与函数式组件同时使用。可以使函数式组件在不编写 class 的情况下，可以拥有class组件的状态、生命周期、引用等功能。
react中常用的hooks有：
usestate状态管理useeffect生命周期usecontext跨组件数据传递useref组件引用- ….
自定义hook其实就是自定义函数，与我们写函数组件非常类似。自定义的hook组件的命名与系统的hooks一样，需要以use开头。下面我们用react+ts就来介绍一下常用的几个自定义hook
- 获取窗口宽高变化
实现目标：通过 usewindowsize()来实时获取窗口的宽高
新建一个hook文件usewindowsize.ts，代码如下：
import { useeffect, usestate } from "react"; //定义size对象 interface windowsize { width: number, height: number } const usewindowsize = () => { const [size, setsize] = usestate<windowsize>({ width: document.documentelement.clientwidth, height: document.documentelement.clientheight }) useeffect(() => { //监听size变化 window.addeventlistener('resize', () => { setsize({ width: document.documentelement.clientwidth, height: document.documentelement.clientheight }) }) return () => { //组件销毁时移除监听 window.removeeventlistener('resize', () => { setsize({ width: document.documentelement.clientwidth, height: document.documentelement.clientheight }) }) } },[]) return size } export default usewindowsize
组件中这样使用：
import usewindowsize from './hooks/usewindowsize'; function app() { const size = usewindowsize() return ( <div> <div>页面宽度：{size.width}</div> <div>页面高度：{size.height}</div> </div> ) } export default app
在浏览器拖动放大缩小时，页面上的数据可动态变化
- 获取滚动偏移量变化
目标：通过 usewindowscroll()来实时获取页面的滚动偏移量
新建一个hook文件usewindowscroll.ts，代码如下：
import { useeffect, usestate } from "react" //定义偏移量对象 interface scrolloffset { x: number, y: number } const usewindowscroll = () => { const [off, setoff] = usestate<scrolloffset>({ x: window.scrollx, y: window.scrolly }) useeffect(() => { //监听 window.addeventlistener('scroll', () => { setoff({ x: window.scrollx, y: window.scrolly }) }) return () => { //移除监听 window.removeeventlistener('scroll', () => { setoff({ x: window.scrollx, y: window.scrolly }) }) } }) return off } export default usewindowscroll
组件中这样使用：
import usewindowscroll from './hooks/usewindowscroll'; function app() { const offset = usewindowscroll() return ( <div style={{height: '10000px', width: '10000px'}}> <div>滚动y：{offset.y}</div> <div>滚动x：{offset.x}</div> </div> ) } export default app
- 自动同步至localstorage
目标：通过 const [value, setvalue] = uselocalstorage('key', 'value') 可以传入默认的初始value和key，且每次修改value可以自动同步到localstorage中
新建一个hook类uselocalstorage，代码如下：
import { useeffect, usestate } from "react" const uselocalstorage = (key: string, defaultvalue: string) : ([string, react.dispatch<react.setstateaction<string>>]) => { const [value, setvalue] = usestate(defaultvalue) useeffect(() => { window.localstorage.setitem(key, value) },[key, value]) return [value, setvalue] } export default uselocalstorage
组件中使用：
import uselocalstorage from './hooks/uselocalstorage'; function app() { const [value, setvalue] = uselocalstorage('key', 'react') return ( <div> <button onclick={() => { //点击修改value，会自动同步至本地 setvalue('vue') }}>点击</button> <div>{ value }</div> </div> ) } export default app
到此这篇关于react自定义hook的文章就介绍到这了,更多相关react自定义hook内容请搜索<计算机技术网(www.ctvol.com)!!>以前的文章或继续浏览下面的相关文章希望大家以后多多支持<计算机技术网(www.ctvol.com)!!>！
需要了解更多c/c++开发分享React自定义hook的方法，都可以关注C/C++技术分享栏目—计算机技术网(www.ctvol.com)!
本文来自网络收集，不代表计算机技术网立场，如涉及侵权请联系管理员删除。
ctvol管理联系方式QQ:251552304
本文章地址：https://www.ctvol.com/c-cdevelopment/1237720.html