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

ES6从入门到精通:前言

ES6简介 ES6&#xff08;ECMAScript 2015&#xff09;是JavaScript语言的重大更新&#xff0c;引入了许多新特性&#xff0c;包括语法糖、新数据类型、模块化支持等&#xff0c;显著提升了开发效率和代码可维护性。 核心知识点概览 变量声明 let 和 const 取代 var&#xf…...

椭圆曲线密码学(ECC)

一、ECC算法概述 椭圆曲线密码学&#xff08;Elliptic Curve Cryptography&#xff09;是基于椭圆曲线数学理论的公钥密码系统&#xff0c;由Neal Koblitz和Victor Miller在1985年独立提出。相比RSA&#xff0c;ECC在相同安全强度下密钥更短&#xff08;256位ECC ≈ 3072位RSA…...

【入坑系列】TiDB 强制索引在不同库下不生效问题

文章目录 背景SQL 优化情况线上SQL运行情况分析怀疑1:执行计划绑定问题?尝试:SHOW WARNINGS 查看警告探索 TiDB 的 USE_INDEX 写法Hint 不生效问题排查解决参考背景 项目中使用 TiDB 数据库,并对 SQL 进行优化了,添加了强制索引。 UAT 环境已经生效,但 PROD 环境强制索…...

Neo4j 集群管理:原理、技术与最佳实践深度解析

Neo4j 的集群技术是其企业级高可用性、可扩展性和容错能力的核心。通过深入分析官方文档,本文将系统阐述其集群管理的核心原理、关键技术、实用技巧和行业最佳实践。 Neo4j 的 Causal Clustering 架构提供了一个强大而灵活的基石,用于构建高可用、可扩展且一致的图数据库服务…...

成都鼎讯硬核科技!雷达目标与干扰模拟器,以卓越性能制胜电磁频谱战

在现代战争中&#xff0c;电磁频谱已成为继陆、海、空、天之后的 “第五维战场”&#xff0c;雷达作为电磁频谱领域的关键装备&#xff0c;其干扰与抗干扰能力的较量&#xff0c;直接影响着战争的胜负走向。由成都鼎讯科技匠心打造的雷达目标与干扰模拟器&#xff0c;凭借数字射…...

智能仓储的未来:自动化、AI与数据分析如何重塑物流中心

当仓库学会“思考”&#xff0c;物流的终极形态正在诞生 想象这样的场景&#xff1a; 凌晨3点&#xff0c;某物流中心灯火通明却空无一人。AGV机器人集群根据实时订单动态规划路径&#xff1b;AI视觉系统在0.1秒内扫描包裹信息&#xff1b;数字孪生平台正模拟次日峰值流量压力…...

Python+ZeroMQ实战:智能车辆状态监控与模拟模式自动切换

目录 关键点 技术实现1 技术实现2 摘要&#xff1a; 本文将介绍如何利用Python和ZeroMQ消息队列构建一个智能车辆状态监控系统。系统能够根据时间策略自动切换驾驶模式&#xff08;自动驾驶、人工驾驶、远程驾驶、主动安全&#xff09;&#xff0c;并通过实时消息推送更新车…...

Caliper 负载(Workload)详细解析

Caliper 负载(Workload)详细解析 负载(Workload)是 Caliper 性能测试的核心部分,它定义了测试期间要执行的具体合约调用行为和交易模式。下面我将全面深入地讲解负载的各个方面。 一、负载模块基本结构 一个典型的负载模块(如 workload.js)包含以下基本结构: use strict;/…...

go 里面的指针

指针 在 Go 中&#xff0c;指针&#xff08;pointer&#xff09;是一个变量的内存地址&#xff0c;就像 C 语言那样&#xff1a; a : 10 p : &a // p 是一个指向 a 的指针 fmt.Println(*p) // 输出 10&#xff0c;通过指针解引用• &a 表示获取变量 a 的地址 p 表示…...

解析两阶段提交与三阶段提交的核心差异及MySQL实现方案

引言 在分布式系统的事务处理中&#xff0c;如何保障跨节点数据操作的一致性始终是核心挑战。经典的两阶段提交协议&#xff08;2PC&#xff09;通过准备阶段与提交阶段的协调机制&#xff0c;以同步决策模式确保事务原子性。其改进版本三阶段提交协议&#xff08;3PC&#xf…...