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!