本文是深入淺出 ahooks 源碼系列文章的第十篇，該系列已整理成文檔-地址。覺得還不錯，給個 star 支持一下哈，Thanks。 今天我們來聊聊 ahooks 中對 Map 和 Set 類型進行狀態管理的 hook，順便複習一下 Set 和 Map 這兩種數據類型。 useMap 管理 Map ...
本文是深入淺出 ahooks 源碼系列文章的第十篇，該系列已整理成文檔-地址。覺得還不錯，給個 star 支持一下哈，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）操作的封裝。看這部分的源碼，就當做小小複習基礎知識吧。
本文已收錄到個人博客中，歡迎關註~
