乐趣区

关于前端:大家都能看得懂的源码-ahooks-useSet-和-useMap

本文是深入浅出 ahooks 源码系列文章的第十篇,该系列已整顿成文档 - 地址。感觉还不错,给个 关注 反对一下哈,Thanks。

明天咱们来聊聊 ahooks 中对 Map 和 Set 类型进行状态治理的 hook,顺便温习一下 Set 和 Map 这两种数据类型。

useMap

治理 Map 类型状态的 Hook。

先回顾以下 Map 的概念。Map 对象保留键值对,并且可能 记住键的原始插入程序 任何值(对象或者根本类型)都能够作为一个键或一个值。

Object 和 Map 很相似。它们都容许你按键存取一个值、删除键、检测一个键是否绑定了值。因而过来咱们始终都把对象当成 Map 应用。

然而,在一些场景下,应用 Map 是更优的抉择,以下是一些常见的点:

  • 键值的类型。一个 Map 的键能够是任意值,包含函数、对象或任意根本类型。一个 Object 的键必须是一个 String 或是 Symbol。
  • 须要保障键值的程序。Map 中的键是有序的。因而,当迭代的时候,一个 Map 对象 以插入的程序 返回键值。尽管 Object 的键目前是有序的,但并不总是这样,而且这个程序是简单的。因而,最好不要依赖属性的程序
  • Size。Map 的键值对个数能够轻易地通过 size 属性获取。Object 的键值对个数只能手动计算。比方遍历对象属性,计算它的个数。
  • 性能。Map 在 频繁增删键值对的场景 下体现更好。Object 在频繁增加和删除键值对的场景下未作出优化。

更多,能够看 Objects 和 maps 的比拟。

咱们来看下 ahooks 做了哪些封装,同时回顾以下 Map 的一些根底 API 用法。

首先是默认值的设置,通过 Map 构造函数 new Map() 创立 Map 对象。入参为默认值。

function useMap<K, T>(
  // 传入默认的 Map 参数
  initialValue?: Iterable<readonly [K, T]>,
) {const getInitValue = () => {return initialValue === undefined ? new Map() : new Map(initialValue);
  };

  const [map, setMap] = useState<Map<K, T>>(() => getInitValue());
  // 省略代码...
}

set 办法。增加 Map 新的 key 和 value 或者更新 key 的值,因为 React 是不可变数据,须要要返回一个全新的值,所以须要创立一个新的 Map 对象。

通过 Map 的 set 办法,在 Map 对象中 设置与指定的键 key 关联的值 value,并返回 Map 对象。

// 增加 map
const set = (key: K, entry: T) => {setMap((prev) => {const temp = new Map(prev);
    temp.set(key, entry);
    return temp;
  });
};

remove 办法。通过 Map 的 delete 办法,移除 Map 对象中指定的键值对,如果键值对存在并胜利被移除,返回 true,否则返回 false。调用 delete 后再调用 Map.prototype.has(key) 将返回 false。

// 移除
const remove = (key: K) => {setMap((prev) => {const temp = new Map(prev);
    temp.delete(key);
    return temp;
  });
};
  • setAll 办法。传入一个全新的 Map 对象,间接笼罩旧的 Map 对象。
  • reset 办法。重置 Map 对象为初始值。在 Map 中有一个 clear 的办法,它 移除 Map 对象中所有的键值对,相比 clear,reset 办法更贴近咱们的需要。
  • get 办法,通过 Map 的 get 办法,返回与 key 关联的值,若不存在关联的值,则返回 undefined。
// 生成一个新的 Map 对象
const setAll = (newMap: Iterable<readonly [K, T]>) => {setMap(new Map(newMap));
};
// 重置
const reset = () => setMap(getInitValue());
// 获取
const get = (key: K) => map.get(key);

对于一些其余没有副作用的办法,ahooks 没有封装,我感觉是正当的,这些在开发者想用的时候,间接调用就能够了。

  • has(key)。返回一个布尔值,用来 表明 Map 对象中是否存在与 key 关联的值
  • keys()。返回一个新的迭代对象,其中 蕴含 Map 对象中所有的键,并以插入 Map 对象的顺序排列
  • values()。返回一个新的迭代对象,其中 蕴含 Map 对象中所有的值,并以插入 Map 对象的顺序排列
  • entries()。返回一个新的迭代对象,其为一个 蕴含 Map 对象中所有键值对的 [key, value] 数组,并以插入 Map 对象的顺序排列

useSet

治理 Set 类型状态的 Hook。

间接看代码。

默认值的设置,通过 new Set() 构造函数,创立一个新的 Set 对象

function useSet<K>(initialValue?: Iterable<K>) {const getInitValue = () => {return initialValue === undefined ? new Set<K>() : new Set(initialValue);
  };

  const [set, setSet] = useState<Set<K>>(() => getInitValue());
  // 省略一些代码
}

add 办法增加一个元素。调用 Set 的 add 办法,在 Set 对象尾部增加一个元素。返回该 Set 对象。

const add = (key: K) => {if (set.has(key)) {return;}
  setSet((prevSet) => {const temp = new Set(prevSet);
    temp.add(key);
    return temp;
  });
};

remove 办法移除一个元素。调用 Set 的 delete(value) 办法,移除 Set 中与这个值相等的元素,返回 Set.prototype.has(value) 在这个操作前会返回的值(即如果该元素存在,返回 true,否则返回 false)。Set.prototype.has(value) 在尔后会返回 false。

// 移除
const remove = (key: K) => {if (!set.has(key)) {return;}
  setSet((prevSet) => {const temp = new Set(prevSet);
    temp.delete(key);
    return temp;
  });
};

reset 办法,重置 Set 回默认值。其对应的 Set 的 clear 办法,会移除 Set 对象内的所有元素

// 重置
const reset = () => setSet(getInitValue());

其余 Set 办法:

  • entries()。返回一个新的迭代器对象,该对象蕴含 Set 对象中的按插入顺序排列的所有元素的值的 [value, value] 数组。为了使这个办法和 Map 对象放弃类似,每个值的键和值相等。
  • has(value)。返回一个布尔值,示意该值在 Set 中存在与否。
  • keys() 和 values()。都返回一个新的迭代器对象,该对象蕴含 Set 对象中的按插入顺序排列的所有元素的值。
  • forEach(callbackFn[, thisArg])。依照插入程序,为 Set 对象中的每一个值调用一次 callBackFn。如果提供了 thisArg 参数,回调中的 this 会是这个参数

思考与总结

ES6 中的 Map 和 Set 两种数据结构,补救了 JavaScript 之前的一些有余,比方 Object 对象只能是 string 或者 Symbol 类型。另外,提供了某些状况下更便捷的操作形式,比方数组去重,咱们能够间接 new Set([...arr])

当初越来越多的场景应用了 Map 和 Set,ahooks 对这两者的封装都比较简单,更多的是一些有副作用(批改到原 Map 和 Set)操作的封装。看这部分的源码,就当做小小温习基础知识吧。

本文已收录到集体博客中,欢送关注~

退出移动版