Lernen Sie, benutzerdefinierte Hooks in React zu erstellen

1. Was sind benutzerdefinierte Hooks

Wiederverwendung der Logik

Einfach ausgedrückt können durch die Verwendung benutzerdefinierter Hooks bestimmte Komponentenlogiken in wiederverwendbare Funktionen extrahiert werden. Ein benutzerdefinierter Hook ist eine Javascript-Funktion, die ab use andere Hooks aufruft.

2. Wenn keine benutzerdefinierten Hooks verwendet werden

Beispiel 1: Wenn unsere gesamte Seite die Koordinaten der Mausbewegung des Benutzers abrufen muss, können wir ohne Verwendung des Hook-Codes schreiben

  const [Position, setzePosition] = useState({
    x: 0,
    j: 0
  })
  useEffect(() => {
    const verschieben = (e) => {
      setzePosition({ x: ex, y: ey })
    }
    document.addEventListener('Mausbewegung', Bewegung)
    zurückgeben () => {
      document.removeEventListener('Mausbewegung', Bewegung)
    }
  }, [])
  zurückkehren (
    <div>
      x:{position.x}
      y:{position.y}
    </div>
  )

Beispiel 2: Wenn wir auf unserer Seite ein Bild haben, das der Maus folgt, können wir es auch so schreiben, ohne den Hook-Code zu verwenden:

const [Position, setzePosition] = useState({
    x: 0,
    j: 0
  })
  useEffect(() => {
    const verschieben = (e) => {
      setzePosition({ x: ex, y: ey })
    }
    document.addEventListener('Mausbewegung', Bewegung)
    zurückgeben () => {
      document.removeEventListener('Mausbewegung', Bewegung)
    }
  }, [])
  zurückkehren (
    <div>
      <Bild
        quelle={img}
        Stil={{
          Position: 'absolut',
          oben: position.y,
          links: position.x,
        }}
        alt=""
      />
    </div>
  )

Offensichtlich haben die beiden obigen Beispiele unterschiedliche Präsentationseffekte, aber die verwendeten Logikcodes sind größtenteils gleich. Wir können Hooks verwenden, um die Logikcodes wiederzuverwenden.

3. Benutzerdefinierten Hook verwenden

Wir extrahieren den wiederverwendbaren Logikcode aus den beiden obigen Beispielen und erstellen eine neue Datei namens useMousePosition

importiere { useState, useEffect } von 'react'
exportiere Standardfunktion useMousePosition() {
  const [Position, setzePosition] = useState({
    x: 0,
    j: 0
  })
  useEffect(() => {
    const verschieben = (e) => {
      setzePosition({ x: ex, y: ey })
    }
    document.addEventListener('Mausbewegung', Bewegung)
    zurückgeben () => {
      document.removeEventListener('Mausbewegung', Bewegung)
    }
  }, [])
  Rücklaufposition
}

Wir haben diese Funktionalität in der Funktion useMousePosition extrahiert. Jetzt können wir es importieren, wo immer wir es verwenden möchten!

Verwenden Sie es schließlich wie eine normale Funktion

  const position = useMousePosition()
  zurückkehren (
    <div>
      x:{position.x}
      y:{position.y}
    </div>
  )

Offensichtlich wird die Codemenge reduziert

Dies ist das Ende dieses Artikels zum Erstellen von benutzerdefinierten Hooks in React. Weitere relevante Inhalte zu benutzerdefinierten Hooks in React finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!