那些关于DOM的常见Hook封装，你知道几个？

加深对 React hooks 的理解。

创新互联是一家专注于成都做网站、网站设计、外贸营销网站建设与策划设计,康巴什网站建设哪家好?创新互联做网站,专注于网站建设10年,网设计领域的专业建站公司;建站业务涵盖:康巴什等地区。康巴什做网站价格咨询:028-86922220

学习如何抽象自定义 hooks。构建属于自己的 React hooks 工具库。

培养阅读学习源码的习惯，工具库是一个对源码阅读不错的选择。

useEventListener

优雅的使用 addEventListener。

我们先来看看 addEventListener 的定义，以下来自 MDN 文档：

EventTarget.addEventListener() 方法将指定的监听器注册到 EventTarget 上，当该对象触发指定的事件时，指定的回调函数就会被执行。

这里的 EventTarget 可以是一个文档上的元素 Element,Document和Window 或者任何其他支持事件的对象 (比如 XMLHttpRequest)。

我们看 useEventListener 函数 TypeScript 定义，通过类型重载，它对 Element、Document、Window 等元素以及其事件名称和回调参数都做了定义。

function useEventListener(
  eventName: K,
  handler: (ev: HTMLElementEventMap[K]) => void,
  options?: Options,
): void;
function useEventListener(
  eventName: K,
  handler: (ev: ElementEventMap[K]) => void,
  options?: Options,
): void;
function useEventListener(
  eventName: K,
  handler: (ev: DocumentEventMap[K]) => void,
  options?: Options,
): void;
function useEventListener(
  eventName: K,
  handler: (ev: WindowEventMap[K]) => void,
  options?: Options,
): 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(
  // 触发函数
  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(options?: Options) {
  const { initialValue, transformer } = options || {};
  const [value, setValue] = useState(initialValue);
  // 自定义转换函数
  const transformerRef = useLatest(transformer);
  const reset = useCallback(() => setValue(initialValue), []);
  const onChange = useCallback((e: EventTarget) => {
    // 获取 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

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;
    }
  });
}

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]);
};