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 encodeURI和encodeURIComponent的比较
Apr 03 Javascript
一个基于jquery的图片切换效果
Jul 06 Javascript
jquery一句话全选/取消全选
Mar 01 Javascript
Jquery中val()表单取值赋值的实例代码
Aug 15 Javascript
js简单实现HTML标签Select联动带跳转
Oct 23 Javascript
js document.write()使用介绍
Feb 21 Javascript
freemarker判断对象是否为空的方法
Aug 13 Javascript
jquery的 filter()方法使用教程
Mar 22 jQuery
node.js环境搭建图文详解
Sep 19 Javascript
Jquery 动态添加元素并添加点击事件实现过程解析
Oct 12 jQuery
js canvas实现星空连线背景特效
Nov 01 Javascript
js实现筛选功能
Nov 24 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
ThinkPHP表单自动提交验证实例教程
2014/07/18 PHP
php使用pdo连接mssql server数据库实例
2014/12/25 PHP
JSON用法之将PHP数组转JS数组,JS如何接收PHP数组
2015/10/08 PHP
thinkPHP5框架分页样式类完整示例
2018/09/01 PHP
PHP判断当前使用的是什么浏览器(推荐)
2019/10/27 PHP
浅谈PHP之ThinkPHP框架使用详解
2020/07/21 PHP
jQuery源码分析-03构造jQuery对象-工具函数
2011/11/14 Javascript
背景图跟随鼠标移动的Mootools插件实现代码
2011/12/12 Javascript
Android中的jQuery:AQuery简介
2014/05/06 Javascript
js在IE与firefox的差异集锦
2014/11/11 Javascript
用JavaScript实现PHP的urlencode与urldecode函数
2015/08/13 Javascript
Angularjs使用directive自定义指令实现attribute继承的方法详解
2016/08/05 Javascript
JSON 必知必会 观后记
2016/10/27 Javascript
Webpack执行命令参数详解
2017/06/17 Javascript
Vue.js实现输入框绑定的实例代码
2017/08/24 Javascript
Vue组件之Tooltip的示例代码
2017/10/18 Javascript
微信小程序中data-key属性之数据传输(经验总结)
2020/08/22 Javascript
[32:30]夜魇凡尔赛茶话会 第一期01:谁是卧底
2021/03/11 DOTA
用Python实现通过哈希算法检测图片重复的教程
2015/04/02 Python
基于python3 类的属性、方法、封装、继承实例讲解
2017/09/19 Python
Django项目之Elasticsearch搜索引擎的实例
2019/08/21 Python
详解在Python中使用Torchmoji将文本转换为表情符号
2020/07/27 Python
粉红色的鲸鱼:Vineyard Vines
2018/02/17 全球购物
英国领先的露营和露营车品牌之一:OLPRO
2019/08/06 全球购物
师范生自荐信
2013/10/27 职场文书
岗位职责的定义
2013/11/10 职场文书
寒假思想汇报
2014/01/10 职场文书
校三好学生主要事迹
2014/01/11 职场文书
大学生未来职业生涯规划书
2014/02/15 职场文书
外贸员简历中的自我评价
2014/03/04 职场文书
计划生育诚信协议书
2014/11/02 职场文书
优秀班组事迹材料
2014/12/24 职场文书
毕业生班级鉴定评语
2015/01/04 职场文书
全陪导游词
2015/02/04 职场文书
2015年党日活动总结范文
2015/03/25 职场文书
Python中super().__init__()测试以及理解
2021/12/06 Python