大家都能看得懂的源碼 - ahooks 這些 hook 更優雅管理你的狀態

来源:https://www.cnblogs.com/gopal/archive/2022/08/23/16617652.html
-Advertisement-
Play Games

本文是深入淺出 ahooks 源碼系列文章的第十二篇，該系列已整理成文檔-地址。覺得還不錯，給個 star 支持一下哈，Thanks。 今天我們來聊聊 ahooks 中那些可以幫助我們更優雅管理我們 state（狀態）的那些 hook。一些比較特殊的，比如 cookie/localStorage/s ...


本文是深入淺出 ahooks 源碼系列文章的第十二篇，該系列已整理成文檔-地址。覺得還不錯，給個 star 支持一下哈，Thanks。

今天我們來聊聊 ahooks 中那些可以幫助我們更優雅管理我們 state（狀態）的那些 hook。一些比較特殊的，比如 cookie/localStorage/sessionStorage，useUrlState等，我們已經單獨拿出來細講了，感興趣可以看看筆者的歷史文章。

useSetState

管理 object 類型 state 的 Hooks，用法與 class 組件的 this.setState 基本一致。

先來瞭解一下可變數據和不可變數據的含義和區別如下：

  • 可變數據(mutable)即一個數據被創建之後，可以隨時進行修改，修改之後會影響到原值。
  • 不可變數據(Immutable) 就是一旦創建，就不能再被更改的數據。對 Immutable 對象的任何修改或添加刪除操作都會返回一個新的 Immutable 對象。

我們知道，React Function Components 中的 State 是不可變數據。所以我們經常需要寫類似如下的代碼：

setObj((prev) => ({
  ...prev,
  name: 'Gopal',
  others: {
    ...prev.others,
    age: '27',
  }
}));

通過 useSetState，可以省去對象擴展運算符操作這個步驟，即：

setObj((prev) => ({
  name: 'Gopal',
  others: {
    age: '27',
  }
}));

其內部實現也比較簡單，如下所示：

  • 調用設置值方法的時候，會根據傳入的值是否為函數。如果是函數，則入參為舊狀態，輸出新的狀態。否則直接作為新狀態。這個符合 setState 的使用方法。
  • 使用對象拓展運算符，返回新的對象，保證原有數據不可變。
const useSetState = <S extends Record<string, any>>(
  initialState: S | (() => S),
): [S, SetState<S>] => {
  const [state, setState] = useState<S>(initialState);

  // 合併操作，並返回一個全新的值
  const setMergeState = useCallback((patch) => {
    setState((prevState) => {
      // 新狀態
      const newState = isFunction(patch) ? patch(prevState) : patch;
      // 也可以通過類似 Object.assign 的方式合併
      // 對象拓展運算符，返回新的對象，保證原有數據不可變
      return newState ? { ...prevState, ...newState } : prevState;
    });
  }, []);

  return [state, setMergeState];
};

可以看到，其實就是將對象拓展運算符的操作封裝到內部。

還有其他更優雅的方式？我們可以使用 use-immer

useImmer(initialState) 非常類似於 useState。該函數返回一個元組，元組的第一個值是當前狀態，第二個是 updater 函數，它接受一個 immer producer 函數或一個值作為參數。

使用如下：

const [person, updatePerson] = useImmer({
  name: "Michel",
  age: 33
});

function updateName(name) {
  updatePerson(draft => {
    draft.name = name;
  });
}

function becomeOlder() {
  updatePerson(draft => {
    draft.age++;
  });
}

當向更新函數傳遞一個函數的時候，draft 參數可以自由地改變，直到 producer 函數結束，所做的改變將是不可變的，併成為下一個狀態。這更符合我們的使用習慣，可以通過 draft.xx.yy 的方式更新我們對象的值。

useBoolean 和 useToggle

這兩個都是特殊情況下的值管理。

useBoolean，優雅的管理 boolean 狀態的 Hook。

useToggle，用於在兩個狀態值間切換的 Hook。

實際上，useBoolean 又是 useToggle 的一個特殊使用場景。

先看 useToggle。

  • 這裡使用了 typescript 函數重載聲明入參和出參類型，根據不同的入參會返回不同的結果。比如第一個入參為 boolean 布爾值，則返回一個元組，第一項為 boolean 值，第二個為更新函數。優先順序從上到下依次變低。
  • 入參可能有兩個值，第一個為預設值（認為是左值），第二個是取反之後的值（認為是右值），可以不傳，不傳的時候，則直接根據預設值取反 !defaultValue。
  • toggle 函數。切換值，也就是上面的左值和右值的轉換。
  • set。直接設置值。
  • setLeft。設置預設值（左值）。
  • setRight。如果傳入了 reverseValue, 則設置為 reverseValue。 否則設置為 defautValue 的取反值。
// TS 函數重載的使用
function useToggle<T = boolean>(): [boolean, Actions<T>];

function useToggle<T>(defaultValue: T): [T, Actions<T>];

function useToggle<T, U>(defaultValue: T, reverseValue: U): [T | U, Actions<T | U>];

function useToggle<D, R>(
  // 預設值
  defaultValue: D = false as unknown as D,
  // 取反
  reverseValue?: R,
) {
  const [state, setState] = useState<D | R>(defaultValue);

  const actions = useMemo(() => {
    const reverseValueOrigin = (reverseValue === undefined ? !defaultValue : reverseValue) as D | R;

    // 切換 state
    const toggle = () => setState((s) => (s === defaultValue ? reverseValueOrigin : defaultValue));
    // 修改 state
    const set = (value: D | R) => setState(value);
    // 設置為 defaultValue
    const setLeft = () => setState(defaultValue);
    // 如果傳入了 reverseValue, 則設置為 reverseValue。 否則設置為 defautValue 的反值
    const setRight = () => setState(reverseValueOrigin);

    return {
      toggle,
      set,
      setLeft,
      setRight,
    };
    // useToggle ignore value change
    // }, [defaultValue, reverseValue]);
  }, []);

  return [state, actions];
}

而 useBoolean 是對 useToggle 的一個使用。如下，比較簡單，不細說

export default function useBoolean(defaultValue = false): [boolean, Actions] {
  const [state, { toggle, set }] = useToggle(defaultValue);

  const actions: Actions = useMemo(() => {
    const setTrue = () => set(true);
    const setFalse = () => set(false);
    return {
      toggle,
      set: (v) => set(!!v),
      setTrue,
      setFalse,
    };
  }, []);

  return [state, actions];
}

usePrevious

保存上一次狀態的 Hook。

其原理，是每次狀態變更的時候，比較值有沒有發生變化，變更狀態：

  • 維護兩個狀態 prevRef（保存上一次的狀態）和 curRef（保存當前狀態）。
  • 狀態變更的時候，使用 shouldUpdate 判斷是否發生變化，預設通過 Object.is 判斷。開發者可以自定義 shouldUpdate 函數，並決定什麼時候記錄上一次狀態。
  • 狀態發生變化，更新 prevRef 的值為上一個 curRef，並更新 curRef 為當前的狀態。
const defaultShouldUpdate = <T>(a?: T, b?: T) => !Object.is(a, b);
function usePrevious<T>(
  state: T,
  shouldUpdate: ShouldUpdateFunc<T> = defaultShouldUpdate,
): T | undefined {
  // 使用了 useRef 的特性，一直保持引用不變
  // 保存上一次值
  const prevRef = useRef<T>();
  // 當前值
  const curRef = useRef<T>();

  // 自定義是否更新上一次的值
  if (shouldUpdate(curRef.current, state)) {
    prevRef.current = curRef.current;
    curRef.current = state;
  }

  return prevRef.current;
}

useRafState

只在 requestAnimationFrame callback 時更新 state，一般用於性能優化。

window.requestAnimationFrame() 告訴瀏覽器——你希望執行一個動畫，並且要求瀏覽器在下次重繪之前調用指定的回調函數更新動畫。該方法需要傳入一個回調函數作為參數，該回調函數會在瀏覽器下一次重繪之前執行。

假如你的操作是比較頻繁的，就可以通過這個 hook 進行性能優化。

  • 重點看 setRafState 方法，它執行的時候，會取消上一次的 setRafState 操作。重新通過 requestAnimationFrame 去控制 setState 的執行時機。
  • 另外在頁面卸載的時候，會直接取消操作，避免記憶體泄露。
function useRafState<S>(initialState?: S | (() => S)) {
  const ref = useRef(0);
  const [state, setState] = useState(initialState);

  const setRafState = useCallback((value: S | ((prevState: S) => S)) => {
    cancelAnimationFrame(ref.current);
    ref.current = requestAnimationFrame(() => {
      setState(value);
    });
  }, []);

  // unMount 的時候，去除監聽
  useUnmount(() => {
    cancelAnimationFrame(ref.current);
  });

  return [state, setRafState] as const;
}

useSafeState

用法與 React.useState 完全一樣，但是在組件卸載後非同步回調內的 setState 不再執行，避免因組件卸載後更新狀態而導致的記憶體泄漏。

代碼如下：

  • 在更新的時候，通過 useUnmountedRef 判斷如果組件卸載，則停止更新。
function useSafeState<S>(initialState?: S | (() => S)) {
  // 判斷是否卸載
  const unmountedRef = useUnmountedRef();
  const [state, setState] = useState(initialState);
  const setCurrentState = useCallback((currentState) => {
    // 如果組件卸載，則停止更新
    if (unmountedRef.current) return;
    setState(currentState);
  }, []);

  return [state, setCurrentState] as const;
}

useUnmountedRef 這個我們之前提過，簡單回顧下，其實就是在 hook 的返回值中標記組件為已卸載。

const useUnmountedRef = () => {
  const unmountedRef = useRef(false);
  useEffect(() => {
    unmountedRef.current = false;
    // 如果已經卸載，則會執行 return 中的邏輯
    return () => {
      unmountedRef.current = true;
    };
  }, []);
  return unmountedRef;
};

useGetState

給 React.useState 增加了一個 getter 方法，以獲取當前最新值。

其實現如下：

  • 其實就是通過 useRef 記錄最新的 state 的值，並暴露一個 getState 方法獲取到最新的。
function useGetState<S>(initialState?: S) {
  const [state, setState] = useState(initialState);
  // useRef 返回一個可變的 ref 對象，其 .current 屬性被初始化為傳入的參數（initialValue）。返回的 ref 對象在組件的整個生命周期內持續存在。
  // 使用 useRef 處理 state
  const stateRef = useRef(state);
  stateRef.current = state;
  const getState = useCallback(() => stateRef.current, []);

  return [state, setState, getState];
}

這在某一些情況下，可以避免 React 的閉包陷阱。如官網例子：

const [count, setCount, getCount] = useGetState<number>(0);

useEffect(() => {
  const interval = setInterval(() => {
    console.log('interval count', getCount());
  }, 3000);

  return () => {
    clearInterval(interval);
  };
}, []);

假如這裡不使用 getCount()，而是直接使用 count，是獲取不到最新的值的。

總結與思考

React 的 function Component 的狀態管理還是比較靈活，我們可以針對一些場景進行封裝和優化，從而更優雅的管理我們的 state 狀態，希望 ahooks 這些封裝能對你有所幫助。

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


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 翻譯 | Kubernetes Operator 對資料庫的重要性
    作者：Stephen Thorn 翻譯：劉玲玲 原文：https://www.percona.com/blog/2020/10/08/the-criticality-of-a-kubernetes-operator-for-databases/ 一些剛接觸 Kubernetes 的公司嘗試使用傳統環 ...
  • 翻譯｜是否應該在 Kubernetes 上運行資料庫？
    資料庫如何在 Kubernetes 上運行？如果可以，哪些類型的資料庫和數據最適合使用 K8s？讓我們一起來看看。 Kubernetes 是用於自動部署、擴展和管理容器化應用程式的一個開源的容器編排解決方案。儘管 Kubernetes 最初是為無狀態應用程式設計的，但隨著有狀態工作負載的日益流行，K ...
  • DECIMAL 數據處理原理淺析
    註：本文分析內容基於 MySQL 8.0 版本 文章開始前先複習一下官方文檔關於 DECIMAL 類型的一些介紹： The declaration syntax for a DECIMAL column is DECIMAL(M,D). The ranges of values for the ar ...
  • 三道MySQL聯合索引面試題，淘汰80%的面試者，你能答對幾道
    眾所周知MySQL聯合索引遵循最左首碼匹配原則，在少數情況下也會不遵循（有興趣，可以翻一下上篇文章）。 創建聯合索引的時候，建議優先把區分度高的欄位放在第一列。 至於怎麼統計區分度，可以按照下麵這種方式。 ...
  • StoneDB社區答疑第二期
    我們又把近期的一些社區熱點問題做了一次彙總，同步給所有關註StoneDB的同學們~ 提問Qustions & 解答Answers Q：現在StoneDB單機什麼硬體規格部署能分析100TB級別的數據？ A：像這麼大的存儲量，系統一般是分析類的，存儲可以是單塊盤容量是7.6TB的SSD，CPU核數和主 ...
  • Vue3 和 Vue2 的異同及開發中具體區別
    總體來說 性能提升 重寫了虛擬DOM的實現（跳過靜態節點，只處理動態節點） update性能提高1.3~2倍 服務端渲染速度提高了2~3倍 樹搖（Tree shaking） 可以將無用模塊“剪輯”掉，僅打包需要的 原理： ES6 Module引入進行靜態分析，故而編譯的時候正確判斷到底載入了那些模塊 ...
  • JavaScript快速入門-05-基本語句
    5 基本語句 5.1 if 語句 if 語句常用語法如下所示： if (condition) { statement1; } else { statement2; } 或 if (condition) { statement1; } else if { statement2; } else if { ...
  • 【全網最全】2022最新版前端 -- 面試題
    @(目錄) 點擊打開視頻講解面試技巧+面試全過程 一、HTML 1、語義話的目的是什麼？ 語義化的主要目的可以概括為用正確的標簽做正確的事 HTMl語義化可以讓頁面的內容結構化，以便於瀏覽器解析和搜索引擎解析， 並且提高了代碼的可讀性便於代碼維護， 2、HTML5新增元素 Canvas繪圖以及SVG ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類