React hooks acc

最新推荐文章于 2022-03-07 10:56:07 发布
最新推荐文章于 2022-03-07 10:56:07 发布
阅读量343 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_33807889/article/details/113939442
版权

〇、引

我们通常使用ahooks作为reacthooks库，它为我们的开发提供方便的同时，也引起了我们的思考，开源社区还有哪些还不错的reactHooks库呢？
本文是从github中找到的各类hooks的整理，希望为我们开发、学习提供帮助。

 

一、零散hook

name

github

keyword

reference

use-immerhttps://github.com/immerjs/use-immer替代usestate、性能优化《不可变数据结构》
immer
useOnlineStatushttps://github.com/ChinaLiuRixing/react-hookedup/blob/master/src/hooks/useOnlineStatus.ts是否断网navigator.online
usePrevioushttps://github.com/ChinaLiuRixing/react-hookedup/blob/master/src/hooks/usePrevious.ts保存上次状态 
useFocushttps://github.com/ChinaLiuRixing/react-hookedup/blob/master/src/hooks/useFocus.tsfocus 
useAsynchttps://github.com/ChinaLiuRixing/react-hooks-lib/blob/master/src/hooks/useAsync.js异步、asynchttps://beizhedenglong.github.io/react-hooks-lib/?path=/story/async-useasync--demo
useFieldhttps://github.com/ChinaLiuRixing/react-hooks-lib/blob/master/src/hooks/useField.js受控https://beizhedenglong.github.io/react-hooks-lib/?path=/story/data-entry-usefield--demo
useEqualEffecthttps://github.com/ChinaLiuRixing/react-hooks-lib/blob/master/src/hooks/useEqualEffect.jsuseEffecf深比较 
useActivehttps://github.com/ChinaLiuRixing/react-hooks-lib/blob/master/src/hooks/useActive.js鼠标移入移出 
useTouchhttps://github.com/ChinaLiuRixing/react-hooks-lib/blob/master/src/hooks/useTouch.jstouch事件 
useStateCallBackhttps://github.com/ChinaLiuRixing/react-hooks-lib/blob/master/src/hooks/useStateCallback.jssetstate回调 
useDidUpdatehttps://github.com/ChinaLiuRixing/react-hooks-lib/blob/master/src/hooks/useDidUpdate.js更新结束 
useUndohttps://github.com/ChinaLiuRixing/react-hooks-lib/blob/master/src/hooks/useUndo.js撤销、反撤销 
useCookie.jshttps://github.com/ChinaLiuRixing/react-recipes/blob/master/src/useCookie.jscookie 
useCopyClipboardhttps://github.com/ChinaLiuRixing/react-recipes/blob/master/src/useCopyClipboard.js复制到剪切板 
useDarkModehttps://github.com/ChinaLiuRixing/react-recipes/blob/master/src/useDarkMode.js夜间模式 
useDimensionshttps://github.com/ChinaLiuRixing/react-recipes/blob/master/src/useDimensions.js尺寸 
useSizehttps://ahooks.js.org/zh-CN/hooks/dom/use-size尺寸 
useEventListenerhttps://github.com/ChinaLiuRixing/react-recipes/blob/master/src/useEventListener.js事件监听 
useFullScreenhttps://github.com/ChinaLiuRixing/react-recipes/blob/master/src/useFullScreen.js全屏 
useGeolocationhttps://github.com/ChinaLiuRixing/react-recipes/blob/master/src/useGeolocation.js地理位置https://developer.mozilla.org/zh-CN/docs/Web/API/Navigator/geolocation
useIsClienthttps://github.com/ChinaLiuRixing/react-recipes/blob/master/src/useIsClient.js检查javascript是否从web客户端加载 
useKeyPresshttps://github.com/ChinaLiuRixing/react-recipes/blob/master/src/useKeyPress.js键盘、按键 
useKeyPresshttps://ahooks.js.org/zh-CN/hooks/dom/use-key-press键盘、按键 
useLocalStoragehttps://github.com/ChinaLiuRixing/react-recipes/blob/master/src/useLocalStorage.jslocalstorage 
useLockBodyScrollhttps://github.com/ChinaLiuRixing/react-recipes/blob/master/src/useLockBodyScroll.jsbody滚动 
useMultiKeyPresshttps://github.com/ChinaLiuRixing/react-recipes/blob/master/src/useMultiKeyPress.js组合按键 
useNotification(不可用，但是notification值得看看)https://github.com/ChinaLiuRixing/react-recipes/blob/master/src/useNotification.js通知https://developer.mozilla.org/zh-CN/docs/Web/API/notification
useOnClickOutsidehttps://github.com/ChinaLiuRixing/react-recipes/blob/master/src/useOnClickOutside.js点击外部 
useSpeechRecognitionhttps://github.com/ChinaLiuRixing/react-recipes/blob/master/src/useSpeechRecognition.js语音识别https://developer.mozilla.org/en-US/docs/Web/API/SpeechRecognition
useWorkerhttps://github.com/ChinaLiuRixing/react-recipes/blob/master/src/useWorker.jsservice worker 
useWindowSizehttps://github.com/ChinaLiuRixing/react-recipes/blob/master/src/useWindowSize.js宽高 
useWindowScrollhttps://github.com/ChinaLiuRixing/react-recipes/blob/master/src/useWindowScroll.js滚动 
useWhyDidYouUpdatehttps://github.com/ChinaLiuRixing/react-recipes/blob/master/src/useWhyDidYouUpdate.js组件更新的原因 
useSpeechSynthesishttps://github.com/ChinaLiuRixing/react-recipes/blob/master/src/useSpeechSynthesis.js语音合成https://developer.mozilla.org/en-US/docs/Web/API/Window/speechSynthesis
useSpeechRecognitionhttps://github.com/ChinaLiuRixing/react-recipes/blob/master/src/useSpeechRecognition.js语音https://developer.mozilla.org/en-US/docs/Web/API/SpeechRecognition
useBatteryhttps://github.com/ChinaLiuRixing/react-use/blob/master/src/useBattery.ts电池 
useHashhttps://github.com/ChinaLiuRixing/react-use/blob/master/src/useHash.ts路由 
useIdlehttps://github.com/ChinaLiuRixing/react-use/blob/master/docs/useIdle.md检测60s用户无操作 
useSearchParamhttps://github.com/ChinaLiuRixing/react-use/blob/master/src/useSearchParam.tsurl参数https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams
useLongPresshttps://github.com/ChinaLiuRixing/react-use/blob/master/src/useLongPress.ts键盘、按键、长按 
useMediaDeciceshttps://github.com/ChinaLiuRixing/react-use/blob/master/src/useMediaDevices.ts设备信息https://developer.mozilla.org/en-US/docs/Web/API/Navigator/mediaDevices
useMotionhttps://github.com/ChinaLiuRixing/react-use/blob/master/src/useMotion.ts设备当时的加速度（移动端）https://developer.mozilla.org/en-US/docs/Web/API/Window/devicemotion_event
useMouse

https://github.com/ChinaLiuRixing/react-use/blob/master/src/useMouse.ts


https://github.com/ChinaLiuRixing/react-use/blob/master/src/useMouseHovered.ts

 

https://github.com/ChinaLiuRixing/react-use/blob/master/src/useMouseWheel.ts

鼠标 
useNetworkhttps://github.com/ChinaLiuRixing/react-use/blob/master/src/useNetwork.ts网络状态 
useOrientationhttps://github.com/ChinaLiuRixing/react-use/blob/master/src/useOrientation.ts屏幕方向 
usePageLeavehttps://github.com/ChinaLiuRixing/react-use/blob/master/src/usePageLeave.ts鼠标离开页面 
useStartTypinghttps://github.com/ChinaLiuRixing/react-use/blob/master/src/useStartTyping.ts用户开始输入 
useMeasurehttps://github.com/ChinaLiuRixing/react-use/blob/master/src/useMeasure.ts尺寸 
useScrollbarWidthhttps://github.com/ChinaLiuRixing/react-use/blob/master/src/useScrollbarWidth.ts滚动条宽度 
useAudiohttps://github.com/ChinaLiuRixing/react-use/blob/master/src/useAudio.tsaudio 
useDrophttps://github.com/ChinaLiuRixing/react-use/blob/master/src/useDrop.ts拖动、放置 
useVibratehttps://github.com/ChinaLiuRixing/react-use/blob/master/src/useVibrate.ts震动https://developer.mozilla.org/en-US/docs/Web/API/Vibration_API
useSliderhttps://github.com/ChinaLiuRixing/react-use/blob/master/src/useSlider.ts轮播 
useVideohttps://github.com/ChinaLiuRixing/react-use/blob/master/src/useVideo.tsvideo 
useUpdatehttps://github.com/ChinaLiuRixing/react-use/blob/master/src/useUpdate.ts触发组件render 
useTweenhttps://github.com/ChinaLiuRixing/react-use/blob/master/src/useTween.ts补间动画https://www.npmjs.com/package/ts-easing
useRafLoophttps://github.com/ChinaLiuRixing/react-use/blob/master/src/useRafLoop.ts管理raf 
useSessionStoragehttps://github.com/ChinaLiuRixing/react-use/blob/master/src/useSessionStorage.tssessionstorage 
useFaviconhttps://github.com/ChinaLiuRixing/react-use/blob/master/src/useFavicon.tsfavicon 
useLoggerhttps://github.com/ChinaLiuRixing/react-use/blob/master/src/useLogger.ts打印生命周期 
useRendersCounthttps://github.com/ChinaLiuRixing/react-use/blob/master/src/useRendersCount.ts监听render次数、性能优化 
useDoubleClickhttps://github.com/zattoo/use-double-click双击 
useDeepComparehttps://github.com/sandiiarov/use-deep-compare深比较https://www.npmjs.com/package/dequal
react-communicationhttps://github.com/AvraamMavridis/react-window-communication-hook页面通信 
lazyloadImgreact-use-lazy-load-image图片懒加载 
infiniteLoaderhttps://github.com/CurationCorp/react-use-infinite-loader无线滚动 
useIndexdbhttps://github.com/kigiri/react-use-idbindexdbhttps://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API
metatagreact-metatags-hookmeta 
immerhooksreact-immer-hooks不可变数据结构 
hooksworkerhttps://github.com/dai-shi/react-hooks-workerservers worker 
imgSizereact-hooks-image-sizeimg url to size 
statusHookshttps://github.com/yeskunall/react-dom-status-hook性能监控、性能优化 
clickOutsidereact-cool-onclickoutside点击到外部 
webAnimationhttps://github.com/wellyshen/use-web-animations动画 



二、开源社区库

三、参考

良纵
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
useDexie:React Hooks轻松使用Dexie.js IndexDB库
05-07
React Hooks使用Dexie.js IndexDB库 Dexie.js是一个华丽的库，可通过简单而强大的语法使用IndexDB 。 但是，如果要在React项目中使用Dexie.js，则需要实现一系列允许异步交互的逻辑。 为此，useDexie是一个包含一系列React Hooks的库，使您可以轻松地将IndexDB用作React应用程序的数据源。 在许多情况下， useDexie允许您完全替换状态库（例如Redux），同时确保更高的执行速度（可以预加载数据）和持久性。 use-dexie挂钩已经过优化，以确保： :fire: 实时刷新依赖于数据源的React元素 :recycling_symbol: 将刷新次数降至最低 :high_voltage: 最高速度和最小内存占用 :flashlight: 动态查询组合 Performance性能和统计实时监控 内容索引 查询表示例 带有选择器回调的示例访存表 useDexieGetTable 参量 回叫示例
ahooks.js：一款强大的React Hooks库及其API使用教程（一）
最新发布
weixin_42662753的博客
08-16 4648
ahooks是一款由阿里巴巴开发团队设计的React Hooks库，提供了一系列实用的React Hooks，以便开发者更好地使用React的功能。ahooks的设计原则是“最小API，最大自由”，旨在提供最小的、最易于理解和使用的API，同时保留最大的使用自由度。useRequest是ahooks中最常用的一个API，它用于处理异步请求和其相关状态。在上述代码中，useRequest接收一个函数作为参数，该函数返回一个Promise。
非常实用的ahooks，动态表单、防抖、节流等等
dongakng的博客
09-23 2639
非常实用的ahooks，动态表单、防抖、节流等等
使用ahooks的useFullscreen全屏后select下拉框丢失的问题
qq_37185155的博客
11-17 771
项目场景： 项目中使用ahooks的useFullscreen全屏化的时候碰到bug, 整了一天,终于定位到原因是使用了Antd中的Select造成的,甚至一度想使用原生select标签,然而因为麻烦以及懒得大规模重写代码被劝退了 - - 解决方案： 具体解决方案是Select里面有一个getPopupContaine 只要在Select标签上添加getPopupContainer={triggerNode => triggerNode.parentNode}即可解决该问题, 应该是Select下
ahook中常用的一些hooks
ToShy的博客
03-07 6503
ahooks中一些常用的hooks
React Redux 绑定与 React Hooks 和代理
06-08
有几个与此 repo 相关的项目。 这是它们的索引。 react-react-redux v5-alpha (this repo)：它有一个实验性的 react...react-react-redux 使用 React Hooks 和 Proxy 绑定 React Redux 如果您正在寻找非 Redux 库，请访
react hooks ppt
10-08
react hooks
React Hooks 使用一次调用的函数侦听鼠标按下或抬起并单击事件
06-08
使用-mouse-action React Hooks 使用一次调用的函数来侦听鼠标按下或抬起以及单击事件。 示例 此钩子可用于创建快速可用的下拉按钮。 安装 npm install use-mouse-action Usage import useMouseAction from 'use-...
Firebase 的 React Hooks。
06-08
React Firebase Hooks 一组可重用的 Firebase React Hooks。 在 v0.59.0 中，对 Hooks 的官方支持已添加到 React Native。 React Firebase Hooks 适用于 Firebase JS SDK 和 React Native Firebase，尽管某些 Flow ...
React Hooks with Immer 中的简单不变性。
06-08
React Immer Hooks 在带有 Immer 的 React Hooks 中轻松实现不变性。注意：React Hooks 目前是一个 RFC 提案，可能会发生变化。您至少需要 [email protected] 才能使用此功能。安装 yarn add react-immer-hooks 用法...
usehooks：易于理解的React Hook代码配方
02-05
这是 （一个由支持的博客）的资料库，该博客发布了易于理解的React Hook代码配方。 如果您想提交新的帖子想法，改进现有的帖子或更改有关网站的任何内容，请随时提交问题或提出要求。 请考虑通过我的赞助这个项目。 任何级别的支持，我们感激不尽。 我的等级更高一些，包括将您的公司列在usehooks网站和新闻通讯中。 要在本地运行，先执行yarn ，然后执行yarn dev ，然后打开 。 职位索引 -公共领域
use-long-press:React钩子，用于检测单击（或点击）并按住事件
05-27
React长按挂钩 :backhand_index_pointing_down: React钩子，用于检测单击（或点击）并按住事件。 易于使用 高度可定制的选项 经过全面测试 安装 yarn add use-long-press 或者 npm install --save use-long-press 基本用法 import React from 'react' ; import { useLongPress } from 'use-long-press' ; const Example = ( ) => { const bind = useLongPress ( ( ) => { console . log ( 'Long pressed!' ) ; } ) ; return < button { ... bind } > Press me < / button > ; } ; 现场例子 进阶用法
基于indexDB的Dexie数据库
一条宝鱼的专栏
04-21 799
https://blog.csdn.net/qq_36587420/article/details/105058830?depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromBaidu-4&utm_source=distribute.pc_relevant.none-task-blog-BlogCom...
阿里 ahooks介绍（一）: ahooks简介
热门推荐
热水钟博客
01-22 1万+
一、ahooks比umi hooks功能强大，所以不研究umi hooks，直接研究ahooks // 安装依赖： npm i ahooks --save 或者tyan add ahooks // 使用hooks import { useRequest} from 'ahooks'; 二、ahooks api开发规范 API 规范 这是 ahooks 的 API 规范文档。 返回值 1. 无输出 允许 Hooks 无输出，一般常见于生命周期类 Ho...
react 监听键盘事件 hook
小鑫の随笔
11-23 3221
import { useCallback, useEffect, MutableRefObject } from "react"; type keyType = KeyboardEvent["keyCode"] | KeyboardEvent["key"]; type keyFilter = keyType | Array<keyType>; type EventHandler = (event: KeyboardEvent) => void; type keyEvent = "keyd
useHooks~小窍门
大灰狼的小绵羊哥哥的博客
06-20 4798
前言 类似Hook的小宝藏，每个方法都有特定的用处，实例代码有点多。今日早读文章由腾讯@林林小辉翻译分享。 正文从这开始～～ Hooks是React 16.8新增的一项特性，可以让你在不使用class的情况下去使用state和React的其他功能。这篇文章提供了简单易懂的案例，帮助你去了解hooks如何使用，并且鼓励你在接下来的项目中去使用它。但是在此之前，请确保你已经看了hook的官方文档......
react 数组_使用 React 把数组数据渲染为列表、表格
weixin_39940688的博客
12-20 1524
这里学习第一节，Array，即把数组数据渲染为列表、表格。DataList渲染为列表通过数组渲染元素列表。使用 isOrderedprop 的值有条件地渲染 或 列表。使用 Array.prototype.map将 data中的每个项目渲染为 元素，给它一个由其索引和值的串联产生的 key。默认情况下，省略 isOrd...
130+Hooks,解锁react hooks使用 的正确姿势
qq_39398332的博客
10-17 3382
为什么会有 Hook 介绍Hooks之前，首先要给大家说一下React的组件创建方式，一种是类组件，一种是纯函数组件，并且React团队希望，组件不要变成复杂的容器，最好只是数据流的管道。开发者根据需要，组合管道即可。也就是说组件的最佳写法应该是函数，而不是类。。 但是我们知道，在以往开发中类组件和纯函数组件的区别是很大的，纯函数组件有着类组件不具备的多种特点，简单列举几条 纯函数组件没有状态 纯函数组件没有生命周期 纯函数组件没有this 只能是纯函数 这就注定，我们所推崇的函数组件，只能做UI展
超方便的 IndexDB 库
weixin_34168700的博客
06-20 1576
前言 做为 Web 浏览器层的本地存储，IndexDB 做为一个很好的选择，几乎可以存储任意类型的数据，且是异步的。但是正常使用方式下需要在监听各种事件来处理结果，不是很方便，下面就对这一层进行了包装，使用方便。 IndexDBWrapper 库 IndexDBWrapper 库是参考 workbox 相关 DB 操作开发的，下面具体说明下使用。 包地址：www.npmjs.com/packag...
react hooks
05-19
React Hooks 是 React 16.8 新增的功能，它可以让你在不编写 class 组件的情况下，使用 state 和其他 React 特性。React Hooks 是一些特殊的函数，它们可以让你在函数组件中“钩入” React 的状态和生命周期等特性。...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值