当前位置: 首页 > 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;而且计…...

铭豹扩展坞 USB转网口 突然无法识别解决方法

当 USB 转网口扩展坞在一台笔记本上无法识别,但在其他电脑上正常工作时,问题通常出在笔记本自身或其与扩展坞的兼容性上。以下是系统化的定位思路和排查步骤,帮助你快速找到故障原因: 背景: 一个M-pard(铭豹)扩展坞的网卡突然无法识别了,扩展出来的三个USB接口正常。…...

测试微信模版消息推送

进入“开发接口管理”--“公众平台测试账号”&#xff0c;无需申请公众账号、可在测试账号中体验并测试微信公众平台所有高级接口。 获取access_token: 自定义模版消息&#xff1a; 关注测试号&#xff1a;扫二维码关注测试号。 发送模版消息&#xff1a; import requests da…...

日语学习-日语知识点小记-构建基础-JLPT-N4阶段(33):にする

日语学习-日语知识点小记-构建基础-JLPT-N4阶段(33):にする 1、前言(1)情况说明(2)工程师的信仰2、知识点(1) にする1,接续:名词+にする2,接续:疑问词+にする3,(A)は(B)にする。(2)復習:(1)复习句子(2)ために & ように(3)そう(4)にする3、…...

Oracle查询表空间大小

1 查询数据库中所有的表空间以及表空间所占空间的大小 SELECTtablespace_name,sum( bytes ) / 1024 / 1024 FROMdba_data_files GROUP BYtablespace_name; 2 Oracle查询表空间大小及每个表所占空间的大小 SELECTtablespace_name,file_id,file_name,round( bytes / ( 1024 …...

大数据零基础学习day1之环境准备和大数据初步理解

学习大数据会使用到多台Linux服务器。 一、环境准备 1、VMware 基于VMware构建Linux虚拟机 是大数据从业者或者IT从业者的必备技能之一也是成本低廉的方案 所以VMware虚拟机方案是必须要学习的。 &#xff08;1&#xff09;设置网关 打开VMware虚拟机&#xff0c;点击编辑…...

解决:Android studio 编译后报错\app\src\main\cpp\CMakeLists.txt‘ to exist

现象&#xff1a; android studio报错&#xff1a; [CXX1409] D:\GitLab\xxxxx\app.cxx\Debug\3f3w4y1i\arm64-v8a\android_gradle_build.json : expected buildFiles file ‘D:\GitLab\xxxxx\app\src\main\cpp\CMakeLists.txt’ to exist 解决&#xff1a; 不要动CMakeLists.…...

Linux部署私有文件管理系统MinIO

最近需要用到一个文件管理服务&#xff0c;但是又不想花钱&#xff0c;所以就想着自己搭建一个&#xff0c;刚好我们用的一个开源框架已经集成了MinIO&#xff0c;所以就选了这个 我这边对文件服务性能要求不是太高&#xff0c;单机版就可以 安装非常简单&#xff0c;几个命令就…...

6个月Python学习计划 Day 16 - 面向对象编程(OOP)基础

第三周 Day 3 &#x1f3af; 今日目标 理解类&#xff08;class&#xff09;和对象&#xff08;object&#xff09;的关系学会定义类的属性、方法和构造函数&#xff08;init&#xff09;掌握对象的创建与使用初识封装、继承和多态的基本概念&#xff08;预告&#xff09; &a…...

【51单片机】4. 模块化编程与LCD1602Debug

1. 什么是模块化编程 传统编程会将所有函数放在main.c中&#xff0c;如果使用的模块多&#xff0c;一个文件内会有很多代码&#xff0c;不利于组织和管理 模块化编程则是将各个模块的代码放在不同的.c文件里&#xff0c;在.h文件里提供外部可调用函数声明&#xff0c;其他.c文…...

二叉树-144.二叉树的前序遍历-力扣(LeetCode)

一、题目解析 对于递归方法的前序遍历十分简单&#xff0c;但对于一位合格的程序猿而言&#xff0c;需要掌握将递归转化为非递归的能力&#xff0c;毕竟递归调用的时候会调用大量的栈帧&#xff0c;存在栈溢出风险。 二、算法原理 递归调用本质是系统建立栈帧&#xff0c;而非…...