useMap

作用

管理 Map 类型状态的 Hook。

原理

通过 useMap 创建一个 Map 类型的状态，返回一个包含 set、get、has、delete、clear 方法的对象。是对原生 Map 的封装。

源码

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

function useMap<K, T>(initialValue?: Iterable<readonly [K, T]>) {
  // new Map(initialValue) 会将 initialValue 转换为 [key, value] 的形式
  const getInitValue = () => new Map(initialValue)
  // 通过 useState 创建一个 Map 类型的状态
  const [map, setMap] = useState<Map<K, T>>(getInitValue)

  // 调用map的set方法设置值
  const set = (key: K, entry: T) => {
    setMap((prev) => {
      const temp = new Map(prev)
      temp.set(key, entry)
      return temp
    })
  }

  // 直接通过new Map新建一个 Map
  const setAll = (newMap: Iterable<readonly [K, T]>) => {
    setMap(new Map(newMap))
  }

  // 调用map的delete方法删除值
  const remove = (key: K) => {
    setMap((prev) => {
      const temp = new Map(prev)
      temp.delete(key)
      return temp
    })
  }

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

  // 调用map的get方法获取值
  const get = (key: K) => map.get(key)

  // 返回一个包含 set、setAll、remove、reset、get 方法的对象，并通过 useMemoizedFn 包裹，函数的持久化保证函数是返回的函数同一个引用

  return [
    map,
    {
      set: useMemoizedFn(set),
      setAll: useMemoizedFn(setAll),
      remove: useMemoizedFn(remove),
      reset: useMemoizedFn(reset),
      get: useMemoizedFn(get)
    }
  ] as const
}

export default useMap