实现一个 useSet Hook,用于管理一个 JavaScript Set 集合,并提供额外的实用方法。
useSet
Set
使用 useSet 比直接使用 useState 更方便,因为在后一种情况下,你总是需要创建一个新的 Set,修改它,然后设置状态来使用新的集合,这可能会很麻烦。
useState
该 Hook 应该可以通用地处理任何类型的项目。
export default function Component() { const { set, add, remove, toggle, reset, clear } = useSet(new Set(['hello'])); return ( <div> <button onClick={() => add(Date.now().toString())}>Add</button> <button onClick={() => remove('hello')} disabled={!has('hello')}> Remove 'hello' </button> <button onClick={() => toggle('hello')}>Toggle hello</button> <button onClick={() => reset()}>Reset</button> <button onClick={() => clear()}>Clear</button> <pre>{JSON.stringify(Array.from(set), null, 2)}</pre> </div> );}
initialState
该 Hook 返回一个具有以下属性的对象:
set
add: (item) => void
item
remove: (item) => void
toggle: (item) => void
reset: () => void
clear: () => void
console.log()