useBoolean

首先看下 useBoolean 的作用是什么

useBoolean 的作用是优雅的管理 boolean 状态的 Hook。

接下来看下 API

API

const [state, { toggle, set, setTrue, setFalse }] = useBoolean(
  defaultValue?: boolean,
);

Params

参数	说明	类型	默认值
defaultValue	可选项，传入默认的状态值	`boolean`	`false`

Result

参数	说明	类型
state	状态值	`boolean`
actions	操作集合	`Actions`

Actions

参数	说明	类型
toggle	切换 state	`() => void`
set	设置 state	`(value: boolean) => void`
setTrue	设置为 true	`() => void`
setFalse	设置为 false	`() => void`

接下来看下用法

基本用法

切换 boolean，可以接收默认值。

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

export default () => {
  const [state, { toggle, setTrue, setFalse }] = useBoolean(true);

  return (
    <div>
      <p>Effects：{JSON.stringify(state)}</p>
      <p>
        <button type="button" onClick={toggle}>
          Toggle
        </button>
        <button type="button" onClick={setFalse} style={{ margin: '0 16px' }}>
          Set false
        </button>
        <button type="button" onClick={setTrue}>
          Set true
        </button>
      </p>
    </div>
  );
};

默认值为 true时

设置成 false

使用 toggle来切换

接下来一起看下源码

源码

1.首先看下 useBoolean传入的参数和返回值,参数默认值传入false，返回值是boolean和Actions,boolean值表示true或者false，Actions表示一些方法

export default function useBoolean(defaultValue = false): [boolean, Actions] {}

2.接下来看下 Actions的定义，定义了几个方法，setTrue 将 state设置为 true，setFalse 将 state设置成 false，toggle为互相切换

export interface Actions {
  setTrue: () => void;
  setFalse: () => void;
  set: (value: boolean) => void;
  toggle: () => void;
}

3.首先使用useToggle 这个 hooks，设置初始值，并返回 state和 toggle

const [state, { toggle, set }] = useToggle(defaultValue);

4.然后定义actions,一个是setTrue,一个是setFalse，还有就是toggle

const actions: Actions = useMemo(() => {
    const setTrue = () => set(true);
    const setFalse = () => set(false);
    return {
      toggle,
      set: (v) => set(!!v),
      setTrue,
      setFalse,
    };
  }, []);

5.最后返回state和actions