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 相关文章推荐
javascript showModalDialog 多层模态窗口实现页面提交及刷新的代码
Nov 28 Javascript
javascript 常用功能总结
Mar 18 Javascript
深入理解JavaScript系列(41):设计模式之模板方法详解
Mar 04 Javascript
javascript性能优化之事件委托实例详解
Dec 12 Javascript
jQuery中ajax的load()与post()方法实例详解
Jan 05 Javascript
JS面向对象(3)之Object类,静态属性,闭包,私有属性, call和apply的使用,继承的三种实现方法
Feb 25 Javascript
Javascript中的几种继承方式对比分析
Mar 22 Javascript
详解百度百科目录导航树小插件
Jan 08 Javascript
利用Vue.js实现checkbox的全选反选效果
Jan 18 Javascript
JavaScript两个变量交换值的实现方法
Mar 01 Javascript
详解基于Angular4+ server render(服务端渲染)开发教程
Aug 28 Javascript
解决vue-router 切换tab标签关闭时缓存问题
Jul 22 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
PHP操作数组的一些函数整理介绍
2011/07/17 PHP
php程序的国际化实现方法(利用gettext)
2011/08/14 PHP
PHP翻页跳转功能实现方法
2020/11/30 PHP
PHP反射原理与用法深入分析
2019/09/28 PHP
php设计模式之职责链模式实例分析【星际争霸游戏案例】
2020/03/27 PHP
PHP替换Word中变量并导出PDF图片的实现方法
2020/11/26 PHP
Prototype源码浅析 Enumerable部分之each方法
2012/01/16 Javascript
优化javascript的执行效率一些方法总结
2013/12/25 Javascript
JS烟花背景效果实现方法
2015/03/03 Javascript
JavaScript验证Email(3种方法)
2015/09/21 Javascript
jQuery获取当前点击的对象元素(实现代码)
2016/05/19 Javascript
微信公众号-获取用户信息(网页授权获取)实现步骤
2016/10/21 Javascript
jQuery实现基本动画效果的方法详解
2018/09/06 jQuery
详解JavaScript对数组操作(添加/删除/截取/排序/倒序)
2019/04/28 Javascript
p5.js实现故宫橘猫赏秋图动画
2019/10/23 Javascript
Python3连接MySQL(pymysql)模拟转账实现代码
2016/05/24 Python
Python探索之爬取电商售卖信息代码示例
2017/10/27 Python
python 实现提取某个索引中某个时间段的数据方法
2019/02/01 Python
Python实现的矩阵转置与矩阵相乘运算示例
2019/03/26 Python
远程部署工具Fabric详解(支持Python3)
2019/07/04 Python
python、PyTorch图像读取与numpy转换实例
2020/01/13 Python
如何利用Python 进行边缘检测
2020/10/14 Python
Pycharm 跳转回之前所在页面的操作
2021/02/05 Python
Python的collections模块真的很好用
2021/03/01 Python
Html5中localStorage存储JSON数据并读取JSON数据的实现方法
2017/02/13 HTML / CSS
台湾网友喜爱的综合型网路购物商城:Yahoo! 奇摩购物中心
2018/03/10 全球购物
俄罗斯领先的移动和数字设备在线商店:Svyaznoy.ru
2020/12/21 全球购物
KEEN美国官网:美国人气户外休闲鞋品牌
2021/03/09 全球购物
C#中有没有运算符重载?能否使用指针?
2014/05/05 面试题
小学安全教育材料
2014/02/17 职场文书
信息科学与技术专业求职信范文
2014/02/20 职场文书
小学优秀学生评语
2014/12/29 职场文书
二年级上册数学教学计划
2015/01/20 职场文书
经理岗位职责范本
2015/04/15 职场文书
写给媳妇的检讨书
2015/05/06 职场文书
CSS文本阴影 text-shadow 悬停效果详解
2022/05/25 HTML / CSS