当前位置: 首页 > news >正文

ahooks.js:一款强大的React Hooks库及其API使用教程(四)

    • 一、ahooks.js简介
    • 二、ahooks.js安装
    • 三、继续ahooks.js API的介绍与使用教程
      • 51. useResetState
      • 52. useUpdateLayoutEffect
      • 53. useDeepCompareLayoutEffect
      • 54. useRafInterval
      • 55. useRafTimeout
      • 56. useTimeout
      • 57. useLockFn
      • 58. useDocumentVisibility
      • 59. useDrop
      • 60. useDrag

一、ahooks.js简介

ahooks是一款由阿里巴巴开发团队设计的React Hooks库,提供了一系列实用的React Hooks,以便开发者更好地使用React的功能。ahooks的设计原则是“最小API,最大自由”,旨在提供最小的、最易于理解和使用的API,同时保留最大的使用自由度。

二、ahooks.js安装

使用npm或yarn安装ahooks:

npm install ahooks
# 或者
yarn add ahooks

三、继续ahooks.js API的介绍与使用教程

API介绍合集:

  • ahooks.js:一款强大的React Hooks库及其API使用教程(一)
  • ahooks.js:一款强大的React Hooks库及其API使用教程(二)
  • ahooks.js:一款强大的React Hooks库及其API使用教程(三)

51. useResetState

useResetState 是一个用于重置状态的 Hook。

    import { useResetState } from 'ahooks';function App() {const [value, setValue, resetValue] = useResetState('default');return (<div><p>{value}</p><button onClick={() => setValue('New Value')}>Change Value</button><button onClick={resetValue}>Reset</button></div>);}

在上面的代码中,useResetState接收一个参数作为默认值。这个 Hook 返回一个数组,第一个元素是当前的值,第二个元素是一个设置该值的函数,第三个元素是一个重置值到默认值的函数。

52. useUpdateLayoutEffect

useUpdateLayoutEffect 是一个在组件更新时运行的 Hook,它与 useEffect 类似,但它的执行时机更早,会在浏览器执行绘制之前进行。

    import { useUpdateLayoutEffect } from 'ahooks';function App() {const [count, setCount] = useState(0);useUpdateLayoutEffect(() => {console.log('count', count);}, [count]);return (<div><button onClick={() => setCount((c) => c + 1)}>Increase</button></div>);}

在上面的代码中,useUpdateLayoutEffect接收两个参数,第一个是一个函数,这个函数将在组件更新时执行,第二个参数是一个依赖项数组。

53. useDeepCompareLayoutEffect

useDeepCompareLayoutEffect 类似于 useLayoutEffect,但它可以进行深度比较的依赖项。

    import { useDeepCompareLayoutEffect } from 'ahooks';function App() {const [state, setState] = useState({ count: 0 });useDeepCompareLayoutEffect(() => {console.log('state', state);}, [state]);return (<div><button onClick={() => setState((s) => ({ count: s.count + 1 }))}>Increase</button></div>);}

在上面的代码中,useDeepCompareLayoutEffect接收两个参数,第一个是一个函数,这个函数将在依赖项发生深度变化时执行,第二个参数是一个依赖项数组。

54. useRafInterval

useRafInterval 是一个使用 requestAnimationFrame 实现的 setInterval,它可以在每个浏览器重绘之前执行一次。

    import { useRafInterval } from 'ahooks';function App() {const [count, setCount] = useState(0);useRafInterval(() => {setCount((c) => c + 1);}, 1000);return (<div>{count}</div>);}

在上面的代码中,useRafInterval接收两个参数,第一个是一个函数,这个函数将在设定的时间间隔内执行,第二个参数是时间间隔(毫秒)。

55. useRafTimeout

useRafTimeout 是一个使用 requestAnimationFrame 实现的 setTimeout,它可以在指定的时间后执行一次。

    import { useRafTimeout } from 'ahooks';function App() {const { run } = useRafTimeout(() => alert('Hello'), 5000);useEffect(() => {run();}, []);return (<div>Hello World</div>);}

在上面的代码中,useRafTimeout接收两个参数,第一个是一个函数,这个函数将在设定的时间后执行,第二个参数是延迟时间(毫秒)。

56. useTimeout

useTimeout 是一个用于设置延迟执行的 Hook。

    import { useTimeout } from 'ahooks';function App() {const { run } = useTimeout(() => alert('Hello'), 5000);useEffect(() => {run();}, []);return (<div>Hello World</div>);}

在上面的代码中,useTimeout接收两个参数,第一个是一个函数,这个函数将在设定的时间后执行,第二个参数是延迟时间(毫秒)。

57. useLockFn

useLockFn 是一个用于锁定函数执行的 Hook,防止函数在异步操作期间被多次调用。

    import { useLockFn } from 'ahooks';function App() {const submit = useLockFn(async () => {await new Promise((resolve) => setTimeout(resolve, 1000));alert('Submit success');});return (<div><button onClick={submit}>Submit</button></div>);}

在上面的代码中,useLockFn接收一个异步函数作为参数,返回一个新的函数,这个新的函数在上一个异步操作完成之前不会被执行。

58. useDocumentVisibility

useDocumentVisibility 是一个用于获取文档可见状态的 Hook。

    import { useDocumentVisibility } from 'ahooks';function App() {const visibility = useDocumentVisibility();return (<div>Document is {visibility}</div>);}

在上面的代码中,useDocumentVisibility不接收任何参数,它返回当前文档的可见状态,如 ‘visible’,‘hidden’ 或 ‘prerender’。

59. useDrop

useDrop 是一个用于实现拖放功能的 Hook。

    import { useDrop } from 'ahooks';function App() {const [props, { isHovering }] = useDrop({onText: (text, e) => {console.log('You dropped text: ', text);},});return (<div {...props}>{isHovering ? 'Release to drop' : 'Drag file to here'}</div>);}

在上面的代码中,useDrop接收一个对象作为参数,这个对象包含一些回调函数,这些函数将在拖放事件发生时被调用。它返回一个数组,第一个元素是用于绑定到 DOM 元素的属性,第二个元素是一个对象,包含了一些状态值。

60. useDrag

useDrag 是一个用于实现拖动功能的 Hook。

    import { useDrag } from 'ahooks';function App() {const [props, { isDragging }] = useDrag();return (<div {...props}>{isDragging ? 'Now dragging' : 'Drag me'}</div>);}

在上面的代码中,useDrag不接收任何参数,它返回一个数组,第一个元素是用于绑定到 DOM 元素的属性,第二个元素是一个对象,包含了一些状态值。

更多关于ahooks.js的API介绍,请查看专栏:ahooks.js:一款强大的React Hooks库

相关文章:

ahooks.js:一款强大的React Hooks库及其API使用教程(四)

一、ahooks.js简介二、ahooks.js安装三、继续ahooks.js API的介绍与使用教程51. useResetState52. useUpdateLayoutEffect53. useDeepCompareLayoutEffect54. useRafInterval55. useRafTimeout56. useTimeout57. useLockFn58. useDocumentVisibility59. useDrop60. useDrag 一、…...

FOSSASIA Summit 2023 - 开源亚洲行

作者 Ted 致歉&#xff1a;本来这篇博客早就该发出&#xff0c;但是由于前几个月频繁差旅导致精神不佳&#xff0c;再加上后续我又参加了 Linux 基金会 7/27 在瑞士日内瓦举办的 Open Source Congress&#xff0c;以及 7/29-30 台北的 COSCUP23&#xff0c;干脆三篇连发&#x…...

QT 基本对话框

包括&#xff1a; 1.标准文件对话框 dialog.h #ifndef DIALOG_H #define DIALOG_H#include <QDialog> #include <QTextCodec> #include <QLabel> #include <QLineEdit> #include <QPushButton> #include <QGridLayout> #include <QFr…...

​8th参考文献:[8]许少辉.乡村振兴战略下传统村落文化旅游设计[M]北京:中国建筑出版传媒,2022.

​&#xff18;th参考文献&#xff1a;&#xff3b;&#xff18;&#xff3d;许少辉&#xff0e;乡村振兴战略下传统村落文化旅游设计&#xff3b;&#xff2d;&#xff3d;北京&#xff1a;中国建筑出版传媒&#xff0c;&#xff12;&#xff10;&#xff12;&#xff12;&…...

Azure静态网站托管

什么是静态网站托管 Azure Blob的静态网站托管是一项功能&#xff0c;它允许开发人员在Azure Blob存储中托管和发布静态网站。通过这个功能&#xff0c;您可以轻松地将静态网页、图像、视频和其他网站资源存储在Azure Blob中&#xff0c;并直接通过提供的URL访问这些资源。 官…...

LeetCode 热题 100(五):54. 螺旋矩阵、234. 回文链表、21. 合并两个有序链表

题目一&#xff1a; 54. 螺旋矩阵https://leetcode.cn/problems/spiral-matrix/ 题目要求&#xff1a; 思路&#xff1a;一定要先找好边界。如下图 &#xff0c;上边界是1234&#xff0c;右边界是8、12&#xff0c;下边界是9、10、11&#xff0c;左边界是5&#xff0c;所以可…...

常用消息中间件介绍

RocketMQ 阿里开源&#xff0c;阿里参照kafka设计的&#xff0c;Java实现 能够保证严格的消息顺序 提供针对消息的过滤功能 提供丰富的消息拉取模式 高效的订阅者水平扩展能力 实时的消息订阅机制 亿级消息堆积能力 RabbitMQ Erlang实现&#xff0c;非常重量级&#xff0c;更适…...

装饰器读取不到被装饰函数的参数-已解决

def write_case_log(func):def wrapper(*args, **kwargs):logger.info("{}开始执行".format(func.__name__))func(*args,**kwargs)logger.info("{}执行中".format(args))logger.info("{}执行结束",format(func.__name__))return wrapper被装饰函…...

python爬虫爬取中关村在线电脑以及参数数据

一. 内容简介 python爬虫爬取中关村在线电脑以及参数数据 二. 软件环境 2.1vsCode 2.2Anaconda version: conda 22.9.0 三.主要流程 3.1 代码 解析都在代码里面 # 接口分析 # 原始接口&#xff0c;后面几个数字就是占位的&#xff0c;每个位置代表着不同的标签 # http…...

chatGPT-对话爱因斯坦

引言 阿尔伯特爱因斯坦&#xff08; 1879年 3 月 14 日 – 1955 年 4 月 18 日&#xff09;是一位出生于德国的理论物理学家&#xff0c;被广泛认为成为有史以来最伟大、最有影响力的科学家之一。他以发展相对论而闻名&#xff0c;他还对量子力学做出了重要贡献&#xff0c;因…...

嵌入式软件开发中的数据类型转换

在嵌入式软件开发时&#xff0c;数据的显示必不可少&#xff0c;那么必定会涉及到数据类型转换。将不同类型的数据在编程中进行转换&#xff0c;以便满足不同的需求。 插入一个知识点&#xff1a; 在C语言中&#xff0c;字符串是由字符组成的字符数组&#xff0c;以null终止符…...

The Go Blog 01:反射的法则(译文)

反思的法则 罗伯-派克 2011 年 9 月 6 日 引言 计算机中的反射是指程序检查自身结构的能力&#xff0c;尤其是通过类型检查自身结构的能力&#xff1b;它是元编程的一种形式。它也是造成混乱的一个重要原因。 在本文中&#xff0c;我们试图通过解释 Go 中的反射是如何工作的…...

Visual Studio Code前端开发插件推荐

引言 Visual Studio Code&#xff08;简称VS Code&#xff09;是一款轻量级且强大的开源代码编辑器&#xff0c;广受前端开发者的喜爱。其丰富的插件生态系统为前端开发提供了许多便利和增强功能的插件。本篇博客将向大家推荐一些在前端开发中常用且优秀的插件&#xff0c;并提…...

jps(JVM Process Status Tool):虚拟机进程状况工具

jps&#xff08;JVM Process Status Tool&#xff09;&#xff1a;虚拟机进程状况工具 列出正在运行的虚拟机进程&#xff0c;并显示虚拟机执行主类名称&#xff08;Main Class&#xff0c;main()函数所在的类&#xff09;以及这些进程的本地虚拟机唯一ID&#xff08;LVMID&am…...

初阶c语言:实战项目三子棋

前言 大家已经和博主学习有一段时间了&#xff0c;今天讲一个有趣的实战项目——三子棋 目录 前言 制作菜单 构建游戏选择框架 实现游戏功能 模块化编程 初始化棋盘 打印棋盘 玩家下棋 电脑下棋 时间戳&#xff1a;推荐一篇 C语言生成随机数的方法_c语言随机数_杯浅…...

计网第三章(数据链路层)(三)

一、点对点协议PPP 在第一篇里有提到数据链路层的信道分为两种&#xff1a;点对点信道和广播信道。 PPP协议就属于点对点信道上的协议。 如果对前面数据链路层的三个基本问题了解的比较透彻&#xff0c;那么这一块很多东西都很好理解。 从考试的角度来讲&#xff0c;PPP协议…...

蓝桥杯每日N题 (砝码称重)

大家好 我是寸铁 希望这篇题解对你有用&#xff0c;麻烦动动手指点个赞或关注&#xff0c;感谢您的关注 不清楚蓝桥杯考什么的点点下方&#x1f447; 考点秘籍 想背纯享模版的伙伴们点点下方&#x1f447; 蓝桥杯省一你一定不能错过的模板大全(第一期) 蓝桥杯省一你一定不…...

Opencv 视频的读取与写入

目录 前言 通过路径获取视频内容 获取视频内容 检查是否正确打开 循环播放 完整代码 从摄像头读取视频数据 获取视频设备 其他与直接读取视频一致 完整实例 录制视频 用于创建视频编解码器的四字符码&#xff08;FourCC&#xff09; cv2.VideoWriter() 将视频帧…...

LeetCode 833. Find And Replace in String【字符串,哈希表,模拟】1460

本文属于「征服LeetCode」系列文章之一&#xff0c;这一系列正式开始于2021/08/12。由于LeetCode上部分题目有锁&#xff0c;本系列将至少持续到刷完所有无锁题之日为止&#xff1b;由于LeetCode还在不断地创建新题&#xff0c;本系列的终止日期可能是永远。在这一系列刷题文章…...

Cesium轨迹漫游及视角切换

飞行漫游&#xff0c;就是让Camera飞行。Camera有一些方法可以实现位置、视角的调整&#xff0c;比如flyTo&#xff0c;setView方法。但这些方法并不能沿着我们想要的路径调整&#xff0c;在通过插值的方法不停的调用setView&#xff0c;但这样会造成视图卡顿&#xff0c;而且计…...

构建去中心化微服务集群,满足高可用性和高并发需求的实践指南!

随着互联网技术的不断发展&#xff0c;微服务架构已经成为了开发和部署应用程序的一种主流方式。然而&#xff0c;当应用程序需要满足高可用性和高并发需求时&#xff0c;单一中心化的微服务架构可能无法满足性能和可靠性的要求。因此&#xff0c;构建一个去中心化的微服务集群…...

开集输出和开漏输出

​​​​​​ 首先指明一下以下8中GPIO输入输出模式&#xff1a; GPIO_Mode_AIN 模拟输入&#xff1b; GPIO_Mode_IN_FLOATING 浮空输入&#xff1b; GPIO_Mode_IPD 下拉输入&#xff1b; GPIO_Mode…...

解决内网GitLab 社区版 15.11.13项目拉取失败

问题描述 GitLab 社区版 发布不久&#xff0c;搭建在内网拉取项目报错&#xff0c;可能提示 unable to access https://github.comxxxxxxxxxxx: Failed to connect to xxxxxxxxxxxxxGit clone error - Invalid argument error:14077438:SSL routines:SSL23_GET_S 15.11.13ht…...

【MySQL--->表的约束】

文章目录 [TOC](文章目录) 一、表的约束概念二、空属性约束三、default约束四、zerofill约束五、主键约束六、auto_increment(自增长)约束七、唯一键约束八、外键约束 一、表的约束概念 表通过约束可以保证插入数据的合法性,本质是通过技术手段,保证插入数据收约束,保证数据的…...

github中Keyless Google Maps API在网页中显示地图和标记 无需api key

使用Google Maps API在网页中显示地图和标记的示例博客。以下是一个简单的示例&#xff1a; C:\pythoncode\blog\google-map-markers-gh-pages\google-map-markers-gh-pages\index.html 介绍&#xff1a; 在本篇博客中&#xff0c;我们将学习如何使用Google Maps API在网页中…...

ComPDFKit PDF SDK for Windows Crack

ComPDFKit PDF SDK for Windows Crack 添加了在创建文本框时调整默认属性的支持。 增加了对调整PDF大小时调整宽度的支持。 添加了对编辑文本时更多快捷方式的支持。 优化了文本输入&#xff0c;并将字体样式与原始文本相匹配。 在内容编辑器模式下复制和粘贴时优化了UI交互。 …...

React+Typescript 状态管理

好 本文 我们来说说状态管理 也就是我们的 state 我们直接顺便写一个组件 参考代码如下 import * as React from "react";interface IProps {title: string,age: number }interface IState {count:number }export default class hello extends React.Component<I…...

stable diffusion 运行时报错: returned non-zero exit status 1.

运行sh run.sh安装stable diffusion时报错&#xff1a;ImportError: cannot import name builder from google.protobuf.internal (stable-diffusion-webui/venv/lib/python3.8/site-packages/google/protobuf/internal/__init__.py) 原因&#xff1a;python版本过低&#xff0…...

el-popover弹窗修改三角样式或者位置

el-popover中设置类名 popper-class"filepopver"&#xff0c;我这位置是placement"top-start" <el-popover placement"top-start" popper-class"filepopver" class"filename" width"300" trigger"hover&q…...

Linux驱动开发之点亮三盏小灯

头文件 #ifndef __HEAD_H__ #define __HEAD_H__//LED1和LED3的硬件地址 #define PHY_LED1_MODER 0x50006000 #define PHY_LED1_ODR 0x50006014 #define PHY_LED1_RCC 0x50000A28 //LED2的硬件地址 #define PHY_LED2_MODER 0x50007000 #define PHY_LED2_ODR 0x50007014 #define…...

建设中小企业网站/互动营销策略

but we cant use it unless you put visual studio in 64bit mode.最近装dlib时候遇到这个问题&#xff0c;很简单就能解决掉 Visual Studio用户通常应该以64位模式执行所有操作。默认情况下&#xff0c;Visual Studio是32位&#xff0c;在其输出和自己的执行中都是如此&…...

专业烟台房产网站建设/百度推广代理

通常word文件可以通过另存为html/htm的方式把图片从内容中拆分出来&#xff0c;网上一搜一大堆。 上述操作主要是针对.doc文件进行操作才能得到原图&#xff0c;现在我有.docx文件&#xff0c;使用这种方式就只能得到文档中被编辑过的图片&#xff0c;并且编辑过的图片拿出来会…...

dede网站模板怎么安装教程/汕头网站建设方案优化

wdcp非常简单 非常好用但是有时候需要一些自定义配置的时候就不方便了1.去掉public_html 在安装有的程序的时候必须去掉这个 比如osa开源运维软件的时候方法 新建网站后 点击文件管理 选择--> 虚拟主机站点文件(nginx,apache) 根据你的web决定服务器然后找到对应的站点文件 …...

asp伪静态网站如何做筛选/网站标题seo外包优化

承接上文&#xff1a; Docker进阶篇教程&#xff0c;docker-compose, docker swarm, 弹性、扩缩容 Docker进阶篇教程9. 体会swarm弹性、扩缩容9.1 理解扩缩容9.2 docker service命令9.3 理解灰度发布9.4 replicas 3个副本测试9.5 replicas 10个副本测试9.6 scale命令扩缩容1…...

网站建设flash/站长工具查询网

很累&#xff0c;很想早点休息&#xff0c;可是&#xff0c;还是有点不开心。 学习、修改&#xff0c;一晃又到了一点&#xff0c;我终于决定睡了。 有种绝望的伤感&#xff01;转载于:https://www.cnblogs.com/cole2295/archive/2009/07/11/1521101.html...

做网站一定要用ps吗/站长之家ip地址归属查询

一、嵌入式linux字符设备驱动框架 写应用程序的人 不应该去看电路图&#xff0c;但是如何操作硬件呢&#xff1a;调用驱动程序里的open&#xff0c;read&#xff0c;write等来实现。 C库里实现了 open 、read、write上层函数 调用open等&#xff1a;swi val—引发一个异常中断…...