So verwenden Sie den Intersection Observer in React

Heute werden wir anhand einiger Beispiele untersuchen, wie die Schnittmengenbeobachter-API in React verwendet wird.

Die Mozilla-Webdokumentation beschreibt die Kreuzungsbeobachter-API wie folgt:

ermöglicht Code die Registrierung einer Rückruffunktion, die immer dann ausgeführt wird, wenn ein zu überwachendes Element ein anderes Element (oder das Ansichtsfenster) betritt oder verlässt oder wenn sich der Wert, um den sich die beiden überschneiden, um einen angeforderten Betrag ändert. Auf diese Weise müssen Websites nichts mehr im Hauptthread tun, um diese Art von Überschneidungen von Elementen zu beobachten, und der Browser kann die Überschneidungsverwaltung nach eigenem Ermessen optimieren.

Kurz gesagt ermöglicht es uns zu erkennen, wann ein bestimmtes Element im Ansichtsfenster sichtbar ist. Dies geschieht nur, wenn das Element das gewünschte Schnittverhältnis erfüllt.

Wie Sie sehen können, erhöht sich das Schnittverhältnis, wenn Sie auf der Seite nach unten scrollen, bis es den prognostizierten Grenzwert erreicht. In diesem Moment wird die Funktion ausgelöst, die einen Rückruf ausführt.

---

Erster Schritt

const observer = new IntersectionObserver(callbackFunction, options)
observer.observer(elementToObserver)

Das Konstruktorobjekt des Kreuzungsbeobachters benötigt zwei Argumente:

1. Eine Rückruffunktion
2. Optionen

Das ist alles, wir sind bereit, etwas zu sehen, aber zuerst müssen wir wissen, was jede Option bedeutet. Das Optionsargument ist ein Objekt mit den folgenden Werten:

const options = {
  root: null,
  rootMargin: "0px",
  threshold: 1
}

• root: Das Element, das als Ansichtsfenster verwendet wird, um die Sichtbarkeit des Ziels zu überprüfen. Muss der Vorfahre des Ziels sein. Standardmäßig wird das Browser-Ansichtsfenster verwendet, wenn nicht angegeben oder null.
• rootMargin: Dieser Wertesatz wird verwendet, um jede Seite des Begrenzungsrahmens des Wurzelelements zu vergrößern oder zu verkleinern, bevor die Schnittpunkte berechnet werden. Die Optionen ähneln denen für den Rand in CSS.
• Schwellenwert: Eine einzelne Zahl oder ein Zahlenarray, das angibt, bei welchem ​​Prozentsatz der Sichtbarkeit des Ziels der Beobachterrückruf ausgeführt werden soll, reicht von 0 bis 1,0, wobei 1,0 bedeutet, dass jedes Pixel im Ansichtsfenster sichtbar ist.

---

Verwendung in React

Jetzt sehen wir eine Implementierung der Kreuzungsbeobachter-API in React.

const observer = new IntersectionObserver(callbackFunction, options)
observer.observer(elementToObserver)

1. Beginnen Sie mit einem Verweis auf das Element, das wir beobachten möchten, und verwenden Sie den React-Hook useRef.
2. Erstellen Sie eine Statusvariable isVisible. Wir werden sie verwenden, um eine Nachricht anzuzeigen, wann immer sich unsere Box im Ansichtsfenster befindet.
3. Deklarieren Sie die Rückruffunktion, die ein Array von IntersectionObserverEntries als Parameter empfängt. Innerhalb dieser Funktion nehmen wir den ersten und einzigen Eintrag und prüfen, ob er sich mit dem Ansichtsfenster schneidet, und wenn ja, rufen wir setIsVisible mit dem Wert von Eintrag auf .isIntersecting (wahr / FALSCH).
4. Erstellen Sie das Optionsobjekt mit denselben Werten wie das Bild.
5. Fügen Sie den useEffect-React-Hook hinzu und erstellen Sie einen Beobachterkonstruktor mit der Callback-Funktion und den Optionen, die wir gerade zuvor erstellt haben. In unserem Fall ist es optional, aber es kann eine Bereinigungsfunktion zurückgeben, um die Überwachung unseres Ziels aufzuheben, wenn die Komponente nicht gemountet ist.
6. Setzen Sie die Variable useRef auf das Element, das wir beobachten möchten.

const options = {
  root: null,
  rootMargin: "0px",
  threshold: 1
}

1. Fügen wir diesem HTML etwas Stil hinzu.

1. Das ist alles, was wir brauchen, einfach und unkompliziert!

Denken Sie daran, dass dies nur eine grundlegende Implementierung ist und es mehrere Möglichkeiten gibt, dies zu tun.

---

Jetzt implementieren wir denselben Code wie zuvor, trennen jedoch die gesamte Logik in einem Nu-Hook namens useElementOnScreen.

const containerRef = useRef(null)
const [isVisible, setIsVisible] = useState(false)

const callbackFunction = (entries) => {
  const [entry] = entries
  setIsVisible(entry.isIntersecting)
}

const options = {
  root: null,
  rootMargin: "0px",
  threshold: 1.0
}

useEffect(() => {
  const observer = new IntersectionObserver(callbackFunction, options)
  if (containerRef.current) observer.observe(containerRef.current)

  return () => {
    if (containerRef.current) observer.unobserve(containerRef.current)
  }

}, [containerRef, options])

return (
  <div className="app">
    <div className="isVisible">{isVisible ? "IN VIEWPORT" : "NOT IN VIEWPORT"}</div>
    <div className="section"></div>
    <div className="box" ref={containerRef}>Observe me</div>
  </div>
)

1. Erstellen Sie eine neue Funktion namens useElementOnScreen mit Parameteroptionen
2. Verschieben Sie die gesamten useRef, useState und useEffect in unseren neuen Hook.
3. Jetzt fehlt in unserem Hook nur noch die Return-Anweisung, wir übergeben isVisible und containerRef als Array.
4. ok, wir haben es fast geschafft, wir müssen es nur noch in unserer Komponente aufrufen und sehen, ob es funktioniert!

<div className="box" ref={containerRef}>Observe me</div>

1- Importieren Sie den neu erstellten Hook in unsere Komponente.
2 – Initialisieren Sie es mit dem Optionsobjekt.
3 – So beenden wir es.

Herzlichen Glückwunsch, wir haben die Kreuzungsbeobachter-API erfolgreich verwendet und sogar einen Hook dafür erstellt!

---

Credits

Intersection Observer mit React, ursprünglich geschrieben von Produkthackern

Vielen Dank, dass Sie diesen Artikel gelesen haben. Ich hoffe, ich kann Ihnen einige nützliche Informationen liefern. Wenn ja, würde ich mich sehr freuen, wenn du diesen Beitrag weiterempfiehlst und auf den ♥-Button klickst, damit mehr Leute ihn sehen können.

Das obige ist der detaillierte Inhalt vonSo verwenden Sie den Intersection Observer in React. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!