useToggle

首先看下 useToggle 的作用是什么

useToggle 的作用是用于在两个状态值间切换的 Hook。

接下来看下 API

API

const [state, { toggle, set, setLeft, setRight }] = useToggle(defaultValue?: boolean);

const [state, { toggle, set, setLeft, setRight }] = useToggle<T>(defaultValue: T);

const [state, { toggle, set, setLeft, setRight }] = useToggle<T, U>(defaultValue: T, reverseValue: U);

Params

参数	说明	类型	默认值
defaultValue	可选项，传入默认的状态值	`T`	`false`
reverseValue	可选项，传入取反的状态值	`U`	-

Result

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

Actions

参数	说明	类型
toggle	切换 state	`() => void`
set	修改 state	`(state: T \| U) => void`
setLeft	设置为 defaultValue	`() => void`
setRight	如果传入了 reverseValue, 则设置为 reverseValue。否则设置为 defaultValue 的反值	`() => void`

接下来看下用法

基本用法

默认为 boolean 切换，基础用法与 useBoolean 一致。

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

export default () => {
  const [state, { toggle, setLeft, setRight }] = useToggle();

  return (
    <div>
      <p>Effects：{`${state}`}</p>
      <p>
        <button type="button" onClick={toggle}>
          Toggle
        </button>
        <button type="button" onClick={setLeft} style={{ margin: '0 8px' }}>
          Toggle False
        </button>
        <button type="button" onClick={setRight}>
          Toggle True
        </button>
      </p>
    </div>
  );
};

默认值为 true时

设置成 false

使用 toggle来切换

高级用法

接受两个可选参数，在它们之间进行切换。

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

export default () => {
  const [state, { toggle, set, setLeft, setRight }] = useToggle('Hello', 'World');

  return (
    <div>
      <p>Effects：{state}</p>
      <p>
        <button type="button" onClick={toggle}>
          Toggle
        </button>
        <button type="button" onClick={() => set('Hello')} style={{ margin: '0 8px' }}>
          Set Hello
        </button>
        <button type="button" onClick={() => set('World')}>
          Set World
        </button>
        <button type="button" onClick={setLeft} style={{ margin: '0 8px' }}>
          Set Left
        </button>
        <button type="button" onClick={setRight}>
          Set Right
        </button>
      </p>
    </div>
  );
};

接下来一起看下源码

源码

1.首先定义 actions 的类型

export interface Actions<T> {
  setLeft: () => void;
  setRight: () => void;
  set: (value: T) => void;
  toggle: () => void;
}

2.使用 useState来定义初始值

const [state, setState] = useState<D | R>(defaultValue);

3.然后定义actions，最后返回 state和 actions

return [state, actions];
}

4.最后重点看下 actions, 首先根据reverseValue定义原始的初始值，然后定义 toggle方法，使用setState根据上一个值，来决定最后的值。setLeft和setRight分别设置defaultValue和reverseValueOrigin

 const reverseValueOrigin = (reverseValue === undefined ? !defaultValue : reverseValue) as D | R;
 
 const toggle = () => setState((s) => (s === defaultValue ? reverseValueOrigin : defaultValue));
    const set = (value: D | R) => setState(value);
    const setLeft = () => setState(defaultValue);
    const setRight = () => setState(reverseValueOrigin);

    return {
      toggle,
      set,
      setLeft,
      setRight,
    };