React hooks acc

史昱
2023-12-01

〇、引

我们通常使用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动画 



二、开源社区库

三、参考

 类似资料:

相关阅读

相关文章

相关问答