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 相关文章推荐
兼容FireFox 的 js 日历 支持时间的获取
Mar 04 Javascript
xml和web特殊字符
Apr 28 Javascript
在vs2010中调试javascript代码方法
Feb 11 Javascript
Javascript面向对象编程(三) 非构造函数的继承
Aug 28 Javascript
JavaScript之数组(Array)详解
Apr 01 Javascript
JavaScript中指定函数名称的相关方法
Jun 04 Javascript
代码分析jQuery四种静态方法使用
Jul 23 Javascript
ES6学习笔记之Set和Map数据结构详解
Apr 07 Javascript
jquery拖动改变div大小
Jul 04 jQuery
Kindeditor单独调用单图上传增加预览功能的实例
Jul 31 Javascript
微信小程序使用modal组件弹出对话框功能示例
Nov 29 Javascript
浅析vue 函数配置项watch及函数 $watch 源码分享
Nov 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编程之高级技巧——利用Mysql函数
2006/10/09 PHP
php 目录与文件处理-郑阿奇(续)
2011/07/04 PHP
PHP答题类应用接口实例
2015/02/09 PHP
Discuz!X中SESSION机制实例详解
2015/09/23 PHP
使用Huagepage和PGO来提升PHP7的执行性能
2015/11/30 PHP
PHP封装的字符串加密解密函数
2015/12/18 PHP
PHP简单实现上一页下一页功能示例
2016/09/14 PHP
yii2中关于加密解密的那些事儿
2018/06/12 PHP
JQuery+Ajax无刷新分页的实例代码
2014/02/08 Javascript
jquery图形密码实现方法
2015/03/11 Javascript
jQuery左侧大图右侧小图焦点图幻灯切换代码分享
2015/08/19 Javascript
ES6学习笔记之Set和Map数据结构详解
2017/04/07 Javascript
WebSocket实现简单客服聊天系统
2017/05/12 Javascript
认识less和webstrom的less配置方法
2017/08/02 Javascript
浅谈angular4生命周期钩子
2017/09/05 Javascript
jQuery 防止相同的事件快速重复触发方法
2018/02/08 jQuery
解决vue项目打包后提示图片文件路径错误的问题
2018/07/04 Javascript
详解vuex状态管理模式
2018/11/01 Javascript
webpack file-loader和url-loader的区别
2019/01/15 Javascript
解决vue组件中click事件失效的问题
2019/11/09 Javascript
keep-alive保持组件状态的方法
2020/12/02 Javascript
vue+elementui通用弹窗的实现(新增+编辑)
2021/01/07 Vue.js
python使用socket进行简单网络连接的方法
2015/04/29 Python
python最小生成树kruskal与prim算法详解
2019/01/17 Python
OpenCV里的imshow()和Matplotlib.pyplot的imshow()的实现
2019/11/25 Python
Python3操作YAML文件格式方法解析
2020/04/10 Python
matlab中二维插值函数interp2的使用详解
2020/04/22 Python
一款利用纯css3实现的win8加载动画的实例分析
2014/12/11 HTML / CSS
美国受欢迎的女性牛仔裤品牌:DL1961
2016/11/12 全球购物
jurlique茱莉蔻英国官网:澳洲天然护肤品
2018/08/03 全球购物
FC-Moto瑞典:欧洲最大的摩托车服装和头盔商店之一
2018/11/27 全球购物
幼儿园教师奖惩制度
2014/02/01 职场文书
2014年党支部承诺书
2014/05/30 职场文书
2014年卫生监督工作总结
2014/12/09 职场文书
2016教师六五普法学习心得体会
2016/01/21 职场文书
人生哲理妙语30条:淡写流年,笑过人生
2019/09/04 职场文书