🔍 概览

为了应对各种复杂多样的业务场景,本库提供了大量高质量、高效率的 React Hooks 来帮助你更快地构建应用,涵盖了从基础的 副作用处理数据请求状态管理UI 状态实用工具 到偏业务的 浏览器 API常见场景高频业务逻辑 等各个方面。

无需慌张,并非所有的 Hooks 都需要掌握。

接下来,本文将引导你快速了解本库的主要内容,让你对整体有一个大致的了解。这样你在实际开发场景中就能快速回忆起这里也许有相应 Hooks 可以解决问题,然后再来翻阅具体的使用文档即可。

🔖 按类型分类

本库按照类型组织了各种 Hooks,分为以下九个部分,首页的导航也是按照这个分类来的:

  • Lifecycle:与 React 的生命周期相关,比如 useMountuseUnmountuseUpdateEffect 等。
  • State:与状态管理相关,比如 useSafeStateuseRafStateuseSetState 等衍生状态。
  • Element:与 DOM 元素相关,比如 useElementSizeuseFocususeScrolluseDropZone 等。
  • Browser:与浏览器 API 相关,比如 useClipboarduseFullscreenuseBatteryuseBluetoothuseEyeDropperuseResizeObserver 等。
  • Sensors:与传感器相关,比如 useKeyPressuseGeolocationuseFpsuseMouseuseUserIdle 等。
  • Animation:不做动画,但与定时器、动画相关,比如 useIntervalFnuseTimeoutFnuseRafFn 等。
  • Network:与网络相关,目前比较少,只有 useOnlineuseNetwork
  • Utilities:一些实用工具,比如 useAsyncFnuseCountdownuseDateFormatuseDebouncedFnuseRetryFnuseTimeAgouseEventBus 等。
  • ProUtilities:强业务场景,比如 useQueryuseDynamicListusePaginationuseVirtualList 等。

🍱 按功能分类

本库按照功能和应用场景组织了各种 Hooks,大致分为以下几个部分:

  • 基础 Hooks:包括处理副作用状态管理等基本需求的 Hooks,是每个 React 开发者都应该熟练掌握的工具,如 useMountuseUnmountuseUpdateEffectuseSafeState 等。
  • 数据处理与请求:提供了从简单的数据请求,到复杂的数据处理逻辑的 Hooks,支持轮询刷新、自动请求、缓存等高级特性,让异步操作数据管理变得更简单,如 useAsyncFnuseQuery 等。
  • UI 状态管理:针对 UI 状态(如加载中错误处理)提供了丰富的 Hooks 帮助管理组件状态,提升用户体验,如 useAsyncFnuseHoveruseFocususeRetryFn 等。
  • 浏览器 API:提供对浏览器 API 的封装,让你更方便地使用浏览器提供的功能,同时支持检测浏览器支持情况,并尽可能降级处理,如 useClipboarduseFullscreenuseBatteryuseBluetoothuseEyeDropperuseResizeObserver 等。
  • 实用工具:提供了一系列实用工具 Hooks,帮助你更方便地处理数据、事件等,如 useEventListeneruseNowuseDateFormatuseTimeAgouseCountdownuseAsyncLockuseEventBus 等。
  • 业务逻辑相关:涵盖一系列特定业务场景(如动态列表虚拟列表分页状态)的 Hooks 帮助快速实现复杂业务逻辑,如 useVirtualListuseDynamicListusePagination 等。
  • 常见场景解决方案:提供解决高频问题的 Hooks 集合,无论性能优化频率限制还是其他常见问题,都有解决方案,如 useSafeState, useRafStateuseDebouncedFnuseThrottledFn 等。