useSet

作用

管理 Set 类型状态的 Hook。

原理

通过 useSet 创建一个 Set 类型的状态，返回一个包含 add、remove、reset 方法的对象。是对原生 Set 的封装。

源码

import { useState } from 'react'
import useMemoizedFn from '../useMemoizedFn'

function useSet<K>(initialValue?: Iterable<K>) {
  // 通过new Set(initialValue) 会将 initialValue 新建为一个 Set
  const getInitValue = () => new Set(initialValue)
  // 通过 useState 创建一个 Set 类型的状态
  const [set, setSet] = useState<Set<K>>(getInitValue)

  // 调用set的add方法添加值
  const add = (key: K) => {
    if (set.has(key)) {
      return
    }
    setSet((prevSet) => {
      const temp = new Set(prevSet)
      temp.add(key)
      return temp
    })
  }

  // 调用set的delete方法删除值
  const remove = (key: K) => {
    if (!set.has(key)) {
      return
    }
    setSet((prevSet) => {
      const temp = new Set(prevSet)
      temp.delete(key)
      return temp
    })
  }

  // 重置成初始值
  const reset = () => setSet(getInitValue())

  // 返回一个包含 add、remove、reset 方法的对象，并通过 useMemoizedFn 包裹，函数的持久化保证函数是返回的函数同一个引用
  return [
    set,
    {
      add: useMemoizedFn(add),
      remove: useMemoizedFn(remove),
      reset: useMemoizedFn(reset)
    }
  ] as const
}

export default useSet