〇、引

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

 

一、零散hook

name

github

keyword

reference
use-immer https:///immerjs/use-immer 替代usestate、性能优化 《不可变数据结构》
immer
useOnlineStatus https:///ChinaLiuRixing/react-hookedup/blob/master/src/hooks/useOnlineStatus.ts 是否断网 navigator.online
usePrevious https:///ChinaLiuRixing/react-hookedup/blob/master/src/hooks/usePrevious.ts 保存上次状态  
useFocus https:///ChinaLiuRixing/react-hookedup/blob/master/src/hooks/useFocus.ts focus  
useAsync https:///ChinaLiuRixing/react-hooks-lib/blob/master/src/hooks/useAsync.js 异步、async https://beizhedenglong.github.io/react-hooks-lib/?path=/story/async-useasync--demo
useField https:///ChinaLiuRixing/react-hooks-lib/blob/master/src/hooks/useField.js 受控 https://beizhedenglong.github.io/react-hooks-lib/?path=/story/data-entry-usefield--demo
useEqualEffect https:///ChinaLiuRixing/react-hooks-lib/blob/master/src/hooks/useEqualEffect.js useEffecf深比较  
useActive https:///ChinaLiuRixing/react-hooks-lib/blob/master/src/hooks/useActive.js 鼠标移入移出  
useTouch https:///ChinaLiuRixing/react-hooks-lib/blob/master/src/hooks/useTouch.js touch事件  
useStateCallBack https:///ChinaLiuRixing/react-hooks-lib/blob/master/src/hooks/useStateCallback.js setstate回调  
useDidUpdate https:///ChinaLiuRixing/react-hooks-lib/blob/master/src/hooks/useDidUpdate.js 更新结束  
useUndo https:///ChinaLiuRixing/react-hooks-lib/blob/master/src/hooks/useUndo.js 撤销、反撤销  
useCookie.js https:///ChinaLiuRixing/react-recipes/blob/master/src/useCookie.js cookie  
useCopyClipboard https:///ChinaLiuRixing/react-recipes/blob/master/src/useCopyClipboard.js 复制到剪切板  
useDarkMode https:///ChinaLiuRixing/react-recipes/blob/master/src/useDarkMode.js 夜间模式  
useDimensions https:///ChinaLiuRixing/react-recipes/blob/master/src/useDimensions.js 尺寸  
useSize https://ahooks.js.org/zh-CN/hooks/dom/use-size 尺寸  
useEventListener https:///ChinaLiuRixing/react-recipes/blob/master/src/useEventListener.js 事件监听  
useFullScreen https:///ChinaLiuRixing/react-recipes/blob/master/src/useFullScreen.js 全屏  
useGeolocation https:///ChinaLiuRixing/react-recipes/blob/master/src/useGeolocation.js 地理位置 https://developer.mozilla.org/zh-CN/docs/Web/API/Navigator/geolocation
useIsClient https:///ChinaLiuRixing/react-recipes/blob/master/src/useIsClient.js 检查javascript是否从web客户端加载  
useKeyPress https:///ChinaLiuRixing/react-recipes/blob/master/src/useKeyPress.js 键盘、按键  
useKeyPress https://ahooks.js.org/zh-CN/hooks/dom/use-key-press 键盘、按键  
useLocalStorage https:///ChinaLiuRixing/react-recipes/blob/master/src/useLocalStorage.js localstorage  
useLockBodyScroll https:///ChinaLiuRixing/react-recipes/blob/master/src/useLockBodyScroll.js body滚动  
useMultiKeyPress https:///ChinaLiuRixing/react-recipes/blob/master/src/useMultiKeyPress.js 组合按键  
useNotification(不可用，但是notification值得看看) https:///ChinaLiuRixing/react-recipes/blob/master/src/useNotification.js 通知 https://developer.mozilla.org/zh-CN/docs/Web/API/notification
useOnClickOutside https:///ChinaLiuRixing/react-recipes/blob/master/src/useOnClickOutside.js 点击外部  
useSpeechRecognition https:///ChinaLiuRixing/react-recipes/blob/master/src/useSpeechRecognition.js 语音识别 https://developer.mozilla.org/en-US/docs/Web/API/SpeechRecognition
useWorker https:///ChinaLiuRixing/react-recipes/blob/master/src/useWorker.js service worker  
useWindowSize https:///ChinaLiuRixing/react-recipes/blob/master/src/useWindowSize.js 宽高  
useWindowScroll https:///ChinaLiuRixing/react-recipes/blob/master/src/useWindowScroll.js 滚动  
useWhyDidYouUpdate https:///ChinaLiuRixing/react-recipes/blob/master/src/useWhyDidYouUpdate.js 组件更新的原因  
useSpeechSynthesis https:///ChinaLiuRixing/react-recipes/blob/master/src/useSpeechSynthesis.js 语音合成 https://developer.mozilla.org/en-US/docs/Web/API/Window/speechSynthesis
useSpeechRecognition https:///ChinaLiuRixing/react-recipes/blob/master/src/useSpeechRecognition.js 语音 https://developer.mozilla.org/en-US/docs/Web/API/SpeechRecognition
useBattery https:///ChinaLiuRixing/react-use/blob/master/src/useBattery.ts 电池  
useHash https:///ChinaLiuRixing/react-use/blob/master/src/useHash.ts 路由  
useIdle https:///ChinaLiuRixing/react-use/blob/master/docs/ 检测60s用户无操作  
useSearchParam https:///ChinaLiuRixing/react-use/blob/master/src/useSearchParam.ts url参数 https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams
useLongPress https:///ChinaLiuRixing/react-use/blob/master/src/useLongPress.ts 键盘、按键、长按  
useMediaDecices https:///ChinaLiuRixing/react-use/blob/master/src/useMediaDevices.ts 设备信息 https://developer.mozilla.org/en-US/docs/Web/API/Navigator/mediaDevices
useMotion https:///ChinaLiuRixing/react-use/blob/master/src/useMotion.ts 设备当时的加速度（移动端） https://developer.mozilla.org/en-US/docs/Web/API/Window/devicemotion_event
useMouse

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


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

 

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

 鼠标  
useNetwork https:///ChinaLiuRixing/react-use/blob/master/src/useNetwork.ts 网络状态  
useOrientation https:///ChinaLiuRixing/react-use/blob/master/src/useOrientation.ts 屏幕方向  
usePageLeave https:///ChinaLiuRixing/react-use/blob/master/src/usePageLeave.ts 鼠标离开页面  
useStartTyping https:///ChinaLiuRixing/react-use/blob/master/src/useStartTyping.ts 用户开始输入  
useMeasure https:///ChinaLiuRixing/react-use/blob/master/src/useMeasure.ts 尺寸  
useScrollbarWidth https:///ChinaLiuRixing/react-use/blob/master/src/useScrollbarWidth.ts 滚动条宽度  
useAudio https:///ChinaLiuRixing/react-use/blob/master/src/useAudio.ts audio  
useDrop https:///ChinaLiuRixing/react-use/blob/master/src/useDrop.ts 拖动、放置  
useVibrate https:///ChinaLiuRixing/react-use/blob/master/src/useVibrate.ts 震动 https://developer.mozilla.org/en-US/docs/Web/API/Vibration_API
useSlider https:///ChinaLiuRixing/react-use/blob/master/src/useSlider.ts 轮播  
useVideo https:///ChinaLiuRixing/react-use/blob/master/src/useVideo.ts video  
useUpdate https:///ChinaLiuRixing/react-use/blob/master/src/useUpdate.ts 触发组件render  
useTween https:///ChinaLiuRixing/react-use/blob/master/src/useTween.ts 补间动画 https://www.npmjs.com/package/ts-easing
useRafLoop https:///ChinaLiuRixing/react-use/blob/master/src/useRafLoop.ts 管理raf  
useSessionStorage https:///ChinaLiuRixing/react-use/blob/master/src/useSessionStorage.ts sessionstorage  
useFavicon https:///ChinaLiuRixing/react-use/blob/master/src/useFavicon.ts favicon  
useLogger https:///ChinaLiuRixing/react-use/blob/master/src/useLogger.ts 打印生命周期  
useRendersCount https:///ChinaLiuRixing/react-use/blob/master/src/useRendersCount.ts 监听render次数、性能优化  
useDoubleClick https:///zattoo/use-double-click 双击  
useDeepCompare https:///sandiiarov/use-deep-compare 深比较 https://www.npmjs.com/package/dequal
react-communication https:///AvraamMavridis/react-window-communication-hook 页面通信  
lazyloadImg react-use-lazy-load-image 图片懒加载  
infiniteLoader https:///CurationCorp/react-use-infinite-loader 无线滚动  
useIndexdb https:///kigiri/react-use-idb indexdb https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API
metatag react-metatags-hook meta  
immerhooks react-immer-hooks 不可变数据结构  
hooksworker https:///dai-shi/react-hooks-worker servers worker  
imgSize react-hooks-image-size img url to size  
statusHooks https:///yeskunall/react-dom-status-hook 性能监控、性能优化  
clickOutside react-cool-onclickoutside 点击到外部  
webAnimation https:///wellyshen/use-web-animations 动画  


二、开源社区库
  • ahooks 
  • Captain hook 
  • crooks
  • hooks-by-example
  • Hooks.guide 
  • react-recipes 
  • Searchable Collection of React Hooks
  • Sunflower(?) 
  • useHooks(?) 
  • Use Hooks 
  • beautiful-react-hooks(?)
三、参考
  •  ChinaLiuRixing/react-hookedup  
  •  ChinaLiuRixing/react-hooks-lib  
  •  ChinaLiuRixing/react-pirate  
  •  ChinaLiuRixing/react-recipes 
  •  ChinaLiuRixing/react-use  
  •  ChinaLiuRixing/awesome-react-hooks