React前端DOM常見Hook封裝示例上

Posted on by

引言

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

  • 加深對 React hooks 的理解。
  • 學習如何抽象自定義 hooks。構建屬於自己的 React hooks 工具庫。
  • 培養閱讀學習源碼的習慣，工具庫是一個對源碼閱讀不錯的選擇。

上一篇我們探討瞭 ahooks 對 DOM 類 Hooks 使用規范，以及源碼中是如何去做處理的。接下來我們就針對關於 DOM 的各個 Hook 封裝進行解讀。

useEventListener

優雅的使用 addEventListener。

我們先來看看 addEventListener 的定義，以下來自 MDN 文檔：

EventTarget.addEventListener() 方法將指定的監聽器註冊到 EventTarget 上，當該對象觸發指定的事件時，指定的回調函數就會被執行。

這裡的 EventTarget 可以是一個文檔上的元素 Element,Document和Window 或者任何其他支持事件的對象 (比如 XMLHttpRequest)。

我們看 useEventListener 函數 TypeScript 定義，通過類型重載，它對 Element、Document、Window 等元素以及其事件名稱和回調參數都做瞭定義。

function useEventListener<K extends keyof HTMLElementEventMap>(
  eventName: K,
  handler: (ev: HTMLElementEventMap[K]) => void,
  options?: Options<HTMLElement>,
): void;
function useEventListener<K extends keyof ElementEventMap>(
  eventName: K,
  handler: (ev: ElementEventMap[K]) => void,
  options?: Options<Element>,
): void;
function useEventListener<K extends keyof DocumentEventMap>(
  eventName: K,
  handler: (ev: DocumentEventMap[K]) => void,
  options?: Options<Document>,
): void;
function useEventListener<K extends keyof WindowEventMap>(
  eventName: K,
  handler: (ev: WindowEventMap[K]) => void,
  options?: Options<Window>,
): void;
function useEventListener(eventName: string, handler: noop, options: Options): void;

內部代碼比較簡單：

  • 判斷是否支持 addEventListener，支持則將參數進行傳遞。可以留意註釋中的幾個參數的作用，當做復習，這裡不展開細說。
  • useEffect 的返回邏輯，也就是組件卸載的時候，會自動清除事件監聽器，避免產生內存泄露。
function useEventListener(
  // 事件名稱
  eventName: string,
  // 處理函數
  handler: noop,
  // 設置
  options: Options = {},
) {
  const handlerRef = useLatest(handler);
  useEffectWithTarget(
    () => {
      const targetElement = getTargetElement(options.target, window);
      if (!targetElement?.addEventListener) {
        return;
      }
      const eventListener = (event: Event) => {
        return handlerRef.current(event);
      };
      // 監聽事件
      targetElement.addEventListener(eventName, eventListener, {
        // listener 會在該類型的事件捕獲階段傳播到該 EventTarget 時觸發。
        capture: options.capture,
        // listener 在添加之後最多隻調用一次。如果是 true，listener 會在其被調用之後自動移除。
        once: options.once,
        // 設置為 true 時，表示 listener 永遠不會調用 preventDefault() 。如果 listener 仍然調用瞭這個函數，客戶端將會忽略它並拋出一個控制臺警告
        passive: options.passive,
      });
      // 移除事件
      return () => {
        targetElement.removeEventListener(eventName, eventListener, {
          capture: options.capture,
        });
      };
    },
    [eventName, options.capture, options.once, options.passive],
    options.target,
  );
}

useClickAway

監聽目標元素外的點擊事件。

提到這個的應用場景，應該是模態框，點擊外部陰影部分，自動關閉的場景。那這裡它是怎麼實現的呢？

首先它支持傳遞 DOM 節點或者 Ref，並且是支持數組方式。 事件默認是支持 click，開發者可以自行傳遞並支持數組方式。

export default function useClickAway<T extends Event = Event>(
  // 觸發函數
  onClickAway: (event: T) => void,
  // DOM 節點或者 Ref，支持數組
  target: BasicTarget | BasicTarget[],
  // 指定需要監聽的事件，支持數組
  eventName: string | string[] = 'click',
) {
}

然後內部通過 document.addEventListener 監聽事件。組件卸載的時候清除事件監聽。

// 事件列表
const eventNames = Array.isArray(eventName) ? eventName : [eventName];
// document.addEventListener 監聽事件，通過事件代理的方式知道目標節點
eventNames.forEach((event) => document.addEventListener(event, handler));
return () => {
  eventNames.forEach((event) => document.removeEventListener(event, handler));
};

最後看 handler 函數，通過 event.target 獲取到觸發事件的對象 (某個 DOM 元素) 的引用，判斷假如不在傳入的 target 列表中，則觸發定義好的 onClickAway 函數。

const handler = (event: any) => {
  const targets = Array.isArray(target) ? target : [target];
  if (
    // 判斷點擊的 DOM Target 是否在定義的 DOM 元素（列表）中
    targets.some((item) => {
      const targetElement = getTargetElement(item);
      return !targetElement || targetElement.contains(event.target);
    })
  ) {
    return;
  }
  // 觸發點擊事件
  onClickAwayRef.current(event);
};

小結一下，useClickAway 就是使用瞭事件代理的方式，通過 document 監聽事件，判斷觸發事件的 DOM 元素是否在 target 列表中，從而決定是否要觸發定義好的函數。

useEventTarget

常見表單控件(通過 e.target.value 獲取表單值) 的 onChange 跟 value 邏輯封裝，支持自定義值轉換和重置功能。

直接看代碼，比較簡單，其實就是監聽表單的 onChange 事件，拿到值後更新 value 值，更新的邏輯支持自定義。

function useEventTarget<T, U = T>(options?: Options<T, U>) {
  const { initialValue, transformer } = options || {};
  const [value, setValue] = useState(initialValue);
  // 自定義轉換函數
  const transformerRef = useLatest(transformer);
  const reset = useCallback(() => setValue(initialValue), []);
  const onChange = useCallback((e: EventTarget<U>) => {
    // 獲取 e.target.value 的值，並進行設置
    const _value = e.target.value;
    if (isFunction(transformerRef.current)) {
      return setValue(transformerRef.current(_value));
    }
    // no transformer => U and T should be the same
    return setValue(_value as unknown as T);
  }, []);
  return [
    value,
    {
      onChange,
      reset,
    },
  ] as const;
}

useTitle

用於設置頁面標題。

這個頁面標題指的是瀏覽器 Tab 中展示的。通過 document.title 設置。

代碼非常簡單，一看就會：

function useTitle(title: string, options: Options = DEFAULT_OPTIONS) {
  const titleRef = useRef(isBrowser ? document.title : '');
  useEffect(() => {
    document.title = title;
  }, [title]);
  useUnmount(() => {
    // 組件卸載後，恢復上一次的 title
    if (options.restoreOnUnmount) {
      document.title = titleRef.current;
    }
  });
}

useFavicon

設置頁面的 favicon。

favicon 指的是頁面 Tab 的這個 ICON。

原理是通過 link 標簽設置 favicon。

const useFavicon = (href: string) => {
  useEffect(() => {
    if (!href) return;
    const cutUrl = href.split('.');
    const imgSuffix = cutUrl[cutUrl.length - 1].toLocaleUpperCase() as ImgTypes;
    const link: HTMLLinkElement =
      document.querySelector("link[rel*='icon']") || document.createElement('link');
    // 用於定義鏈接的內容的類型。
    link.type = ImgTypeMap[imgSuffix];
    // 指定被鏈接資源的URL。
    link.href = href;
    // 此屬性命名鏈接文檔與當前文檔的關系。
    link.rel = 'shortcut icon';
    document.getElementsByTagName('head')[0].appendChild(link);
  }, [href]);
};

以上就是React前端DOM常見Hook封裝示例上的詳細內容，更多關於React前端DOM Hook封裝的資料請關註WalkonNet其它相關文章！

推薦閱讀：