useToggle

作用

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

原理

通过函数的重载，实现了三种不同的传参方式，返回一个元组，元组的第一个元素是状态，第二个元素是一个对象，对象中有四个方法，分别是 toggle，set，setLeft，setRight

源码

import { useMemo, useState } from 'react'

// 设置值的方法的接口
export interface Actions<T> {
  setLeft: () => void
  setRight: () => void
  set: (value: T) => void
  toggle: () => void
}

// 函数重载
// 如果第一个参数是 boolean 类型，默认值false，返回一个元组，而且返回值的第一个元素也是 boolean 类型，
function useToggle<T = boolean>(): [boolean, Actions<T>]

// 一个参数是默认值，返回一个元组，而且返回值的第一个元素T类型
function useToggle<T>(defaultValue: T): [T, Actions<T>]

// 两个参数，第一个参数是默认值，第二个参数是反转默认智能，返回一个元组，而且返回值的第一个元素T | U类型
function useToggle<T, U>(defaultValue: T, reverseValue: U): [T | U, Actions<T | U>]

// 实现函数，第二个参数可以传入一个反转值，也可以不传
function useToggle<D, R>(defaultValue: D = false as unknown as D, reverseValue?: R) {
  // 状态默认为第一个参数
  const [state, setState] = useState<D | R>(defaultValue)

  const actions = useMemo(() => {
    // 如果第二个参数没有传入，那么反转值就是第一个参数的反值，如果传入了，那么反转值就是第二个参数
    const reverseValueOrigin = (reverseValue === undefined ? !defaultValue : reverseValue) as D | R

    // 返回一个对象，对象中有四个方法，分别是toggle，set，setLeft，setRight

    // toggle方法，如果状态是第一个参数，那么就设置为第二个参数，如果状态是第二个参数，那么就设置为第一个参数
    const toggle = () => setState((s) => (s === defaultValue ? reverseValueOrigin : defaultValue))

    // set方法，设置状态
    const set = (value: D | R) => setState(value)

    // setLeft方法，设置状态为第一个参数
    const setLeft = () => setState(defaultValue)

    // setRight方法，如果传入了 reverseValue, 则设置为 reverseValue。 否则设置为 defautValue 的反值
    const setRight = () => setState(reverseValueOrigin)

    return {
      toggle,
      set,
      setLeft,
      setRight
    }
    // useToggle ignore value change
    // }, [defaultValue, reverseValue]);
  }, [])

  return [state, actions]
}

export default useToggle