日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

加深對(duì) React hooks 的理解。

創(chuàng)新互聯(lián)是一家專(zhuān)注于成都做網(wǎng)站、網(wǎng)站設(shè)計(jì)、外貿(mào)營(yíng)銷(xiāo)網(wǎng)站建設(shè)與策劃設(shè)計(jì),康巴什網(wǎng)站建設(shè)哪家好?創(chuàng)新互聯(lián)做網(wǎng)站,專(zhuān)注于網(wǎng)站建設(shè)10年,網(wǎng)設(shè)計(jì)領(lǐng)域的專(zhuān)業(yè)建站公司;建站業(yè)務(wù)涵蓋:康巴什等地區(qū)。康巴什做網(wǎng)站價(jià)格咨詢(xún):028-86922220

學(xué)習(xí)如何抽象自定義 hooks。構(gòu)建屬于自己的 React hooks 工具庫(kù)。

培養(yǎng)閱讀學(xué)習(xí)源碼的習(xí)慣，工具庫(kù)是一個(gè)對(duì)源碼閱讀不錯(cuò)的選擇。

useEventListener

優(yōu)雅的使用 addEventListener。

我們先來(lái)看看 addEventListener 的定義，以下來(lái)自 MDN 文檔：

EventTarget.addEventListener() 方法將指定的監(jiān)聽(tīng)器注冊(cè)到 EventTarget 上，當(dāng)該對(duì)象觸發(fā)指定的事件時(shí)，指定的回調(diào)函數(shù)就會(huì)被執(zhí)行。

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

我們看 useEventListener 函數(shù) TypeScript 定義，通過(guò)類(lèi)型重載，它對(duì) Element、Document、Window 等元素以及其事件名稱(chēng)和回調(diào)參數(shù)都做了定義。

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;

內(nèi)部代碼比較簡(jiǎn)單：

• 判斷是否支持 addEventListener，支持則將參數(shù)進(jìn)行傳遞?？梢粤粢庾⑨屩械膸讉€(gè)參數(shù)的作用，當(dāng)做復(fù)習(xí)，這里不展開(kāi)細(xì)說(shuō)。
• useEffect 的返回邏輯，也就是組件卸載的時(shí)候，會(huì)自動(dòng)清除事件監(jiān)聽(tīng)器，避免產(chǎn)生內(nèi)存泄露。

function useEventListener(
  // 事件名稱(chēng)
  eventName: string,
  // 處理函數(shù)
  handler: noop,
  // 設(shè)置
  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);
      };

      // 監(jiān)聽(tīng)事件
      targetElement.addEventListener(eventName, eventListener, {
        // listener 會(huì)在該類(lèi)型的事件捕獲階段傳播到該 EventTarget 時(shí)觸發(fā)。
        capture: options.capture,
        // listener 在添加之后最多只調(diào)用一次。如果是 true，listener 會(huì)在其被調(diào)用之后自動(dòng)移除。
        once: options.once,
        // 設(shè)置為 true 時(shí)，表示 listener 永遠(yuǎn)不會(huì)調(diào)用 preventDefault() 。如果 listener 仍然調(diào)用了這個(gè)函數(shù)，客戶(hù)端將會(huì)忽略它并拋出一個(gè)控制臺(tái)警告
        passive: options.passive,
      });

      // 移除事件
      return () => {
        targetElement.removeEventListener(eventName, eventListener, {
          capture: options.capture,
        });
      };
    },
    [eventName, options.capture, options.once, options.passive],
    options.target,
  );
}

useClickAway

監(jiān)聽(tīng)目標(biāo)元素外的點(diǎn)擊事件。

提到這個(gè)的應(yīng)用場(chǎng)景，應(yīng)該是模態(tài)框，點(diǎn)擊外部陰影部分，自動(dòng)關(guān)閉的場(chǎng)景。那這里它是怎么實(shí)現(xiàn)的呢？

首先它支持傳遞 DOM 節(jié)點(diǎn)或者 Ref，并且是支持?jǐn)?shù)組方式。事件默認(rèn)是支持 click，開(kāi)發(fā)者可以自行傳遞并支持?jǐn)?shù)組方式。

export default function useClickAway(
  // 觸發(fā)函數(shù)
  onClickAway: (event: T) => void,
  // DOM 節(jié)點(diǎn)或者 Ref，支持?jǐn)?shù)組
  target: BasicTarget | BasicTarget[],
  // 指定需要監(jiān)聽(tīng)的事件，支持?jǐn)?shù)組
  eventName: string | string[] = 'click',
) {
}

然后內(nèi)部通過(guò) document.addEventListener 監(jiān)聽(tīng)事件。組件卸載的時(shí)候清除事件監(jiān)聽(tīng)。

// 事件列表
const eventNames = Array.isArray(eventName) ? eventName : [eventName];
// document.addEventListener 監(jiān)聽(tīng)事件，通過(guò)事件代理的方式知道目標(biāo)節(jié)點(diǎn)
eventNames.forEach((event) => document.addEventListener(event, handler));
return () => {
  eventNames.forEach((event) => document.removeEventListener(event, handler));
};

最后看 handler 函數(shù)，通過(guò) event.target 獲取到觸發(fā)事件的對(duì)象 (某個(gè) DOM 元素) 的引用，判斷假如不在傳入的 target 列表中，則觸發(fā)定義好的 onClickAway 函數(shù)。

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

小結(jié)一下，useClickAway 就是使用了事件代理的方式，通過(guò) document 監(jiān)聽(tīng)事件，判斷觸發(fā)事件的 DOM 元素是否在 target 列表中，從而決定是否要觸發(fā)定義好的函數(shù)。

useEventTarget

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

直接看代碼，比較簡(jiǎn)單，其實(shí)就是監(jiān)聽(tīng)表單的 onChange 事件，拿到值后更新 value 值，更新的邏輯支持自定義。

function useEventTarget(options?: Options) {
  const { initialValue, transformer } = options || {};
  const [value, setValue] = useState(initialValue);
  // 自定義轉(zhuǎn)換函數(shù)
  const transformerRef = useLatest(transformer);
  const reset = useCallback(() => setValue(initialValue), []);
  const onChange = useCallback((e: EventTarget) => {
    // 獲取 e.target.value 的值，并進(jìn)行設(shè)置
    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(() => {
    // 組件卸載后，恢復(fù)上一次的 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');
    // 用于定義鏈接的內(nèi)容的類(lèi)型。
    link.type = ImgTypeMap[imgSuffix];
    // 指定被鏈接資源的URL。
    link.href = href;
    // 此屬性命名鏈接文檔與當(dāng)前文檔的關(guān)系。
    link.rel = 'shortcut icon';

    document.getElementsByTagName('head')[0].appendChild(link);
  }, [href]);
};