React useSet钩子

创建一个有状态的Set对象，并提供一组操作函数来操作它。

• 使用useState()钩子和Set构造函数从initialValue创建一个新的Set。
• 使用useMemo()钩子创建一组非变异操作，这些操作可以操作set状态变量，每次使用状态设置器创建一个新的Set。
• 返回set状态变量和创建的actions。

const useSet = initialValue => {
  const [set, setSet] = React.useState(new Set(initialValue));

  const actions = React.useMemo(
    () => ({
      add: item => setSet(prevSet => new Set([...prevSet, item])),
      remove: item =>
        setSet(prevSet => new Set([...prevSet].filter(i => i !== item))),
      clear: () => setSet(new Set()),
    }),
    [setSet]
  );

  return [set, actions];
};

const MyApp = () => {
  const [set, { add, remove, clear }] = useSet(new Set(['apples']));

  return (
    <div>
      <button onClick={() => add(String(Date.now()))}>添加</button>
      <button onClick={() => clear()}>重置</button>
      <button onClick={() => remove('apples')} disabled={!set.has('apples')}>
        移除苹果
      </button>
      <pre>{JSON.stringify([...set], null, 2)}</pre>
    </div>
  );
};

ReactDOM.createRoot(document.getElementById('root')).render(
  <MyApp />
);