持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第19天，点击查看活动详情

今天开始一起学习分享 ahooks 的源码

ahooks是阿里巴巴出品的一套高质量可靠的 React Hooks 库

今天分享 第14个 hooks-useCounter

useCounter

首先看下 useCounter 的作用是什么

useCounter 的作用是 管理计数器的 Hook。

接下来 看下 API

API

const [current, {
  inc,
  dec,
  set,
  reset
}] = useCounter(initialValue, { min, max });

Result

返回的结果一共有5个数据

第1个参数是current，表示当前的值

第2个参数是inc，是一个方法，表示加，默认加 1

第3个参数是dec，是一个方法，表示减，默认减 1

第4个参数是set，是一个方法，表示设置 current，更新 current的值

第5个参数是reset，是一个方法，表示重置为默认值

参数	说明	类型
current	当前值	number
inc	加，默认加 1	(delta?: number) => void
dec	减，默认减 1	(delta?: number) => void
set	设置 current	(value: number | ((c: number) => number)) => void
reset	重置为默认值	() => void

Params

一共有3个参数

第1个参数是initialValue,表示默认值

第2个参数是min，表示最小值

第3个参数是max，表示最大值

参数	说明	类型	默认值
initialValue	默认值	number	0
min	最小值	number	-
max	最大值	number	-

接下来 看下 用法

基本用法

简单的 counter 管理示例。

import React from 'react';
import { useCounter } from 'ahooks';

export default () => {
  const [current, { inc, dec, set, reset }] = useCounter(100, { min: 1, max: 10 });

  return (
    <div>
      <p>{current} [max: 10; min: 1;]</p>
      <div>
        <button
          type="button"
          onClick={() => {
            inc();
          }}
          style={{ marginRight: 8 }}
        >
          inc()
        </button>
        <button
          type="button"
          onClick={() => {
            dec();
          }}
          style={{ marginRight: 8 }}
        >
          dec()
        </button>
        <button
          type="button"
          onClick={() => {
            set(3);
          }}
          style={{ marginRight: 8 }}
        >
          set(3)
        </button>
        <button type="button" onClick={reset} style={{ marginRight: 8 }}>
          reset()
        </button>
      </div>
    </div>
  );
};

分别包含了 增加、减少、设置、重置的方法

接下来一起看下 源码

源码

1.首先定义传入的两个参数的类型

export interface Options {
  min?: number;
  max?: number;
}

initialValue: number = 0, options: Options = {}

2.通过传入的options获取 min 和 max

const { min, max } = options;

3.通过state报春初始值

const [current, setCurrent] = useState(() => {
    return getTargetValue(initialValue, {
      min,
      max,
    });
  });

4.编写 inc 方法，这里使用了setValue方法，下面看下setValue怎么编写的

const inc = (delta: number = 1) => {
    setValue((c) => c + delta);
  };

5.看下setValue方法。传入一个值，通过setCurrent这个state控制current的值，最后返回这个值

 const setValue = (value: ValueParam) => {
    setCurrent((c) => {
      const target = isNumber(value) ? value : value(c);
      return getTargetValue(target, {
        max,
        min,
      });
    });
  };

6.其他方法，dec、set、reset也是同样使用setValue

const dec = (delta: number = 1) => {
    setValue((c) => c - delta);
  };

  const set = (value: ValueParam) => {
    setValue(value);
  };

  const reset = () => {
    setValue(initialValue);
  };

7.最后返回上面的数据和方法

return [
    current,
    {
      inc: useMemoizedFn(inc),
      dec: useMemoizedFn(dec),
      set: useMemoizedFn(set),
      reset: useMemoizedFn(reset),
    },
  ] as const;

其他hooks

useLatest

useEventListener

useClickAway

useDocumentVisibility

useTitle