数据处理

  1. *对象数据处理, useSetState: 常用于由多个相同或相似属性组成的对象维护方式, 参考 我应该使用多个或单个变量维护 state(虽然官方推荐切分多个state 维护)
    1. ahooks
    2. react-use
  2. *获取历史数据
    1. usePrevious: 常用于进行对比上次和这次state 变化的值，做处理 参考如何获取上次的state 值, react-use / ahooks
    2. useLatest: 最新数据 参考 FAQ react-use / ahooks
    3. 扩展对象 usePreviouseEqualCurrent
  3. *数组
    1. useDynamicList: 动态添加/删除/编辑等操作的列表 ahooks
    2. useList: 类似队列操作的数组
    3. useStateList: 包含类似上一步 下一步的迭代器形式数组
  4. *Set 数据结构处理, 参考如何在 React setState 中使用 ES6 Set 以下两种处理方式不通
    1. react-use：利用转换为数组进行添加 / 过滤等方式实现 add remove， 最终返回新的 set 结构
    2. ahooks: 直接外层增加 set 包裹结构的内置方式实现， 最后返回新的 set 结构
  5. *Map 结构处理, 参考如何在 state 中使用 Map
    1. react-use
    2. ahooks

其他的一些常用数据结构也可适当封装, 如队列， 栈 列表， 树

  • useQueue
  • useStack
  • useTree

事件处理

通用事件

  1. *底层通用添加监听事件的方式, 比如 useEvent / useEventListener 等可作为底层， 上层可以扩展 useHover / useMouse 等鼠标移动事件 以及一些如 hashchange / storagechange 事件的处理
    1. useEventListener: 通过这种方式可自定义任何事件的监听处理方式，作为事件底层处理方式，比如后续的 useMouse 等
    • 针对通过 event 触发设置的值， 如 Input Switch Radio 等
    1. ahooks: useEventValue
    2. 360-hooks: useChange: 可参考

      浏览器

  3. *useDocumentVisibility: 常用于一些轮询业务处理上，切换浏览器 Tab 需要停止轮询，

    1. 缺点：数据中途或缺失,比如日志
    2. 优点: 多个轮询并行时减少不必要的请求， 如仅维护任务状态时切换浏览器 Tab 不必要
  4. 滚动条宽度获取
    1. react-use/useScrollBarWidth

其他一些如滚轮 / 鼠标(右键) 事件

节点/窗口

  1. *滚动事件(scroll)监听
    1. ahooks/useScroll
    2. react-use/useScroll: 其他 滚动状态(useScrolling)
  2. useHover: 用于监听鼠标是否进入某个节点内， ahooks
  3. *节点大小变化处理
    1. ahooks/useSize: 通过原生 ResizeObserver 实时获取节点的大小
    2. react-use/useSize
  4. *全屏 fullScreen 都是通过第三方包实现
    1. ahooks/useFullScreen
    2. react-use/useFullScreen

  5. 节点是否在可视区域

    1. ahooks: useInViewport(利用的是内置的 intersetion Observer)
    2. react-use/useIntersion

      缓存

  6. *cookie：主要用于针对 cookie的一些处理, 都通过 js-cookie 第三方包进行处理

    1. ahooks/useCookieState
    2. react-use/useCookie

  7. *stroage: 包含了一些本地缓存的方式 localStorage 和 sessionStorage

    1. react-use/useLocalStorage && react-use/useSessionStorage
    2. ahooks/useLocalStorageState && ahooks/useSessionStorageState

      防抖/节流

  8. react-use

    1. useThrottleFn / useThrottle
    2. useDebounce

  9. ahooks

    1. useThrottle / useThrottleEffect(异步执行的 effect)
    2. useDebounce / useDebounceEffect

      定时器

      针对 setInterval 和 settimeout 处理

  10. *useInterval

    1. ahooks/useInterval
    2. react-use/useInterval

  11. *useTimeout

    1. ahooks/useTimeout
    2. react-use/useTimeout

      生命周期

      内置的 useEffect 和 useLayoutEffect 上层的封装

  12. *忽略首次执行的钩子

    1. ahooks: useUpdateEffect | useUpdateLayoutEffect
  13. *深度比较的生命周期, useEffect 和 useLayoutEffect 的第二个参数都是通过浅比较知性
    1. ahooks: useDeepCompareEffect
  14. *扩展的异步操作
    1. ahooks: useAsyncEffect
  15. *强制组件渲染
    1. ahooks: useUpdate

参考