上手指南
Hooks 列表
后期规划
上手指南
Hooks 列表
后期规划
简体中文

useCounter

Tags:
State

一个提供包含增加、减少和重置功能的计数器的 React Hook。

场景

  • 处理数量计算场景： 提供增加、减少、设置、获取、重置计数器的功能
  • 界面交互场景： 实现用户界面上数量的动态更新和显示，如购物车商品数量、轮播图切换
  • 限制数值范围场景： 对数值进行最大值和最小值的限制 (建议使用更加语意化的 useClamp)
  • ...

演示

源码
Count:
1
Min:
0
Max:
20
Initial:
1

用法

const [count, actions] = useCounter(20)
const [count, actions, couterState] = useCounter(20, { min: 1, max: 100 })

// 增加计数器
actions.inc()
actions.inc(2)

// 减少计数器
actions.dec()
actions.dec(4)

// 设置计数器为指定值
actions.set(10)

// 重置计数器为初始值（或同时重设初始值）
actions.reset()
actions.reset(12)

// 获取计数器的值，值为 count
acitons.get()

源码

点击下方链接跳转 GitHub 查看源代码。

🪝 Hook🎨 Demo📄 Document

API

const [count, actions, couterState] = useCounter(initialCount, options)

初始值 InitialCount

一个 number 类型的初始值。

选项 Options

export type UseCounterOptions = {
  /**
   * 计数器的最大值
   */
  max?: number
  /**
   * 计数器的最小值
   */
  min?: number
}

返回值

export interface UseCounterReturnsAction {
  /**
   * 增加计数器
   */
  inc: (delta?: number) => void
  /**
   * 减少计数器
   */
  dec: (delta?: number) => void
  /**
   * 设置计数器
   */
  set: (value: number) => void
  /**
   * 获取计数器
   */
  get(): number
  /**
   * 重置计数器
   */
  reset: (n?: number) => void
  /**
   * 设置计数器，使用 React 的 `setState` 风格，支持函数更新器避免过期值
   * 
   * @since 1.9.0
   */
  setState: (state: SetStateAction<number>) => void
}

export interface UseCounterState {
  /**
   * 计数器的值
   */
  count: number
  /**
   * 计数器的最大值
   */
  max: number
  /**
   * 计数器的最小值
   */
  min: number
  /**
   * 计数器的初始值
   */
  initialCount: number
}

export type UseCounterReturns = readonly [
  /**
   * 计数器的计数状态
   */
  number,
  /**
   * 控制计数器的功能
   */
  UseCounterReturnsAction,
  /**
   * 计数器的完整内部状态
   */
  UseCounterState,
]