今天我們來聊聊 ahooks 中對(duì) Map 和 Set 類型進(jìn)行狀態(tài)管理的 hook，順便復(fù)習(xí)一下 Set 和 Map 這兩種數(shù)據(jù)類型。

useMap

管理 Map 類型狀態(tài)的 Hook。

先回顧以下 Map 的概念。Map 對(duì)象保存鍵值對(duì)，并且能夠記住鍵的原始插入順序。任何值（對(duì)象或者基本類型）都可以作為一個(gè)鍵或一個(gè)值。

Object 和 Map 很類似。它們都允許你按鍵存取一個(gè)值、刪除鍵、檢測(cè)一個(gè)鍵是否綁定了值。因此過去我們一直都把對(duì)象當(dāng)成 Map 使用。

但是，在一些場(chǎng)景下，使用 Map 是更優(yōu)的選擇，以下是一些常見的點(diǎn)：

• 鍵值的類型。一個(gè) Map 的鍵可以是任意值，包括函數(shù)、對(duì)象或任意基本類型。一個(gè) Object 的鍵必須是一個(gè) String 或是 Symbol。
• 需要保證鍵值的順序。Map 中的鍵是有序的。因此，當(dāng)?shù)臅r(shí)候，一個(gè) Map 對(duì)象以插入的順序返回鍵值。雖然 Object 的鍵目前是有序的，但并不總是這樣，而且這個(gè)順序是復(fù)雜的。因此，最好不要依賴屬性的順序。
• Size。Map 的鍵值對(duì)個(gè)數(shù)可以輕易地通過 size 屬性獲取。Object 的鍵值對(duì)個(gè)數(shù)只能手動(dòng)計(jì)算。比如遍歷對(duì)象屬性，計(jì)算它的個(gè)數(shù)。
• 性能。Map 在頻繁增刪鍵值對(duì)的場(chǎng)景下表現(xiàn)更好。Object 在頻繁添加和刪除鍵值對(duì)的場(chǎng)景下未作出優(yōu)化。

更多，可以看 Objects 和 maps 的比較[1]。

我們來看下 ahooks 做了哪些封裝，同時(shí)回顧以下 Map 的一些基礎(chǔ) API 用法。

首先是默認(rèn)值的設(shè)置，通過 Map 構(gòu)造函數(shù) new Map() 創(chuàng)建 Map 對(duì)象。入?yún)槟J(rèn)值。

function useMap(
  // 傳入默認(rèn)的 Map 參數(shù)
  initialValue?: Iterable,
) {
  const getInitValue = () => {
    return initialValue === undefined ? new Map() : new Map(initialValue);
  };

  const [map, setMap] = useState>(() => getInitValue());
  // 省略代碼...
}

set 方法。添加 Map 新的 key 和 value 或者更新 key 的值，因?yàn)?React 是不可變數(shù)據(jù)，需要要返回一個(gè)全新的值，所以需要?jiǎng)?chuàng)建一個(gè)新的 Map 對(duì)象。

通過 Map 的 set 方法，在 Map 對(duì)象中設(shè)置與指定的鍵 key 關(guān)聯(lián)的值 value，并返回 Map 對(duì)象。

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

remove 方法。通過 Map 的 delete 方法，移除 Map 對(duì)象中指定的鍵值對(duì)，如果鍵值對(duì)存在并成功被移除，返回 true，否則返回 false。調(diào)用 delete 后再調(diào)用 Map.prototype.has(key) 將返回 false。

// 移除
const remove = (key: K) => {
  setMap((prev) => {
    const temp = new Map(prev);
    temp.delete(key);
    return temp;
  });
};

• setAll 方法。傳入一個(gè)全新的 Map 對(duì)象，直接覆蓋舊的 Map 對(duì)象。
• reset 方法。重置 Map 對(duì)象為初始值。在 Map 中有一個(gè) clear 的方法，它移除 Map 對(duì)象中所有的鍵值對(duì)，相比 clear，reset 方法更貼近我們的需求。
• get 方法，通過 Map 的 get 方法，返回與 key 關(guān)聯(lián)的值，若不存在關(guān)聯(lián)的值，則返回 undefined。

// 生成一個(gè)新的 Map 對(duì)象
const setAll = (newMap: Iterable) => {
  setMap(new Map(newMap));
};
// 重置
const reset = () => setMap(getInitValue());
// 獲取
const get = (key: K) => map.get(key);

對(duì)于一些其他沒有副作用的方法，ahooks 沒有封裝，我覺得是合理的，這些在開發(fā)者想用的時(shí)候，直接調(diào)用就可以了。

• has(key)。返回一個(gè)布爾值，用來表明 Map 對(duì)象中是否存在與 key 關(guān)聯(lián)的值。
• keys()。返回一個(gè)新的迭代對(duì)象，其中包含 Map 對(duì)象中所有的鍵，并以插入 Map 對(duì)象的順序排列。
• values()。返回一個(gè)新的迭代對(duì)象，其中包含 Map 對(duì)象中所有的值，并以插入 Map 對(duì)象的順序排列。
• entries()。返回一個(gè)新的迭代對(duì)象，其為一個(gè)包含 Map 對(duì)象中所有鍵值對(duì)的 [key, value] 數(shù)組，并以插入 Map 對(duì)象的順序排列。

useSet

管理 Set 類型狀態(tài)的 Hook。

直接看代碼。

默認(rèn)值的設(shè)置，通過 new Set() 構(gòu)造函數(shù)，創(chuàng)建一個(gè)新的 Set 對(duì)象。

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

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

add 方法添加一個(gè)元素。調(diào)用 Set 的 add 方法，在 Set 對(duì)象尾部添加一個(gè)元素。返回該 Set 對(duì)象。

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

remove 方法移除一個(gè)元素。調(diào)用 Set 的 delete(value) 方法，移除 Set 中與這個(gè)值相等的元素，返回 Set.prototype.has(value) 在這個(gè)操作前會(huì)返回的值（即如果該元素存在，返回 true，否則返回false）。Set.prototype.has(value) 在此后會(huì)返回 false。

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

reset 方法，重置 Set 回默認(rèn)值。其對(duì)應(yīng)的 Set 的 clear 方法，會(huì)移除Set對(duì)象內(nèi)的所有元素。

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

其他 Set 方法：

• entries()。返回一個(gè)新的迭代器對(duì)象，該對(duì)象包含 Set 對(duì)象中的按插入順序排列的所有元素的值的 [value, value] 數(shù)組。為了使這個(gè)方法和 Map 對(duì)象保持相似， 每個(gè)值的鍵和值相等。
• has(value)。返回一個(gè)布爾值，表示該值在 Set 中存在與否。
• keys() 和 values()。都返回一個(gè)新的迭代器對(duì)象，該對(duì)象包含 Set 對(duì)象中的按插入順序排列的所有元素的值。
• forEach(callbackFn[, thisArg])。按照插入順序，為 Set 對(duì)象中的每一個(gè)值調(diào)用一次 callBackFn。如果提供了thisArg參數(shù)，回調(diào)中的 this 會(huì)是這個(gè)參數(shù)。

思考與總結(jié)

ES6 中的 Map 和 Set 兩種數(shù)據(jù)結(jié)構(gòu)，彌補(bǔ)了 JavaScript 之前的一些不足，比如 Object 對(duì)象只能是 string 或者 Symbol 類型。另外，提供了某些情況下更便捷的操作方式，比如數(shù)組去重，我們可以直接 new Set([...arr])。

現(xiàn)在越來越多的場(chǎng)景使用了 Map 和 Set，ahooks 對(duì)這兩者的封裝都比較簡(jiǎn)單，更多的是一些有副作用（修改到原 Map 和 Set）操作的封裝?？催@部分的源碼，就當(dāng)做小小復(fù)習(xí)基礎(chǔ)知識(shí)吧。

網(wǎng)頁題目：通過這兩個(gè)Hook回顧Set/Map基礎(chǔ)知識(shí)
轉(zhuǎn)載源于：http://uogjgqi.cn/article/dpjegoh.html