【解读 ahooks 源码系列】DOM篇（二）

前言

本文是 ahooks 源码系列的第二篇，往期文章

https://mp.csdn.net/mp_blog/creation/editor/129581436

• 本文主要解读 useEventTarget、useExternal、useTitle、useFavicon、useFullscreen、useHover 源码实现

useEventTarget

常见表单控件(通过 e.target.value 获取表单值) 的 onChange 跟 value 逻辑封装，支持自定义值转换和重置功能。

官方文档

export interface Options<T, U> {
  initialValue?: T; // 初始值
  transformer?: (value: U) => T; // 自定义回调值的转化
}
复制代码

基本用法

import React from 'react';
import { useEventTarget } from 'ahooks';

export default () => {
  const [value, { reset, onChange }] = useEventTarget({ initialValue: 'this is initial value' });

  return (
    <div>
      <input value={value} onChange={onChange} style={
  { width: 200, marginRight: 20 }} />
      <button type="button" onClick={reset}>
        reset
      </button>
    </div>
  );
};
复制代码

使用场景

适用于较为简单的表单受控控件（如 input 输入框）管理

实现思路

1. 监听表单的 onChange 事件，拿到值后更新 value 值
2. 支持自定义回调值的转化，对外暴露 value 值、onChange 和 reset 方法

核心实现

这个实现比较简单，这里结尾代码有个as const，它表示强制 TypeScript 将变量或表达式的类型视为不可变的

具体可以看下这篇文章： 杀手级的 TypeScript 功能：const 断言

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>) => {
    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; // 将数组变为只读元组，可以确保其内容不会在其声明和函数调用之间发生变化
}
复制代码

完整源码

useExternal

动态注入 JS 或 CSS 资源，useExternal 可以保证资源全局唯一。

官方文档

基本用法

import React from 'react';
import { useExternal } from 'ahooks';

export default () => {
  const status = useExternal('/useExternal/test-external-script.js', {
    js: {
      async: true,
    },
  });

  return (
    <>
      <p>
        Status: <b>{status}</b>
      </p>
      <p>
        Response: <i>{status === 'ready' ? window.TEST_SCRIPT?.start() : '-'}</i>
      </p>
    </>
  );
};
复制代码

实现思路

原理：通过 script 标签加载 JS 资源 / 创建 link 标签加载 CSS 资源，再通过创建标签返回的 Element 元素监听 load 和 error 事件 获取加载状态

1. 正则判断传入的路径 path 是 JS 还是 CSS
2. 加载 CSS/JS：创建 link/script 标签传入 path，支持传入 link/script 标签支持的属性，添加到 head/body 中，并返回 Element 元素与加载状态；这里需判断标签路径匹配是否存在，存在则返回上一次结果，以保证资源全局唯一
3. 利用创建标签返回的 Element 元素监听 load 和 error 事件&