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

    • 一、ahooks.js简介
    • 二、ahooks.js安装
    • 三、继续ahooks.js API的介绍与使用教程
      • 21. useLocalStorageState
      • 22. useSessionStorageState
      • 23. useClickAway
      • 24. usePersistFn
      • 25. useCreation
      • 26. useFullscreen
      • 27. useInViewport
      • 28. useInfiniteScroll
      • 29. usePagination
      • 30. useDynamicList
      • 31. useVirtualList
      • 32. useHistoryTravel
      • 33. useNetwork
      • 34. useSelections
      • 35. useCountDown
      • 36. useTextSelection
      • 37. useWebSocket
      • 38. useUrlState
      • 39. useCookieState
      • 40. useMap

一、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使用教程(一)

21. useLocalStorageState

useLocalStorageState 是一个用于管理 localStorage 中状态的 Hook。

    import { useLocalStorageState } from 'ahooks';function App() {const [value, setValue] = useLocalStorageState('user', 'default');return (<div><p>{value}</p><button onClick={() => setValue('A User')}>Set Name</button></div>);}

在上述代码中,useLocalStorageState接收两个参数。第一个参数是 localStorage 中的键名,第二个参数是默认值。这个 Hook 会返回一个数组,第一个元素是当前的值,第二个元素是一个用于设置该值的函数。

22. useSessionStorageState

useSessionStorageState是一个用于管理 sessionStorage 中状态的 Hook。

import { useSessionStorageState } from 'ahooks';function App() {const [value, setValue] = useSessionStorageState('user', 'default');return (<div><p>{value}</p><button onClick={() => setValue('A User')}>Set Name</button></div>);
}

在上述代码中,useSessionStorageState 接收两个参数。第一个参数是 sessionStorage 中的键名,第二个参数是默认值。这个 Hook 会返回一个数组,第一个元素是当前的值,第二个元素是一个用于设置该值的函数。

23. useClickAway

useClickAway 是一个用于在用户点击元素外部时触发函数的 Hook。

import { useRef } from 'react';
import { useClickAway } from 'ahooks';function App() {const ref = useRef();useClickAway(() => {console.log('User clicked away!');}, ref);return (<div ref={ref}>Click outside this area</div>);
}

在上述代码中,useClickAway 接收一个函数和一个 ref 作为参数。当用户点击 ref 指向的元素外部时,会执行传入的函数。

24. usePersistFn

usePersistFn 是一个可以返回稳定的函数引用的 Hook,即使依赖项改变,返回的函数引用也不会改变。

import { usePersistFn } from 'ahooks';function App() {const show = usePersistFn(() => {console.log('Hello World');});return (<div><button onClick={show}>Show</button></div>);
}

在上述代码中,usePersistFn 接收一个函数作为参数,返回一个稳定的函数引用。这对于避免因函数引用改变而引发的不必要的渲染非常有用。

25. useCreation

useCreation 是一个用于在组件初次渲染时创建并保持稳定的值的 Hook。

import { useCreation } from 'ahooks';function App() {const value = useCreation(() => Math.random(), []);return (<div><p>{value}</p></div>);
}

在上述代码中,useCreation 接收两个参数。第一个参数是一个工厂函数,用于创建初始值,第二个参数是一个数组,包含了所有的依赖项。这个 Hook 会在组件初次渲染时执行工厂函数,并返回创建的值。

对不起,我犯了个错误。让我们继续介绍其他的 Hook:

26. useFullscreen

`useFullscreen` 是一个用于控制元素全屏状态的 Hook。
import { useRef } from 'react';
import { useFullscreen } from 'ahooks';function App() {const ref = useRef();const { setFull, exitFull, toggleFull } = useFullscreen(ref);return (<div ref={ref}><button onClick={toggleFull}>Toggle Fullscreen</button></div>);
}

在上述代码中,useFullscreen 接收一个 ref 作为参数,并返回一个对象,该对象包含 setFullexitFulltoggleFull 这些方法,用于控制元素的全屏状态。

27. useInViewport

useInViewport 是一个用于检测元素是否在视口内的 Hook。

import { useRef } from 'react';
import { useInViewport } from 'ahooks';function App() {const ref = useRef();const inViewport = useInViewport(ref);return (<div ref={ref}>{inViewport ? 'In viewport' : 'Not in viewport'}</div>);
}

在上述代码中,useInViewport 接收一个 ref 作为参数,并返回一个布尔值,表示元素是否在视口内。

  1. useMouse

useMouse 是一个用于获取鼠标位置的 Hook。

import { useMouse } from 'ahooks';function App() {const mouse = useMouse();return (<div>Current mouse position: {mouse.x}, {mouse.y}</div>);
}

在上述代码中,useMouse 返回一个对象,该对象包含鼠标的当前 x 和 y 坐标。

非常抱歉之前的误会。让我们从序号28开始,介绍你提到的这些ahooks库中的API:

28. useInfiniteScroll

useInfiniteScroll 是一个实现无限滚动功能的 Hook。

import { useInfiniteScroll } from 'ahooks';function App() {const { list, loading, loadMore, hasMore } = useInfiniteScroll(service);return (<div>{list.map((item, index) => (<div key={index}>{item}</div>))}{loading && <div>Loading...</div>}{!loading && hasMore && <div onClick={loadMore}>Load more</div>}</div>);
}

在上述代码中,useInfiniteScroll 接受一个异步函数 service 作为参数,返回一个包含 listloadingloadMorehasMore 的对象。

29. usePagination

usePagination 是一个实现分页功能的 Hook。

import { usePagination } from 'ahooks';function App() {const { tableProps, paginationProps } = usePagination(service);return (<Table {...tableProps}><Pagination {...paginationProps} /></Table>);
}

在上述代码中,usePagination 接受一个异步函数 service 作为参数,返回一个包含 tablePropspaginationProps 的对象,这些属性可以直接传递给 TablePagination 组件。

30. useDynamicList

useDynamicList 是一个用于处理动态列表的 Hook。

import { useDynamicList } from 'ahooks';function App() {const { list, remove, push } = useDynamicList([1, 2, 3]);return (<div>{list.map((ele, index) => (<div key={index}><span>{ele}</span><button onClick={() => remove(index)}>Remove</button></div>))}<button onClick={() => push(Date.now())}>Add</button></div>);
}

在上述代码中,useDynamicList 接受一个初始列表作为参数,返回一个包含 listremovepush 的对象。

31. useVirtualList

useVirtualList 是一个用于虚拟列表渲染的 Hook。

import { useVirtualList } from 'ahooks';function App() {const { list, containerProps, wrapperProps } = useVirtualList(data, {itemHeight: 60,});return (<div {...containerProps}><div {...wrapperProps}>{list.map((ele, index) => (<div key={index} style={{ height: 60 }}>Row: {ele.data}</div>))}</div></div>);
}

在上述代码中,useVirtualList 接受一个数据列表和一个包含项目高度的对象作为参数,返回一个包含 listcontainerPropswrapperProps 的对象。

32. useHistoryTravel

useHistoryTravel 是一个用于管理历史记录的 Hook,可以实现撤销、重做等功能。

import { useHistoryTravel } from 'ahooks';function App() {const { value, setValue, back, forward, go } = useHistoryTravel();return (<div><inputvalue={value}onChange={e => setValue(e.target.value)}/><button onClick={back}>Back</button><button onClick={forward}>Forward</button><button onClick={() => go(2)}>Go to 2</button></div>);
}

在上述代码中,useHistoryTravel 返回一个包含 valuesetValuebackforwardgo 的对象。

33. useNetwork

useNetwork 是一个用于获取网络状态的 Hook。

import { useNetwork } from 'ahooks';function App() {const networkState = useNetwork();return (<div><span>Network type: {networkState.type}</span><span>Online: {String(networkState.online)}</span></div>);
}

在上述代码中,useNetwork 返回一个包含网络状态的对象,对象包括 type(网络类型)和 online(是否在线)。

34. useSelections

useSelections 是用于管理一组条目的选中状态的 Hook。

import { useSelections } from 'ahooks';function App() {const { selected, allSelected, isSelected, toggle, toggleAll, partiallySelected } = useSelections(['a', 'b', 'c'], ['a']);return (<div><div>Selected: {selected.join(', ')}</div><div>AllSelected: {String(allSelected)}</div><div>PartiallySelected: {String(partiallySelected)}</div><button onClick={() => toggle('b')}>Toggle b</button><button onClick={toggleAll}>Toggle All</button></div>);
}

在上述代码中,useSelections 接受一个所有条目的数组和一个初始选中条目的数组,返回一个包含 selectedallSelectedisSelectedtoggletoggleAllpartiallySelected 的对象。

35. useCountDown

useCountDown 是一个倒计时的 Hook。

import { useCountDown } from 'ahooks';function App() {const [targetDate, setTargetDate] = useState(Date.now() + 5000);const { days, hours, minutes, seconds, milliseconds, start, pause, resume, reset } = useCountDown(targetDate);return (<div><p>{`${days} days, ${hours} hours, ${minutes} minutes, ${seconds} seconds, ${milliseconds} milliseconds`}</p><button onClick={start}>Start</button><button onClick={pause}>Pause</button><button onClick={resume}>Resume</button><button onClick={() => reset(targetDate)}>Reset</button></div>);
}

在上述代码中,useCountDown 接受一个目标日期,返回一个包含 dayshoursminutessecondsmillisecondsstartpauseresumereset 的对象。

36. useTextSelection

useTextSelection 是一个用于获取用户选中文本信息的 Hook。

import { useTextSelection } from 'ahooks';function App() {const selectionInfo = useTextSelection();return (<div><p>Select some text from this page.</p><p>Selection: {selectionInfo.text}</p></div>);
}

在上述代码中,useTextSelection 不需要任何参数,返回一个包含选中文本信息的对象。

37. useWebSocket

useWebSocket 是一个用于 WebSocket 连接的 Hook。

import { useWebSocket } from 'ahooks';function App() {const {latestMessage,sendMessage,connect,disconnect,readyState,readyStateLabel,} = useWebSocket('wss://echo.websocket.org');return (<div><p>Latest message: {latestMessage?.data || 'None'}</p><button onClick={() => sendMessage({ msg: 'Hello' })}>Send Message</button><button onClick={connect}>Connect</button><button onClick={disconnect}>Disconnect</button><p>Ready state: {readyStateLabel}</p></div>);
}

在上述代码中,useWebSocket 接受一个 WebSocket URL,返回一个包含 latestMessagesendMessageconnectdisconnectreadyStatereadyStateLabel 的对象。

38. useUrlState

useUrlState 是一个用于管理 URL 状态的 Hook。

import { useUrlState } from 'ahooks';function App() {const [state, setState] = useUrlState({ name: 'ahooks' });return (<div><p>Name: {state.name}</p><button onClick={() => setState({ name: 'newName' })}>Set Name</button></div>);
}

在上述代码中,useUrlState 接受一个初始状态对象,返回一个类似 useState 的元组。

39. useCookieState

useCookieState 是一个用于管理 cookie 状态的 Hook。

import { useCookieState } from 'ahooks';function App() {const [value, setValue] = useCookieState('my-cookie');return (<div><p>Value: {value}</p><button onClick={() => setValue('newValue')}>Set Value</button></div>);
}

在上述代码中,useCookieState 接受一个 cookie 名称,返回一个类似 useState 的元组。

40. useMap

useMap 是一个用于管理 Map 状态的 Hook。

import { useMap } from 'ahooks';function App() {const [map, { set, setAll, remove, reset, has }] = useMap(new Map([['hello', 'world']]));return (<div><p>Value: {map.get('hello')}</p><button onClick={() => set('hello', 'newWorld')}>Set Value</button></div>);
}

在上述代码中,useMap 接受一个 Map,返回一个包含 Map 和一些操作方法的元组。

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

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

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

相关文章

如何正确地设置Outlook SMTP发送电子邮件(wordpress配置)

如何正确地设置Outlook SMTP发送电子邮件&#xff08;wordpress配置&#xff09; 作者&#xff1a;虚坏叔叔 博客&#xff1a;https://pay.xuhss.com 早餐店不会开到晚上&#xff0c;想吃的人早就来了&#xff01;&#x1f604; 正在寻找正确的Outlook SMTP设置&#xff1f…

LRU 算法

LRU 缓存淘汰算法就是一种常用策略。LRU 的全称是 Least Recently Used&#xff0c;也就是说我们认为最近使用过的数据应该是是「有用的」&#xff0c;很久都没用过的数据应该是无用的&#xff0c;内存满了就优先删那些很久没用过的数据。 力扣&#xff08;LeetCode&#xff09…

[Linux] C获取键盘输入值

检测指令&#xff1a;cat /dev/input/event1 | hexdump 当键盘有输入时&#xff0c;会有对应的一堆16进制输出。它其实对应着input_event结构体【24字节】。 struct input_event ​​​​​​​{struct timeval time;__u16 type;__u16 code;__s32 value; }; #include <st…

自动方向识别式 TXB型电平转换芯片

大家好,这里是大话硬件。 在上一篇文章分析了LSF型的电平转换芯片,LSF型电平转换芯片最常见是应用在I2C总线上。I2C为OD型总线,LSF使用时增加电阻。 对于不是OD型总线的电平转换,比如UART,SPI,普通GPIO口信号,这些信号在进行双向电平转换使用什么样的芯片呢? 从上面…

面试之快速学习STL-deuqe和list

1. deque deque 容器用数组&#xff08;数组名假设为 map&#xff09;存储着各个连续空间的首地址。也就是说&#xff0c;map 数组中存储的都是指针如果 map 数组满了怎么办&#xff1f;很简单&#xff0c;再申请一块更大的连续空间供 map 数组使用&#xff0c;将原有数据&…

每天一道leetcode:433. 最小基因变化(图论中等广度优先遍历)

今日份题目&#xff1a; 基因序列可以表示为一条由 8 个字符组成的字符串&#xff0c;其中每个字符都是 A、C、G 和 T 之一。 假设我们需要调查从基因序列 start 变为 end 所发生的基因变化。一次基因变化就意味着这个基因序列中的一个字符发生了变化。 例如&#xff0c;&quo…

Xcode build和version

参考 一个叫做Version&#xff0c;一个叫做Build&#xff0c;&#xff08;version是版本号&#xff0c;build是打正式包每次Archive时的都增加的值&#xff09;这两个值都可以在Xcode中选中target&#xff0c;点击“Summary”后看到。 Version在plist文件中的key是“CFBundleSh…

博弈论 | 斐波那契博弈

斐波那契博弈 博弈论是二人或多人在平等的对局中各自利用对方的策略变换自己的对抗策略,达到取胜目标的理论。博弈论是研究互动决策的理论。博弈可以分析自己与对手的利弊关系,从而确立自己在博弈中的优势,因此有不少博弈理论,可以帮助对弈者分析局势,从而采取相应策略,最终达…

计算机提示mfc120u.dll缺失(找不到)怎么解决

在计算机领域&#xff0c;mfc120u.dll是一个重要的动态链接库文件。它包含了Microsoft Foundation Class (MFC) 库的特定版本&#xff0c;用于支持Windows操作系统中的应用程序开发。修复mfc120u.dll可能涉及到解决与该库相关的问题或错误。这可能包括程序崩溃、运行时错误或其…

13.实现业务功能--板块信息

目录 获取在首页中显示的版块 1. 实现逻辑 2. 创建扩展 Mapper.xml 3. 修改 DAO 4. 创建 Service 接口 5. 实现 Service 接口 6. 生成测试方法 7. 实现 Controller 8. 实现前端页面 在数据库中执行以下 SQL 语句&#xff1a; INSERT INTO t_board (id, name, article…

PostgreSQL 查询数据表、视图信息

--获得指定schema范围内的所有表和视图的列表&#xff0c;可指定一个排除表前缀模式with param as (select public,iit as schema_name,db2g% as exclude_pattern),base_info as (--获得所有基表select pg_namespace.nspname as schema_name, a.relname as tbl_name ,TBL as tb…

浅析Linux SCSI子系统:调试方法

文章目录 SCSI日志调试功能scsi_logging_level调整SCSI日志等级 SCSI trace events使能SCSI trace events方式一&#xff1a;通过set_event接口方式二&#xff1a;通过enable 跟踪trace信息 相关参考 SCSI日志调试功能 SCSI子系统支持内核选项CONFIG_SCSI_LOGGING配置日志调试…

kafka晋升之路-理论+场景

kafka晋升之路 一&#xff1a;故事背景二&#xff1a;核心概念2.1 系统架构2.2 生产者&#xff08;Producer&#xff09;2.2.1 生产者分区2.2.2 生产者分区策略 2.3 经纪人&#xff08;Broker&#xff09;2.3.1 主题&#xff08;Topic&#xff09;2.3.2 分区&#xff08;Partit…

vue数据修改失效

问题 vue2中如果修改深层的数据的值时&#xff0c;页面不显示最新数据。 解决办法&#xff1a; 强制刷新。 #更改数据后&#xff0c;调用vue强制刷新 this.$forceUpdate();

WPS-RCE

版本&#xff1a; WPS Office 2023 个人版 < 11.1.0.12313 WPS Office 2019 企业版 < 11.8.2.12085 原理&#xff1a; Office 中的 WebExtension&#xff08;通常称为 Office 插件或 Office 应用程序&#xff09;是一种用于扩展 Microsoft Office 功能的技术。Office …

回归预测 | MATLAB实现CSO-SVM布谷鸟优化算法优化支持向量机多输入单输出回归预测(多指标,多图)

回归预测 | MATLAB实现CSO-SVM布谷鸟优化算法优化支持向量机多输入单输出回归预测&#xff08;多指标&#xff0c;多图&#xff09; 目录 回归预测 | MATLAB实现CSO-SVM布谷鸟优化算法优化支持向量机多输入单输出回归预测&#xff08;多指标&#xff0c;多图&#xff09;效果一…

Python最重要的数据结构是列表(list)的使用方法

列表是一种有序的集合&#xff0c;可以包含任意类型的元素&#xff0c;包括数字、字符串、布尔值、元组等。列表使用方括号[]来表示&#xff0c;元素之间用逗号,分隔。 以下是一些使用列表的例子&#xff1a; 1. 创建一个空列表&#xff1a; my_list []2. 创建一个包含元素的…

FPGA应用学习笔记-----布线布局优化

优化约束&#xff1a; 设置到最坏情况下会过多 布局和布线之间的关系&#xff1a; 最重要的是与处理器努力的&#xff0c;挂钩允许设计者调整处理器努力的程度 逻辑复制&#xff1a; 不能放置多个负载&#xff0c;只使用在关键路径钟 减少布线延时&#xff0c;但会增加面积&a…

【面试总结】八股①

目录 数据库缓存穿透是什么常见的sql调优方法有哪些使用表的别名为什么能优化查询性能MySQL事务特性是哪些事务隔离级别有哪些 Java基础StringBuffer和StringBuilder的区别String直接引号新建和new String新建的区别Java中继承和实现的各种关系HashTable和HashMap区别 消息队列…

Redis事务

自带的Multi事务 垃圾 由MULTI, EXEC, DISCARD and WATCH这四个命令配合完成的。 MULTI 即开启事务 然后一条一条的写业务代码 都会塞进Redis队列里面 EXEC 结束并开始按队列顺序执行事务 DISCARD 就是在EXEC取消事务 WATCH watch用来提前来观察数据&#xff0c;具体…