探索 React useMap 钩子

简介

在本实验中，我们将探索 React 中的 useMap 钩子，它创建一个有状态的 Map 对象以及一组用于操作它的函数。通过使用这个钩子，我们可以在 React 组件中轻松管理和更新键值对，而无需编写复杂且容易出错的逻辑。本实验将指导你完成 useMap 钩子的实现，并在一个示例应用程序中演示其用法。

React useMap 钩子

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

useMap() 钩子使用 React 钩子创建一个有状态的 Map 对象以及一组用于操作它的函数。
useState() 钩子使用 initialValue 初始化 Map 状态。
useMemo() 钩子创建一组不可变的操作，这些操作每次使用状态设置器来操作 map 状态变量，从而创建一个新的 Map。
useMap() 钩子返回一个数组，其中包含 map 状态变量和创建的 actions。
MyApp 组件使用 useMap() 钩子初始化有状态的 Map 对象，并提供按钮用于向 Map 中添加、重置和移除项目。
JSON.stringify() 函数将 Map 对象格式化为可读的 JSON 字符串。

const useMap = (initialValue) => {
  const [map, setMap] = React.useState(new Map(initialValue));

  const actions = React.useMemo(
    () => ({
      set: (key, value) =>
        setMap((prevMap) => {
          const nextMap = new Map(prevMap);
          nextMap.set(key, value);
          return nextMap;
        }),
      remove: (key) =>
        setMap((prevMap) => {
          const nextMap = new Map(prevMap);
          nextMap.delete(key);
          return nextMap;
        }),
      clear: () => setMap(new Map())
    }),
    [setMap]
  );

  return [map, actions];
};

const MyApp = () => {
  const [map, { set, remove, clear }] = useMap([["apples", 10]]);

  const handleAdd = () => set(Date.now(), new Date().toJSON());
  const handleReset = () => clear();
  const handleRemove = () => remove("apples");

  return (
    <div>
      <button onClick={handleAdd}>添加</button>
      <button onClick={handleReset}>重置</button>
      <button onClick={handleRemove} disabled={!map.has("apples")}>
        移除 apples
      </button>
      <pre>{JSON.stringify(Object.fromEntries(map), null, 2)}</pre>
    </div>
  );
};

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

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

React useMap 钩子

简介

React useMap 钩子

总结