上手指南
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, ]