掌握 React 强大的 useSet 钩子

简介

在本实验中，我们将探索如何使用 useSet 钩子在 React 组件中创建一个有状态的 Set 对象。这个钩子提供了一种简单而有效的方法来在组件中操作一组值，并且可以根据应用程序的特定需求进行定制。在本实验结束时，你将更好地理解如何在你的 React 项目中实现和使用这个强大的钩子。

React useSet 钩子

虚拟机中已提供 index.html 和 script.js。一般来说，你只需在 script.js 和 style.css 中添加代码。

此函数创建一个带有状态的 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 />);

请点击右下角的“Go Live”以在端口 8080 上运行网络服务。然后，你可以刷新“Web 8080”标签页来预览网页。

React useSet 钩子

简介

React useSet 钩子

总结