useSet

一个将 Set 作为状态进行管理的 React Hook。它提供高效的状态管理和稳定的操作函数。

接口

function useSet<T>(initialState: SetOrValues<T> = new Set()): UseSetReturn<T>;

参数

• initialStateSetOrValues<T>
  

  初始 Set 状态（Set 对象或值数组）。

返回值

• UseSetReturn<T>
  

  包含 Set 状态及其操作函数的元组。

  • [0]Omit<Set<T>, 'add' | 'clear' | 'delete'>
    

    当前的 Set 状态，隐藏了各种修改方法。

  • [1].add(value: T) => void
    

    向 Set 中添加一个值。

  • [1].remove(value: T) => void
    

    从 Set 中移除一个值。

  • [1].toggle(value: T) => void
    

    值不存在则添加，存在则移除。

  • [1].setAll(values: Set<T> | T[]) => void
    

    替换 Set 中的所有值。

  • [1].reset() => void
    

    将 Set 重置为其初始状态。

示例

import { useSet } from 'react-simplikit';

function TagSelector() {
  const [selectedTags, { add, remove, toggle }] = useSet<string>(['react']);

  return (
    <div>
      {['react', 'vue', 'svelte'].map(tag => (
        <button key={tag} onClick={() => toggle(tag)}>
          {selectedTags.has(tag) ? '✓' : ''} {tag}
        </button>
      ))}
    </div>
  );
}