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库

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/50408.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

AI大模型潮水中,医疗数字化加速「求解」

蝴蝶挥动翅膀&#xff0c;医疗行业每个角落开始连锁反应&#xff0c;曾经被忽视的问题也愈发明显。但与之对应的是&#xff0c;对数字化和AI大模型的价值认可&#xff0c;在中国医疗赛道也正在加速来临。 作者|斗斗 编辑|皮爷 出品|产业家 重庆市某地方人民医院&#xf…

如何实现element UI中table操作栏更多按钮的展示与折叠?

解决思路: ​ 直接使用elementUI文档上Popover 弹出框组件 废话不多说,直接上代码吧 <el-table :data="locationList" v-loading="loading" border class="table" ref="multipleTable" @selection-change="handleSelecti…

【C++】做一个飞机空战小游戏(十二)——游戏源代码、音效、图标等资源文件

[导读]本系列博文内容链接如下&#xff1a; 【C】做一个飞机空战小游戏(一)——使用getch()函数获得键盘码值 【C】做一个飞机空战小游戏(二)——利用getch()函数实现键盘控制单个字符移动【C】做一个飞机空战小游戏(三)——getch()函数控制任意造型飞机图标移动 【C】做一个飞…

微信小程序创建项目以及注意事项

1.申请账号并完善信息 2.下载安装开发工具 3.开发小程序 4.上传代码 5.提交审核 6.发布 创建项目 根据需求选择模板&#xff0c;也可以不选择模板 创建完毕之后 进入页面点击终端 然后新建终端 输入npm init 一直按回车即可 安装成功 出现package.json 如何使用组件&#x…

Android 12系统源码_输入事件(一)HOME按键事件响应流程

前言 本文我们现在主要分析一下android系统对HOME按键的响应过程&#xff0c;HOME按键事件是属于系统级别的按键事件监听&#xff0c;而在Android系统中&#xff0c;系统级别的按键处理逻辑都在PhoneWindowManager这个类中。 一、interceptKeyBeforeDispatching方法分发按键事…

IC芯片 trustzone学习

搭建Airplay TA环境需要在IC的TrustZone中进行。TrustZone是一种安全技术&#xff0c;用于隔离安全和非安全环境&#xff0c;并保护敏感文件。在TrustZone中&#xff0c;我们需要编写一个叫做TA&#xff08;Trusted Application&#xff09;的应用程序来控制这些私密文档。 &am…

SpringBoot一些困惑及梳理

Spring中常用的classpath前缀到底指向哪里? classpath实际就是和java命令行运行时指定的classpath是同一个概念&#xff0c;在ideamaven中也就是指向target/classes目录。不要被网上哪些复制粘贴的文章所迷惑。classpath: 和 classpath*: 到底什么区别? classpath: 实际就是当…

Python土力学与基础工程计算.PDF-土的三项组成

5.3 Python求解 Python 求解代码如下&#xff1a; 1. # 定义已知参数 2. G_s 2.7 # 比重 3. w 0.2 # 含水量 4. e 0.6 # 孔隙比 5. gamma_w 9.81 # 水的重度 6. 7. # 根据公式计算饱和度 8. S_r G_s * w / e 9. print("饱和度为", S_r) 10. 11.…

js将搜索的关键字加颜色

js将搜索的关键字加颜色 使用正则匹配关键字并加入span标签&#xff0c;页面渲染时使用v-html渲染即可 // 文本框内容 let searchCont 测试;const reg new RegExp((${searchCont.value}), g); let data 图片保存测试A; data data.replace(reg, <span style"color:…

vscode+ros开发环境搭建

目录 介绍 前提 vscode安装 vscode插件安装 工作空间准备 打开vscode 创建catkin包 编写cpp代码 编译 运行 启动ros服务 监听话题 启动ros测试 介绍 ros开发是机器人开发中必不可少的工作&#xff0c;语言选择可以是c,也可以是python。工具的话&#xff0c;不能像wi…

基于YOLOv8模型的五类动物目标检测系统(PyTorch+Pyside6+YOLOv8模型)

摘要&#xff1a;基于YOLOv8模型的五类动物目标检测系统可用于日常生活中检测与定位动物目标&#xff08;狼、鹿、猪、兔和浣熊&#xff09;&#xff0c;利用深度学习算法可实现图片、视频、摄像头等方式的目标检测&#xff0c;另外本系统还支持图片、视频等格式的结果可视化与…

Github 博客搭建

Github 博客搭建 准备工作 准备一个 github 账号建立 github 仓库&#xff0c;仓库名为 username.github.io设置仓库为 publicclone 仓库&#xff0c;写入一个 index.html 文件&#xff0c;推送到仓库&#xff08;许多网上的教程会有 choose theme&#xff0c;但是新版本的 g…

「Java」《Java集合框架详解:掌握常用集合类,提升开发效率》

Java集合框架详解&#xff1a;掌握常用集合类&#xff0c;提升开发效率 摘要&#xff1a;一、 引言1.1 Java 集合框架的作用和重要性&#xff0c;在开发中的应用场景 二. 集合框架概述2.1 集合框架的基本目标和设计思想2.2 层次结构图示&#xff0c;各个集合接口之间的关系 三.…

AI 绘画Stable Diffusion 研究(十四)SD 图生图+剪映制作人物说话视频

大家好&#xff0c;我是风雨无阻。 前一篇&#xff0c;我们详细介绍了使用 SadTlaker制作数字人视频案例&#xff0c;感兴趣的朋友请前往查看:AI 绘画Stable Diffusion 研究&#xff08;十三&#xff09;SD数字人制作工具SadTlaker使用教程。 对于没有安装 SadTlaker 插件的朋友…

CH583/2构建工程教程

CH583/2构建工程教程 绪论资源移植步骤准备移植步骤一步骤二 工程配置修改工程名修改前修改后 工程配置修改资源文件 修改C/C general修改C/C构建修改汇编交叉编译修改C交叉编译修改GNU RISC-V Cross Linker 修改跟编译 移植注意事项 绪论 资源 CH583/2的SDK下载 移植步骤 …

Java课题笔记~ 整合第三方技术

1. 整合JUnit 问题导入 回忆一下Spring整合JUnit的步骤&#xff1f; 1.1 Spring整合JUnit&#xff08;复习&#xff09; 1.2 SpringBoot整合JUnit 【第一步】添加整合junit起步依赖(可以直接勾选) <dependency><groupId>org.springframework.boot</groupId…

flutter对数组中某个数据二次加工成单独的数组

如何将数据[2,1,2,2,2,1,2,2,3,2,2,2,2,3,2,2,2,2,2,3,2,4,2,2,1,2,3,2,4,2]加工成 [[2], 1, [2, 2, 2], 1, [2, 2], 3, [2, 2, 2, 2], 3, [2, 2, 2, 2, 2], 3, [2], 4, [2, 2], 1, [2], 3, [2], 4, [2]]。这是实际工作中遇到的问题&#xff0c;UI要求将某一类型数据&#xff…

Android View截屏长图拼接(RecyclerView)

Android页面View截图&#xff08;分享、保存相册&#xff09; Android View 截屏上下拼接 Android View截屏长图拼接&#xff08;RecyclerView&#xff09; Android View截屏长图拼接&#xff08;NestedScrollView&#xff09; RecyclerView截屏&#xff0c;其实就是遍历每…

前端实习day30

今天又是一个繁忙的一天&#xff0c;加功能&#xff0c;改样式&#xff0c;改得头皮发麻&#xff0c;预定的任务还是没能完成&#xff0c;改起来真得太头疼&#xff0c;代码太乱了&#xff01;&#xff01;昨天那个bug&#xff0c;今天问了一下同事&#xff0c;不到五分钟就解决…

无涯教程-PHP - intval() 函数

PHP 7引入了一个新函数 intdiv()&#xff0c;该函数对其操作数执行整数除法并将该除法返回为int。 <?php$valueintdiv(10,3);var_dump($value);print(" ");print($value); ?> 它产生以下浏览器输出- int(3) 3 PHP - intval() 函数 - 无涯教程网无涯教程网…