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使用查询手册
Mar 07 Javascript
JavaScript中的Screen屏幕对象
Jan 16 Javascript
Prototype Number对象 学习
Jul 19 Javascript
JavaScript去除空格的三种方法(正则/传参函数/trim)
Feb 06 Javascript
JS下拉框内容左右移动效果的具体实现
Jul 10 Javascript
JS实现的自定义网页拖动类
Nov 06 Javascript
jquery采用oop模式class类的使用示例
Jan 22 Javascript
Angularjs material 实现搜索框功能
Mar 08 Javascript
微信小程序 富文本转文本实例详解
Oct 24 Javascript
javascript实现蒙版与禁止页面滚动
Jan 11 Javascript
antd中table展开行默认展示,且不需要前边的加号操作
Nov 02 Javascript
JavaScript选择器函数querySelector和querySelectorAll
Nov 27 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图片库imagemagick安装方法
2014/09/23 PHP
使用PHP json_decode可能遇到的坑与解决方法
2017/08/03 PHP
PHP Include文件实例讲解
2019/02/15 PHP
一样的table?不一样的table(可编辑状态table)
2012/09/19 Javascript
js 触发select onchange事件代码
2014/03/20 Javascript
判断在css加载完毕后执行后续代码示例
2014/09/03 Javascript
常用jQuery代码分享
2015/07/14 Javascript
JS匿名函数实例分析
2016/11/26 Javascript
单击按钮发送验证码,出现倒计时的简单实例
2017/03/17 Javascript
HTML5开发Kinect体感游戏的实例应用
2017/09/18 Javascript
vue展示dicom文件医疗系统的实现代码
2018/08/27 Javascript
js事件on动态绑定数据,绑定多个事件的方法
2018/09/15 Javascript
微信小程序移动拖拽视图-movable-view实例详解
2019/08/17 Javascript
python 排列组合之itertools
2013/03/20 Python
微信跳一跳辅助python代码实现
2018/01/05 Python
python实现拓扑排序的基本教程
2018/03/11 Python
python email smtplib模块发送邮件代码实例
2018/04/26 Python
Python3转换html到pdf的不同解决方案
2019/03/11 Python
tensorflow:指定gpu 限制使用量百分比,设置最小使用量的实现
2020/02/06 Python
记一次django内存异常排查及解决方法
2020/08/07 Python
优秀英语专业毕业生求职信
2013/11/23 职场文书
装饰资料员岗位职责
2013/12/30 职场文书
自动化专业职业生涯规划书范文
2014/01/16 职场文书
护理职业生涯规划书
2014/01/24 职场文书
优秀女职工事迹材料
2014/02/06 职场文书
贸易跟单员英文求职信
2014/04/19 职场文书
读书活动总结范文
2014/04/26 职场文书
大学生个人先进事迹材料范文
2014/05/03 职场文书
网站推广策划方案
2014/06/04 职场文书
群众路线表态发言材料
2014/10/17 职场文书
教师先进个人材料
2014/12/17 职场文书
保研推荐信范文
2015/03/25 职场文书
新闻稿件写作技巧
2015/07/18 职场文书
分析并发编程之LongAdder原理
2021/06/29 Java/Android
html form表单基础入门案例讲解
2021/07/15 HTML / CSS
解决springboot druid数据库连接失败后一直重连的方法
2022/04/19 Java/Android