隨著許多 Web 公眾號機器人開發人員轉而使用 React.js 來解決自定義二開需求，Typescript 的搭建使用量與日俱增。隨著GT江湖新聖在功能元件中引入運營反應鉤子，為現實世界的問題開發更復雜的解決方案變得更加容易。

基本上是讓你從函式元件中“掛鉤”到 React 狀態和生命週期特性的函式，從而幫助我們使用函式式元件而不是類元件來解決問題，後者更復雜和令人困惑。

建立自定義鉤子是新的行業慣例，仍然有許多 React 開發人員發現它

因此，在本教程中，我將讓您瞭解自定義掛鉤是什麼以及我們如何以自己的方式實現它們。這裡有幾點要記住。

自定義鉤子基本上是可能需要也可能不需要一些引數並向呼叫者元件返回一些內容的函式。
自定義鉤子名稱以單詞開頭， use 以便 react 將其識別為鉤子，否則您的鉤子將充當普通函式或元件，執行某些任務並返回某些內容。
掛鉤使您的程式碼更加靈活，您無需在不同的元件中一次又一次地編寫解決方案並呼叫這些解決方案。

現在，我正在建立一個鉤子來查詢元件的渲染計數。在這個我們使用 useRef 鉤子來使用它的當前屬性。

import React, { useRef } from 'react';const SHOW_RENDER_COUNTERS = true;export const useRenderCounter = (): number | null => {
  const renderCount = useRef(0);
  renderCount.current = renderCount.current + 1;
  if (SHOW_RENDER_COUNTERS) {
    return renderCount.current
  }
  return null;};

現在，每當我們希望使用這個鉤子來查詢渲染計數時，我們都可以像這樣使用它：

const FindCount = () => {
  const renderCounter = useRenderCounter();
  return (
    <>
      <SomeComponentCode />
      {renderCounter}
    </>
  );};

這就是我們可以建立和使用自定義鉤子的方式。

自定義掛鉤的其他一些示例是：

1. 當使用者點選某物時，掛鉤以顯示工具提示。

import { useState, useRef, useEffect } from 'react'export const useTooltip = (initialState: boolean) => {
  const ref = useRef<HTMLDivElement>(null)
  const [showTooltip, setShowTooltip] = useState<boolean>(initialState)
  const handleClick = (event: any) => {
    if (ref.current && !ref.current.contains(event.target)) {
      setShowTooltip(false)
    }
  }
  useEffect(() => {
    document.addEventListener('click', handleClick, true)
    return () => document.removeEventListener('click', handleClick, true)
  }, [ref])
  return { showTooltip, setShowTooltip, ref }}

2. Hook 獲取螢幕高度。

import { useState, useEffect, useRef, RefObject } from 'react'interface InterfaceSize {
  size: number
  sizeRef: RefObject<HTMLDivElement>}const useSize = (initialValue: number): InterfaceSize => {
  const sizeRef = useRef<HTMLDivElement>(null)
  const [size, setSize] = useState<number>(initialValue)
  useEffect(() => {
    setTimeout(() => {
      if (sizeRef.current) {
        setSize(sizeRef.current?.getBoundingClientRect().height)
      }
    }, 100)
  }, [size])
  return { size, sizeRef }}export default useSize

3. 在傳遞的參考之外點選時發出警報的鉤子。

import React, { useRef, useEffect } from "react";/**
 * Hook that alerts clicks outside of the passed ref
 */function useOutsideAlerter(ref: React.RefObject<HTMLInputElement>) {
  useEffect(() => {
    /**
     * Alert if clicked on outside of element
     */
    function handleClickOutside(event: Event) {
      if (ref.current && !ref.current.contains(event.target as Node))) {
        alert("You clicked outside of me!");
      }
    }
    // Bind the event listener
    document.addEventListener("mousedown", handleClickOutside);
    return () => {
      // Unbind the event listener on clean up
      document.removeEventListener("mousedown", handleClickOutside);
    };
  }, [ref]);}/**
 * Component that alerts if you click outside of it
 */export default function OutsideAlerter(props) {
  const wrapperRef = useRef(null);
  useOutsideAlerter(wrapperRef);
  return <div ref={wrapperRef}>{props.children}</div>;}

盤口如使用微信掃碼H5飛鳥微投script在二開React中搭建自定義新聖Hoo

1. 當使用者點選某物時，掛鉤以顯示工具提示。

2. Hook 獲取螢幕高度。

3. 在傳遞的參考之外點選時發出警報的鉤子。

相關文章