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 相关文章推荐
转换json格式的日期为Javascript对象的函数
Jul 13 Javascript
jQuery powerFloat万能浮动层下拉层插件使用介绍
Dec 27 Javascript
浅析js封装和作用域
Jul 09 Javascript
Jquery 实现弹出层插件
Jan 28 Javascript
firefox浏览器用jquery.uploadify插件上传时报HTTP 302错误
Mar 01 Javascript
如何解决ligerUI布局时Center中的Tab高度大小
Nov 24 Javascript
AngularJS入门教程之静态模板详解
Aug 18 Javascript
微信小程序 本地存储及登录页面处理实例详解
Jan 11 Javascript
webpack独立打包和缓存处理详解
Apr 03 Javascript
JS计算距当前时间的时间差实例
Dec 29 Javascript
深入解析vue 源码目录及构建过程分析
Apr 24 Javascript
微信小程序实现点击导航条切换页面
Nov 19 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
亚洲咖啡有什么?亚洲咖啡产地介绍 亚洲咖啡有什么特点?
2021/03/05 新手入门
php使用fsockopen函数发送post,get请求获取网页内容的方法
2014/11/15 PHP
PHP 微信扫码支付源代码(推荐)
2016/11/03 PHP
php使用scandir()函数扫描指定目录下所有文件示例
2019/06/08 PHP
PHP编程一定要改掉的5个不良习惯
2020/09/18 PHP
js 上下左右键控制焦点(示例代码)
2013/12/14 Javascript
AngularJS初始化静态模板详解
2016/01/14 Javascript
JS遍历数组及打印数组实例分析
2016/01/21 Javascript
JS创建事件的三种方法(实例代码)
2016/05/12 Javascript
基于angular中的重要指令详解($eval,$parse和$compile)
2016/10/21 Javascript
Bootstrap基本插件学习笔记之折叠(22)
2016/12/08 Javascript
vue-router路由参数刷新消失的问题解决方法
2017/06/17 Javascript
微信小程序wx.previewImage预览图片实例详解
2017/12/07 Javascript
浅谈AngularJS中$http服务的简单用法
2018/05/15 Javascript
详解组件库的webpack构建速度优化
2018/06/18 Javascript
对Vue table 动态表格td可编辑的方法详解
2018/08/28 Javascript
如何在基于vue-cli的项目自定义打包环境
2018/11/10 Javascript
详解vue几种主动刷新的方法总结
2019/02/19 Javascript
jquery图片预览插件实现方法详解
2019/07/18 jQuery
使用ThinkJs搭建微信中控服务的实现方法
2019/08/08 Javascript
深入webpack打包原理及loader和plugin的实现
2020/05/06 Javascript
jquery实现简易验证插件封装
2020/09/13 jQuery
Express 配置HTML页面访问的实现
2020/11/01 Javascript
[01:04:48]VGJ.S vs TNC Supermajor 败者组 BO3 第一场 6.6
2018/06/07 DOTA
python3-flask-3将信息写入日志的实操方法
2019/11/12 Python
奥地利汽车配件店:Pkwteile.at
2017/03/10 全球购物
C#如何调用Word并打开一个Word文档
2013/05/08 面试题
小区门卫工作职责
2013/12/14 职场文书
求职毕业生自荐书
2014/02/08 职场文书
态度决定一切演讲稿
2014/05/20 职场文书
广播体操比赛口号
2014/06/10 职场文书
我爱幼儿园演讲稿
2014/09/11 职场文书
《倍数和因数》教学反思
2016/02/23 职场文书
2016年优秀教师先进事迹材料
2016/02/26 职场文书
PyTorch 如何检查模型梯度是否可导
2021/06/05 Python
Vue3.0 手写放大镜效果
2021/07/25 Vue.js