React自定义hook的方法


Posted in Javascript onJune 25, 2022
  • 什么是hook

HookReact 16.8 的新增特性。它通常与函数式组件同时使用。可以使函数式组件在不编写 class 的情况下,可以拥有class组件的状态、生命周期、引用等功能。

  • 常用的有哪些hook

React中常用的hooks有:

  • useState 状态管理
  • useEffect 生命周期
  • useContext 跨组件数据传递
  • useRef 组件引用
  • ....
  • 自定义hook

自定义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内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!


Tags in this post...

Javascript 相关文章推荐
jquery 多级下拉菜单核心代码
May 21 Javascript
Firefox中使用outerHTML的2种解决方法
Jun 07 Javascript
详解Node.js包的工程目录与NPM包管理器的使用
Feb 16 Javascript
js实现带农历和八字等信息的日历特效
May 16 Javascript
jquery validation验证表单插件
Jan 07 Javascript
vue项目中的webpack-dev-sever配置方法
Dec 14 Javascript
layer插件select选中默认值的方法
Aug 14 Javascript
微信小程序实现左右列表联动
May 19 Javascript
vue前端框架—Mint UI详解(更适用于移动端)
Apr 30 Javascript
JavaScript如何把两个数组对象合并过程解析
Oct 10 Javascript
微信小程序实现组件顶端固定或底端固定效果(不随滚动而滚动)
Apr 09 Javascript
浅谈鸿蒙 JavaScript GUI 技术栈
Sep 17 Javascript
小程序实现侧滑删除功能
Jun 25 #Javascript
小程序自定义轮播图圆点组件
Jun 25 #Javascript
微信小程序实现轮播图指示器
Jun 25 #Javascript
create-react-app开发常用配置教程
Jun 25 #Javascript
JavaScript架构搭建前端监控如何采集异常数据
Jun 25 #Javascript
webpack介绍使用配置教程详解webpack介绍和使用
Jun 25 #Javascript
JavaScript设计模式之原型模式详情
Jun 21 #Javascript
You might like
深入解析Laravel5.5中的包自动发现Package Auto Discovery
2017/09/13 PHP
jQuery EasyUI 中文API Layout(Tabs)
2010/04/27 Javascript
JS 实现导航栏悬停效果(续)
2013/09/24 Javascript
技术男用来对妹子表白的百度首页
2014/07/23 Javascript
JS取得绝对路径的实现代码
2015/01/16 Javascript
jQuery中innerHeight()方法用法实例
2015/01/19 Javascript
js判断主流浏览器类型和版本号的简单实现代码
2016/05/26 Javascript
node-http-proxy修改响应结果实例代码
2016/06/06 Javascript
Html5 js实现手风琴效果
2020/04/17 Javascript
深入浅析angular和vue还有jquery的区别
2018/08/13 jQuery
M2实现Nodejs项目自动部署的方法步骤
2019/05/05 NodeJs
配置node服务器并且链接微信公众号接口配置步骤详解
2019/06/21 Javascript
vue 源码解析之虚拟Dom-render
2019/08/26 Javascript
antd-mobile ListView长列表的数据更新遇到的坑
2020/04/08 Javascript
JQuery Ajax如何实现注册检测用户名
2020/09/25 jQuery
[36:52]DOTA2真视界:基辅特锦赛总决赛
2017/05/21 DOTA
python多重继承实例
2014/10/11 Python
基于进程内通讯的python聊天室实现方法
2015/06/28 Python
Python实现Linux中的du命令
2017/06/12 Python
Python采集代理ip并判断是否可用和定时更新的方法
2018/05/07 Python
python3+django2开发一个简单的人员管理系统过程详解
2019/07/23 Python
python requests模拟登陆github的实现方法
2019/12/26 Python
Python读取YAML文件过程详解
2019/12/30 Python
三步解决python PermissionError: [WinError 5]拒绝访问的情况
2020/04/22 Python
浅谈pytorch中的BN层的注意事项
2020/06/23 Python
解决Keras中循环使用K.ctc_decode内存不释放的问题
2020/06/29 Python
CSS3弹性伸缩布局之box布局
2016/07/12 HTML / CSS
美国高端寝具品牌:Coyuchi
2017/02/08 全球购物
英国马匹装备和马术用品购物网站:Equine Superstore
2019/03/03 全球购物
美国体育用品商店:Academy Sports + Outdoors
2020/01/04 全球购物
优秀员工自荐书范文
2013/12/08 职场文书
初中科学教学反思
2014/01/21 职场文书
适用于所有创业者的创业计划书
2014/02/05 职场文书
工伤事故赔偿协议书
2014/04/15 职场文书
装修活动策划方案
2014/08/27 职场文书
win10忘记pin密码登录不了怎么办?win10忘记pin密码登不进去的解决方法
2022/07/07 数码科技