Ahooks 中那些控制“時機”的 Hook 都是怎么實現的？

作者：Gopal 2022-06-10 08:01:01

在 Function Component 中，使用 useEffect/useLayoutEffect 完成了 Class Components 生命周期的職責。ahooks 也是基于這兩個封裝了常見的代碼執行時機，使用這些 hook，可以讓我們的代碼更加具有可讀性以及邏輯更加清晰。

本文是深入淺出 ahooks 源碼系列，這個系列的目標主要有以下幾點：

加深對 React hooks 的理解。

學習如何抽象自定義 hooks。構建屬于自己的 React hooks 工具庫。

培養閱讀學習源碼的習慣，工具庫是一個對源碼閱讀不錯的選擇。

注：本系列對 ahooks 的源碼解析是基于 v3.3.13。自己 folk 了一份源碼，主要是對源碼做了一些解讀，可見詳情[1]。

本文來探索一下 ahooks 是怎么封裝 React 的一些執行“時機”的？

Function Component VS Class Component

學習類似 React 和 Vue 這種框架，對它們生命周期的掌握都是必須的，我們需要清楚的知道我們代碼的執行順序，并且在不同的階段執行不同操作的代碼，比如需要掛載完成之后才去獲取 dom 的值，否則可能會獲取不到相應的值。

Class Component

使用過 React 的 Class Component 的同學，就會知道其組件生命周期會分成三個狀態：

Mounting(掛載)：已插入真實 DOM
Updating(更新)：正在被重新渲染
Unmounting(卸載)：已移出真實 DOM

簡單版如下所示：

其中每個狀態中還會按順序調用不同的方法，對應的詳細如下（這里不展開說）：

可以通過官方提供這個網站查看詳情[2]

可以看到，會有非常多的生命周期方法，而且在不同的版本，生命周期方法還不同。

Function Component

到了 Function Component ，會發現沒有直接提及生命周期的概念，它是更徹底的狀態驅動，它只有一個狀態，React 負責將狀態渲染到視圖中。

對于 Function Component 來說由狀態到頁面渲染只有三步：

輸入狀態（prop、state）
執行組件的邏輯，并在 ?useEffect/useLayoutEffect 中訂閱副作用
輸出UI（Dom節點）

重點是第二步，React 通過 useEffect/useLayoutEffect 訂閱副作用。Class Component 中的生命周期都可以通過 useEffect/useLayoutEffect 來實現。它們兩個的功能非常相似，我們這里看下 useEffect。

使用 useEffect 相當于告訴 React 組件需要在渲染后執行某些操作，React 將在執行 DOM 更新之后調用它。React 保證了每次運行 useEffect 的時候，DOM 已經更新完畢。這就實現了 Class Component 中的 Mounting(掛載階段)。

當狀態發生變化的時候，它能夠執行對應的邏輯、更行狀態并將結果渲染到視圖中，這就完成了 Class Component 中的 Updating（更新階段）。

最后通過在 useEffect 中返回一個函數，它便可以清理副作用。它的規則是：

首次渲染不會進行清理，會在下一次渲染，清除上一次的副作用。
卸載階段也會執行清除操作。

通過返回一個函數，我們就能實現 Class Component 中的 Unmounting(卸載階段)。

基于 useEffect/useLayoutEffect，ahooks 做了一些封裝，能夠讓你更加清晰的知道你的代碼執行時機。

LifeCycle - 生命周期

useMount

只在組件初始化時執行的 Hook。useEffect 依賴假如為空，只會在組件初始化的時候執行。

// 省略部分代碼
const useMount = (fn: () => void) => {
  // 省略部分代碼
  // 單純就在 useEffect 基礎上封裝了一層
  useEffect(() => {
    fn?.();
  }, []);
};

export default useMount;

useUnmount

useUnmount，組件卸載（unmount）時執行的 Hook。

useEffect 可以在組件渲染后實現各種不同的副作用。有些副作用可能需要清除，所以需要返回一個函數，這個函數會在組件卸載的時候執行。

const useUnmount = (fn: () => void) => {
  const fnRef = useLatest(fn);

  useEffect(
    // 在組件卸載（unmount）時執行的 Hook。
    // useEffect 的返回值中執行函數
    () => () => {
      fnRef.current();
    },
    [],
  );
};

export default useUnmount;

useUnmountedRef

獲取當前組件是否已經卸載的 Hook。

通過判斷有沒有執行 useEffect 中的返回值判斷當前組件是否已經卸載。

// 獲取當前組件是否已經卸載的 Hook。
const useUnmountedRef = () => {
  const unmountedRef = useRef(false);
  useEffect(() => {
    unmountedRef.current = false;
    // 如果已經卸載，則會執行 return 中的邏輯
    return () => {
      unmountedRef.current = true;
    };
  }, []);
  return unmountedRef;
};

export default useUnmountedRef;

Effect

這里只會講官方文檔 Effect 下面的幾個，有部分是定時器、防抖節流等，咱們后面的系列具體分析。

useUpdateEffect 和 useUpdateLayoutEffect

useUpdateEffect 和 useUpdateLayoutEffect 的用法跟 useEffect 和 useLayoutEffect 一樣，只是會忽略首次執行，只在依賴更新時執行。

實現思路：初始化一個標識符，剛開始為 false。當首次執行完的時候，置為 true。只有標識符為 true 的時候，才執行回調函數。

// 忽略首次執行
export const createUpdateEffect: (hook: effectHookType) => effectHookType =
  (hook) => (effect, deps) => {
    const isMounted = useRef(false);

    // for react-refresh
    hook(() => {
      return () => {
        isMounted.current = false;
      };
    }, []);

    hook(() => {
      // 首次執行完時候，設置為 true，從而下次依賴更新的時候可以執行邏輯
      if (!isMounted.current) {
        isMounted.current = true;
      } else {
        return effect();
      }
    }, deps);
  };

useDeepCompareEffect和useDeepCompareLayoutEffect

用法與 useEffect 一致，但 deps 通過 lodash isEqual 進行深比較。

通過 useRef 保存上一次的依賴的值，跟當前的依賴對比（使用 lodash 的 isEqual），并將對比結果作為 useEffect 的依賴項，從而決定回調函數是否執行。

const depsEqual = (aDeps: DependencyList, bDeps: DependencyList = []) => {
  return isEqual(aDeps, bDeps);
};

const useDeepCompareEffect = (effect: EffectCallback, deps: DependencyList) => {
  // 通過 useRef 保存上一次的依賴的值
  const ref = useRef<DependencyList>();
  const signalRef = useRef<number>(0);

  // 判斷最新的依賴和舊的區別
  // 如果相等，則變更 signalRef.current，從而觸發 useEffect 中的回調
  if (!depsEqual(deps, ref.current)) {
    ref.current = deps;
    signalRef.current += 1;
  }

  useEffect(effect, [signalRef.current]);
};

useUpdate

useUpdate 會返回一個函數，調用該函數會強制組件重新渲染。

返回的函數通過變更 useState 返回的 state，從而促使組件進行更新。

import { useCallback, useState } from 'react';

const useUpdate = () => {
  const [, setState] = useState({});
  // 通過設置一個全新的狀態，促使 function 組件更新
  return useCallback(() => setState({}), []);
};

export default useUpdate;

總結與思考

在我們寫代碼的時候需要清晰的知道，組件的生命周期是怎樣的，我們代碼的執行順序、執行的時機是怎樣的。

參考資料

[1]詳情: https://github.com/GpingFeng/hooks

[2]詳情: https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/

[3]大家都能看得懂的源碼（一）ahooks 整體架構篇: https://juejin.cn/post/7105396478268407815

[4]如何使用插件化機制優雅的封裝你的請求hook : https://juejin.cn/post/7105733829972721677

[5]ahooks 是怎么解決 React 的閉包問題的？: https://juejin.cn/post/7106061970184339464

[6]ahooks 是怎么解決用戶多次提交問題？: https://juejin.cn/post/7106461530232717326

責任編輯：武曉燕來源：前端雜貨鋪