大家都能看得懂的原始碼 - ahooks useSet 和 useMap-有解無憂

本文是深入淺出 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 = https://www.cnblogs.com/gopal/archive/2022/08/20/() => {
    return initialValue === undefined ? new Map() : new Map(initialValue);
  };

  const [map, setMap] = useState>(() => 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 = https://www.cnblogs.com/gopal/archive/2022/08/20/() => {
    return initialValue === undefined ? new Set() : new Set(initialValue);
  };

  const [set, setSet] = useState>(() => 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）操作的封裝，看這部分的原始碼，就當做小小復習基礎知識吧，

本文已收錄到個人博客中，歡迎關注~

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/502412.html

標籤：其他

上一篇：從0搭建Vue3組件庫:button組件

下一篇：js上傳圖片裁剪