Reactjs-Tutorial: Unendliches Scrollen mit Intersection Observer.

Was ist unendliches Scrollen und was ist dafür nötig?

Scrollen ist eine Benutzeraktion, bei der ein Teil des Inhalts auf einer Webseite horizontal oder vertikal (in den meisten Fällen) verschoben wird.

So wie Sie es tun werden, während Sie diesen Artikel lesen.

By Infinite bedeutet, dass neue Inhalte automatisch geladen werden, wenn Sie auf der Webseite nach unten scrollen.

Na gut, aber warum sollte es jemand umsetzen?

Auffindbarkeit

Stellen wir uns vor, es wäre ein Black-Friday-Sale in Ihrem Lieblings-E-Commerce-Shop.

Sie haben auf der Erkundungsseite einige Produkte gefunden, aber als Sie zum Ende der Webseite scrollen, haben Sie anstelle weiterer Produkte eine Schaltfläche gefunden, die Sie zur nächsten Produktliste führt.

Sie können die neuen Produkte sehen (aber nur für den Fall, dass Sie diese Aktionsschaltfläche bemerken).

Unendliches Scrollen hilft Benutzern lediglich, mehr Inhalte zu finden, die sie sonst möglicherweise verpasst hätten.

Durchführung

Um unendliches Scrollen zu implementieren, müssen wir überprüfen, ob der Benutzer das Ende der Seite oder des Containers erreicht hat.

Aber die Position des Scrollens zu erkennen ist sehr teuer und seine Positionswerte sind aufgrund unterschiedlicher Browser und Geräte unzuverlässig.

Eine Möglichkeit besteht also darin, den letzten Inhalt (Element) der Seite und seinen Schnittpunkt mit dem Ansichtsfenster oder einem Container anzusehen.

Wie finden wir den Schnittpunkt?

Kreuzungsbeobachter

Es handelt sich um eine Web-API, die die Beobachtung des Elements am Ende des Inhalts oder der Liste ermöglicht.

Wenn dieses Element („Sentinel“) sichtbar wird (das Ansichtsfenster schneidet), löst es eine Rückruffunktion aus.

Mit dieser Funktion können wir mehr Daten abrufen und in die Webseite laden.

Diese ganze Beobachtung erfolgt asynchron, wodurch die Auswirkungen auf den Hauptthread minimiert werden.

---

Um Intersection Observer in Reactjs zu implementieren, nehmen wir ein Beispiel eines Social-Feeds, in dem wir in der Beitragsliste endlos scrollen.

Werfen Sie einen Blick auf diese Komponente und Sie können die Aufschlüsselung der einzelnen Teile direkt darunter verfolgen.

import { useEffect, useRef, useState } from "react";

interface IIntersectionObserverProps {}

const allItems = [
  "https://picsum.photos/200",
  "https://picsum.photos/200",
  "https://picsum.photos/200",
  "https://picsum.photos/200",
];

const IntersectionObserverImplement: React.FunctionComponent<
  IIntersectionObserverProps
> = (props) => {
  const cardRefs = useRef<(HTMLDivElement | null)[]>([]); // Initialize as an empty array
  const containerRef = useRef<HTMLDivElement | null>(null);
  const [listItems, setListItems] = useState(allItems);

  useEffect(() => {
    const options = {
      root: containerRef.current,
      rootMargin: "0px",
      threshold: 0.5,
    };
    const observer = new IntersectionObserver((entries, observer) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          setListItems((prevItems) => [
            ...prevItems,
            "https://picsum.photos/200",
          ]);
          observer.unobserve(entry.target); // Stop observing the current element
        }
      });
    }, options);

    // Observe the last card only
    const lastCard = cardRefs.current[listItems.length - 1];

    if (lastCard) {
      observer.observe(lastCard);
    }

    return () => observer.disconnect(); // Clean up observer on unmount
  }, [listItems]);

  return (
    <div className="container" ref={containerRef}>
      {listItems.map((eachItem, index) => (
        <div
          className="card"
          ref={(el) => (cardRefs.current[index] = el)} // Assign refs correctly
          key={index}
        >
          <h5>Post {index}</h5>
          <img width={"200"} height={"150"} src={eachItem} />
        </div>
      ))}
    </div>
  );
};

export default IntersectionObserverImplement;

Das Ziel besteht darin, zu erkennen, wann der letzte Beitrag in der Feed-Liste (der sogenannte Sentinel) sich mit dem Ansichtsfenster schneidet. Sobald dies geschieht, werden weitere Beiträge geladen und angezeigt.

---

A. Initialisierungsstatus und Refs

const cardRefs = useRef<(HTMLDivElement | null)[]>([]); // For storing references to each card
const containerRef = useRef<HTMLDivElement | null>(null); // Reference to the scrollable container
const [listItems, setListItems] = useState(allItems); // State to hold the list of items

cardRefs Ein Array zur Verfolgung der DOM-Elemente, die Karten in der Liste darstellen.

containerRef Bezieht sich auf den scrollbaren Container.

listItems Enthält das Array der aktuell sichtbaren Elemente auf der Seite.

B. Rendern der Liste und Zuweisen von Referenzen

return (
  <div className="container" ref={containerRef}>
    {listItems.map((eachItem, index) => (
      <div
        className="card"
        ref={(el) => (cardRefs.current[index] = el)} // Assign a ref to each card
        key={index}
      >
        <h5>Post {index}</h5>
        <img width={"200"} height={"150"} src={eachItem} />
      </div>
    ))}
  </div>
);

containerRef Markiert den Container, in dem gescrollt wird.

cardRefs Weist jeder Karte in der Liste eine Referenz zu. Dadurch wird sichergestellt, dass wir dem Beobachter mitteilen können, welches Element überwacht werden soll (z. B. die letzte Karte).

Zuordnung über listItems, um jedes Element in der Liste darzustellen.
Jedes Div ist als Karte gestaltet und verfügt über einen eindeutigen Schlüssel für React.

C. Beobachten Sie den letzten Beitrag (Punkt).

import { useEffect, useRef, useState } from "react";

interface IIntersectionObserverProps {}

const allItems = [
  "https://picsum.photos/200",
  "https://picsum.photos/200",
  "https://picsum.photos/200",
  "https://picsum.photos/200",
];

const IntersectionObserverImplement: React.FunctionComponent<
  IIntersectionObserverProps
> = (props) => {
  const cardRefs = useRef<(HTMLDivElement | null)[]>([]); // Initialize as an empty array
  const containerRef = useRef<HTMLDivElement | null>(null);
  const [listItems, setListItems] = useState(allItems);

  useEffect(() => {
    const options = {
      root: containerRef.current,
      rootMargin: "0px",
      threshold: 0.5,
    };
    const observer = new IntersectionObserver((entries, observer) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          setListItems((prevItems) => [
            ...prevItems,
            "https://picsum.photos/200",
          ]);
          observer.unobserve(entry.target); // Stop observing the current element
        }
      });
    }, options);

    // Observe the last card only
    const lastCard = cardRefs.current[listItems.length - 1];

    if (lastCard) {
      observer.observe(lastCard);
    }

    return () => observer.disconnect(); // Clean up observer on unmount
  }, [listItems]);

  return (
    <div className="container" ref={containerRef}>
      {listItems.map((eachItem, index) => (
        <div
          className="card"
          ref={(el) => (cardRefs.current[index] = el)} // Assign refs correctly
          key={index}
        >
          <h5>Post {index}</h5>
          <img width={"200"} height={"150"} src={eachItem} />
        </div>
      ))}
    </div>
  );
};

export default IntersectionObserverImplement;

Optionsobjekt

const cardRefs = useRef<(HTMLDivElement | null)[]>([]); // For storing references to each card
const containerRef = useRef<HTMLDivElement | null>(null); // Reference to the scrollable container
const [listItems, setListItems] = useState(allItems); // State to hold the list of items

root Dies gibt den scrollenden Container an.

containerRef.current bezieht sich auf das Div, das alle Karten umschließt.
Wenn root null ist, wird standardmäßig das Ansichtsfenster beobachtet.

rootMargin: Definiert zusätzlichen Rand um die Wurzel.

„0px“ bedeutet kein zusätzlicher Platz. Sie können Werte wie „100px“ verwenden, um den Beobachter früher auszulösen (z. B. wenn das Element kurz vor dem Erscheinen steht).

Schwellenwert: Bestimmt, wie viel vom Zielelement sichtbar sein muss, damit der Beobachter auslöst.

0,5 bedeutet, dass der Rückruf ausgelöst wird, wenn 50 % der letzten Karte sichtbar sind.

Den Beobachter erstellen

return (
  <div className="container" ref={containerRef}>
    {listItems.map((eachItem, index) => (
      <div
        className="card"
        ref={(el) => (cardRefs.current[index] = el)} // Assign a ref to each card
        key={index}
      >
        <h5>Post {index}</h5>
        <img width={"200"} height={"150"} src={eachItem} />
      </div>
    ))}
  </div>
);

IntersectionObserver Akzeptiert eine Rückruffunktion und das zuvor definierte Optionsobjekt.

Der Rückruf wird immer dann ausgeführt, wenn ein beobachtetes Element die in den Optionen angegebenen Bedingungen erfüllt.

Der Eingabeparameter ist ein Array beobachteter Elemente. Jeder Eintrag enthält Informationen darüber, ob das Element sich schneidet (sichtbar).

Wenn enter.isIntersecting wahr ist, bedeutet dies, dass die letzte Karte jetzt sichtbar ist:

1. Fügen Sie mit setListItems ein neues Element zur Liste hinzu.
2. Beobachten Sie das aktuelle Element (entry.target), um redundante Auslöser zu verhindern.

Die letzte Karte beobachten

 useEffect(() => {
    const options = {
      root: containerRef.current,
      rootMargin: "0px",
      threshold: 0.5,
    };
    const observer = new IntersectionObserver((entries, observer) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          setListItems((prevItems) => [
            ...prevItems,
            "https://picsum.photos/200",
          ]);
          observer.unobserve(entry.target); // Stop observing the current element
        }
      });
    }, options);

    // Observe each card
    const lastCard = cardRefs.current[listItems.length - 1];

    if (lastCard) {
      observer.observe(lastCard);
    }

    return () => observer.disconnect(); // Clean up observer on unmount
  }, [listItems]);

cardRefs.current: Verfolgt Referenzen auf alle Karten.

listItems.length – 1: Identifiziert das letzte Element in der Liste.

Wenn eine lastCard vorhanden ist, beginnen Sie mit der Beobachtung mit Observer.observe(lastCard).

Der Beobachter überwacht diese Karte und löst den Rückruf aus, wenn sie sichtbar wird.

Aufräumen

const options = {
  root: containerRef.current, // Observe within the container
  rootMargin: "0px",         // No margin around the root container
  threshold: 0.5,           // Trigger when 50% of the element is visible
};

observer.disconnect() entfernt alle von diesem useEffect erstellten Beobachter.

Dadurch wird sichergestellt, dass die alten Beobachter bereinigt werden, wenn die Komponente ausgehängt oder erneut gerendert wird.

---

Was passiert in jeder Phase?

1. Benutzerschriftrollen

Wenn der Benutzer scrollt, wird die letzte Karte angezeigt

2. Kreuzungsbeobachter-Trigger

Wenn 50 % der letzten Karte sichtbar sind, erfolgt der Rückruf des Beobachters
läuft.

3. Elemente hinzufügen

Der Rückruf fügt der Liste neue Elemente hinzu (setListItems).

4. Wiederholen

Der Beobachter trennt die Verbindung zur alten letzten Karte und verbindet sie mit
die neue letzte Karte.

So können wir unendliches Scrollen mit Intersection Observer implementieren.

Ich hoffe, das war hilfreich :)

Vielen Dank.

Das obige ist der detaillierte Inhalt vonReactjs-Tutorial: Unendliches Scrollen mit Intersection Observer.. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!