日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

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

useMap

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

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

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

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

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

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

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

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

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

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

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

通過 Map 的 set 方法，在 Map 對象中設(shè)置與指定的鍵 key 關(guān)聯(lián)的值 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。調(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 方法。傳入一個全新的 Map 對象，直接覆蓋舊的 Map 對象。
• reset 方法。重置 Map 對象為初始值。在 Map 中有一個 clear 的方法，它移除 Map 對象中所有的鍵值對，相比 clear，reset 方法更貼近我們的需求。
• get 方法，通過 Map 的 get 方法，返回與 key 關(guān)聯(lián)的值，若不存在關(guān)聯(lián)的值，則返回 undefined。

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

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

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

useSet

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

直接看代碼。

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

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

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

add 方法添加一個元素。調(diào)用 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 方法移除一個元素。調(diào)用 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 回默認值。其對應(yīng)的 Set 的 clear 方法，會移除Set對象內(nèi)的所有元素。

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

其他 Set 方法：

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

思考與總結(jié)

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

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

本文題目：通過這兩個Hook回顧Set/Map基礎(chǔ)知識
瀏覽路徑：http://www.dlmjj.cn/article/dpjegoh.html