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

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

    • 一、ahooks.js简介
    • 二、ahooks.js安装
    • 三、继续ahooks.js API的介绍与使用教程
      • 61. useEventTarget
      • 62. useExternal
      • 63. useFavicon
      • 64. useMutationObserver
      • 65. useLongPress
      • 66. useScroll
      • 67. useResponsive
      • 68. useFocusWithin
      • 69. useControllableValue
      • 70. useEventEmitter

一、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使用教程(三)
  • ahooks.js:一款强大的React Hooks库及其API使用教程(四)

61. useEventTarget

useEventTarget 是一个用于创建并管理事件目标的 Hook。

    import { useEventTarget } from 'ahooks';function App() {const [value, { reset, onChange }] = useEventTarget();return (<div><input value={value} onChange={onChange} /><button onClick={reset}>Reset</button></div>);}

在上述代码中,useEventTarget返回一个数组,第一个元素是当前的值,第二个元素是一个包含 resetonChange 方法的对象。onChange 方法用于处理输入变化,reset 方法用于重置值。

62. useExternal

useExternal 是一个用于动态加载外部脚本或样式的 Hook。

    import { useExternal } from 'ahooks';function App() {const status = useExternal('https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.27.0/moment.min.js');return (<div><p>{status}</p></div>);}

在上述代码中,useExternal接收一个外部资源的 URL 作为参数,并返回加载状态。

63. useFavicon

useFavicon 是一个用于动态更改网页图标的 Hook。

    import { useFavicon } from 'ahooks';function App() {useFavicon('/new-icon.ico');return (<div><p>Check the favicon!</p></div>);}

在上述代码中,useFavicon接收一个新的 favicon 的 URL 作为参数。

64. useMutationObserver

useMutationObserver 是一个用于监听 DOM 变化的 Hook。

    import { useMutationObserver } from 'ahooks';function App() {const ref = useRef();useMutationObserver(ref, mutations => {// handle mutations});return (<div ref={ref}><p>Content</p></div>);}

在上述代码中,useMutationObserver接收一个 ref 和一个处理函数。当 ref 所引用的 DOM 元素发生变化时,处理函数将被调用。

65. useLongPress

useLongPress 是一个用于处理长按事件的 Hook。

    import { useLongPress } from 'ahooks';function App() {const longPressEvents = useLongPress(() => {console.log('Long press activated');});return (<button {...longPressEvents}>Long Press Me</button>);}

在上述代码中,useLongPress接收一个处理函数,返回一个可以绑定到元素上的事件处理器对象。

66. useScroll

useScroll 是一个用于获取滚动位置的 Hook。

    import { useScroll } from 'ahooks';function App() {const position = useScroll();return (<div><p>Scroll position: {position.top}, {position.left}</p></div>);}

在上述代码中,useScroll返回一个包含 topleft 属性的对象,表示滚动位置。

67. useResponsive

useResponsive 是一个用于响应式编程的 Hook。

    import { useResponsive } from 'ahooks';function App() {const screen = useResponsive();return (<div><p>Current screen: {screen.isDesktop ? 'Desktop' : 'Mobile'}</p></div>);}

在上述代码中,useResponsive返回一个对象,该对象包含了一些布尔值属性,如 isDesktopisMobile,表示当前屏幕类型。

68. useFocusWithin

useFocusWithin 是一个用于处理元素内部焦点状态的 Hook。

    import { useFocusWithin } from 'ahooks';function App() {const { isFocusWithin } = useFocusWithin();return (<div><input /><p>{isFocusWithin ? 'Focused' : 'Not Focused'}</p></div>);}

在上述代码中,useFocusWithin返回一个对象,该对象包含一个 isFocusWithin 属性,表示元素内部是否有焦点。

69. useControllableValue

useControllableValue 是一个用于处理可控制值的 Hook。

    import { useControllableValue } from 'ahooks';function App() {const [value, setValue] = useControllableValue();return (<div><input value={value} onChange={e => setValue(e.target.value)} /></div>);}

在上述代码中,useControllableValue返回一个数组,第一个元素是当前的值,第二个元素是一个用于设置该值的函数。

70. useEventEmitter

useEventEmitter 是一个用于创建事件发射器的 Hook。

    import { useEventEmitter } from 'ahooks';function App() {const emitter = useEventEmitter();useEffect(() => {emitter.on('message', msg => {console.log(msg);});emitter.emit('message', 'Hello');}, []);return (<div><p>Check the console!</p></div>);}

在上述代码中,useEventEmitter返回一个事件发射器对象,你可以在其上注册事件并发出事件。

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

相关文章:

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

一、ahooks.js简介二、ahooks.js安装三、继续ahooks.js API的介绍与使用教程61. useEventTarget62. useExternal63. useFavicon64. useMutationObserver65. useLongPress66. useScroll67. useResponsive68. useFocusWithin69. useControllableValue70. useEventEmitter 一、aho…...

MySQL TCL 事务控制

文章目录 1.事务四大特性2.事务并发问题3.事务隔离级别4.隔离级别查看与设置5.动提交事务5.1 查看自动提交事务5.2 关闭或开启自动提交事务 6.事务执行的基本流程7.设置事务的保存点参考文献 说到事务控制&#xff0c;先说一下数据库的事务是什么以及 MySQL 中我们必知的知识点…...

【Ubuntu】从Graylog到Grafana Loki:构建更强大的网络设备管理和监控系统

在将Graylog部署到生产环境时&#xff0c;我们遇到了一些问题&#xff0c;其中最主要的是无法安装MongoDB并且无法随时重启机器去修改BIOS设置来修复问题 【WARNING: MongoDB 5.0 requires a CPU with AVX support, and your current system does not appear to have that! 】。…...

[JavaWeb]【八】web后端开发-Mybatis

目录 一 介绍 二 Mybatis的入门 2.1 快速入门 2.1.1 准备SpringBoot工程 2.1.2 创建数据库mybatis以及对应库表user 2.1.3 创建User实体类 2.1.4 配置application.properties数据库连接信息 2.1.5 编写sql语句&#xff08;注解方式&#xff09; 2.1.6 测试运行 2.1.7 配…...

Flink源码之Checkpoint执行流程

Checkpoint完整流程如上图所示&#xff1a; JobMaster的CheckpointCoordinator向所有SourceTask发送RPC触发一次CheckPointSourceTask向下游广播CheckpointBarrierSouceTask完成状态快照后向JobMaster发送快照结果非SouceTask在Barrier对齐后完成状态快照向JobMaster发送快照结…...

【工具使用】Git的使用

dev代表开发版 1. git clone 命令 通过 git add <name> 对文件进行跟踪&#xff0c;把<name>加入到暂存区 git commit -m XXXXXXX 提交修改并补充XXXXX作为注释 “暂存”状态&#xff1a;出现了一些修改&#xff0c;但是还没有提交 对于Java来说&#xff0c;.cl…...

无涯教程-PHP Installation on Windows NT/2000/XP with IIS函数

在Windows Server上运行IIS的PHP的安装比在Unix上简单得多,因为它涉及的是预编译的二进制文件而不是源代码。 如果您打算在Windows上安装PHP,那么这是先决条件列表- 运行中的PHP支持的Web服务器。一个正确安装的PHP支持的数据库,如MySQL或Oracle等。(如果您打算使用的话) PHP…...

EureKa快速入门

EureKa快速入门 远程调用的问题 多个服务有多个端口&#xff0c;这样的话服务有多个&#xff0c;硬编码不太适合 eureKa的作用 将service的所有服务的端口全部记录下来 想要的话 直接从注册中心查询对于所有服务 每隔一段时间需要想eureKa发送请求 保证服务还存活 动手实践 …...

Sectigo EV代码签名申请步骤

一、EV代码签名申请前提 1、单位成立时间不低于&#xff1a;3个月 2、单位工商及企查查可查 3、单位经营正常 4、注册地址真实存在&#xff0c;禁止使用集中注册地址 5、企查查登记电话和邮箱&#xff0c;确定查询结果的电话可以接听、邮箱可以接收邮件&#xff0c;如果信…...

生信学院|08月25日《SOLIDWORKS PDM帮助企业对设计数据版本的管理应用》

课程主题&#xff1a;SOLIDWORKS PDM帮助企业对设计数据版本的管理应用 课程时间&#xff1a;2023年08月25日 14:00-14:30 主讲人&#xff1a;车立洋 生信科技 PDM专家 1、图纸&文档的版本管理对于企业的重要性 2、SolidWorks PDM对图纸&文档版本的管理 3、SolidW…...

vue页面转pdf后分页时文字被横向割裂

效果 预期效果 //避免分页被截断async outPutPdfFn (id, title) {const _t this;const A4_WIDTH 592.28;const A4_HEIGHT 841.89;// dom的id。let target document.getElementById(pdf);let pageHeight target.scrollWidth / A4_WIDTH * A4_HEIGHT;// 获取分割dom&#xf…...

数据结构——队列(C语言)

需求&#xff1a;无 本篇文章将解决一下几个问题&#xff1a; 队列是什么&#xff1f;如何实现一个队列&#xff1f;什么场景下会用队列&#xff1f; 队列的概念&#xff1a; 队列&#xff1a;一种只允许一端进行插入数据操作&#xff0c;在另一端进行删除操作的特殊线性表。…...

WGS84地球坐标系,GCJ02火星坐标系,BD09百度坐标系简介与转换 资料收集

野火 ATGM332D简介 高性能、低功耗 GPS、北斗双模定位模块 STM32 GPS定位_为了维护世界和平_的博客-CSDN博客 秉火多功能调试助手上位机开源&#xff01;共六款软件&#xff0c;学到你吐... , - 电脑上位机 - 野火电子论坛 - Powered by Discuz! https://www.firebbs.cn/for…...

【面试题】前端面试复习6---性能优化

前端面试题库 &#xff08;面试必备&#xff09; 推荐&#xff1a;★★★★★ 地址&#xff1a;前端面试题库 性能优化 一、性能指标 要在 Chrome 中查看性能指标&#xff0c;可以按照以下步骤操作&#xff1a; 打开 Chrome 浏览器&#xff0c;并访问你想要测试…...

隧道HTTP具备的条件

作为一名专业的爬虫代理供应商&#xff0c;我们都知道使用代理是保证爬虫的高效性和稳定性的重要手段之一。而隧道代理则是近年来备受推崇的一种代理形式&#xff0c;它通过将请求通过隧道传输&#xff0c;可以有效地隐藏爬虫的真实IP地址&#xff0c;提高爬虫的反爬能力。 在…...

部署FTP服务(二)

目录 2.访问FTP服务 1.使用ftp命令行工具 2.使用浏览器 3.使用FileZilla Client 3.Serv-U 1.定义新域 2.创建用户 4. windowsserver搭建ftp服务器 一、FTP工具 二、Windows资源管理器 三、IE浏览器访问 2.访问FTP服务 下面在一台装有Windows10操作系统的计算机中&#…...

缓存的变更(JVM本地缓存->Redis分布式缓存)

在一次需求修改中&#xff0c;下游的服务附加提出了&#xff0c;针对某个业务数据缓存的生效时间的要求 原JVM设计方案&#xff1a; 采用jvm本地缓存机制&#xff0c;定时任务30秒刷新一次 现在redis方案&#xff1a; 因为很多地方使用了这个业务数据缓存&#xff0c;使用方…...

springMVC Unix 文件参数变更漏洞修复

错误信息如下&#xff1a; 解决方案&#xff1a; 原因&#xff1a;未对用户输入正确执行危险字符清理 未检查用户输入中是否包含“…”&#xff08;两个点&#xff09;字符串&#xff0c;比如 url 为 /login?action…/webapps/RTJEKSWTN26635&typerandomCode cookie为Coo…...

【LeetCode】494.目标和

题目 给你一个非负整数数组 nums 和一个整数 target 。 向数组中的每个整数前添加 或 - &#xff0c;然后串联起所有整数&#xff0c;可以构造一个 表达式 &#xff1a; 例如&#xff0c;nums [2, 1] &#xff0c;可以在 2 之前添加 &#xff0c;在 1 之前添加 - &#x…...

KaiwuDB 荣获哈佛商业评论 2023“高能韧性团队奖”

8月18日&#xff0c;《哈佛商业评论》中文版携手 FESCO 成功举办“第九届人才经济论坛”暨“2022-2023 高能团队奖颁奖典礼”。论坛秉承前沿的全球视野及权威的管理理念&#xff0c;发掘并展示本土企业组织管理的最佳实践&#xff0c;并重磅揭晓第二届“高能团队奖”评选结果。…...

利用最小二乘法找圆心和半径

#include <iostream> #include <vector> #include <cmath> #include <Eigen/Dense> // 需安装Eigen库用于矩阵运算 // 定义点结构 struct Point { double x, y; Point(double x_, double y_) : x(x_), y(y_) {} }; // 最小二乘法求圆心和半径 …...

变量 varablie 声明- Rust 变量 let mut 声明与 C/C++ 变量声明对比分析

一、变量声明设计&#xff1a;let 与 mut 的哲学解析 Rust 采用 let 声明变量并通过 mut 显式标记可变性&#xff0c;这种设计体现了语言的核心哲学。以下是深度解析&#xff1a; 1.1 设计理念剖析 安全优先原则&#xff1a;默认不可变强制开发者明确声明意图 let x 5; …...

rknn优化教程(二)

文章目录 1. 前述2. 三方库的封装2.1 xrepo中的库2.2 xrepo之外的库2.2.1 opencv2.2.2 rknnrt2.2.3 spdlog 3. rknn_engine库 1. 前述 OK&#xff0c;开始写第二篇的内容了。这篇博客主要能写一下&#xff1a; 如何给一些三方库按照xmake方式进行封装&#xff0c;供调用如何按…...

Spring Boot 实现流式响应(兼容 2.7.x)

在实际开发中&#xff0c;我们可能会遇到一些流式数据处理的场景&#xff0c;比如接收来自上游接口的 Server-Sent Events&#xff08;SSE&#xff09; 或 流式 JSON 内容&#xff0c;并将其原样中转给前端页面或客户端。这种情况下&#xff0c;传统的 RestTemplate 缓存机制会…...

解决Ubuntu22.04 VMware失败的问题 ubuntu入门之二十八

现象1 打开VMware失败 Ubuntu升级之后打开VMware上报需要安装vmmon和vmnet&#xff0c;点击确认后如下提示 最终上报fail 解决方法 内核升级导致&#xff0c;需要在新内核下重新下载编译安装 查看版本 $ vmware -v VMware Workstation 17.5.1 build-23298084$ lsb_release…...

【项目实战】通过多模态+LangGraph实现PPT生成助手

PPT自动生成系统 基于LangGraph的PPT自动生成系统&#xff0c;可以将Markdown文档自动转换为PPT演示文稿。 功能特点 Markdown解析&#xff1a;自动解析Markdown文档结构PPT模板分析&#xff1a;分析PPT模板的布局和风格智能布局决策&#xff1a;匹配内容与合适的PPT布局自动…...

selenium学习实战【Python爬虫】

selenium学习实战【Python爬虫】 文章目录 selenium学习实战【Python爬虫】一、声明二、学习目标三、安装依赖3.1 安装selenium库3.2 安装浏览器驱动3.2.1 查看Edge版本3.2.2 驱动安装 四、代码讲解4.1 配置浏览器4.2 加载更多4.3 寻找内容4.4 完整代码 五、报告文件爬取5.1 提…...

精益数据分析(97/126):邮件营销与用户参与度的关键指标优化指南

精益数据分析&#xff08;97/126&#xff09;&#xff1a;邮件营销与用户参与度的关键指标优化指南 在数字化营销时代&#xff0c;邮件列表效度、用户参与度和网站性能等指标往往决定着创业公司的增长成败。今天&#xff0c;我们将深入解析邮件打开率、网站可用性、页面参与时…...

AI书签管理工具开发全记录(十九):嵌入资源处理

1.前言 &#x1f4dd; 在上一篇文章中&#xff0c;我们完成了书签的导入导出功能。本篇文章我们研究如何处理嵌入资源&#xff0c;方便后续将资源打包到一个可执行文件中。 2.embed介绍 &#x1f3af; Go 1.16 引入了革命性的 embed 包&#xff0c;彻底改变了静态资源管理的…...

中医有效性探讨

文章目录 西医是如何发展到以生物化学为药理基础的现代医学&#xff1f;传统医学奠基期&#xff08;远古 - 17 世纪&#xff09;近代医学转型期&#xff08;17 世纪 - 19 世纪末&#xff09;​现代医学成熟期&#xff08;20世纪至今&#xff09; 中医的源远流长和一脉相承远古至…...