Meistern Sie das unendliche Scrollen in einfachen Schritten

Unendliches Scrollen

Wir können unendliches Scrollen mithilfe der vom Browser bereitgestellten IntersectionObserver-API implementieren.
Zur Umsetzung können wir einfach diesen Schritten folgen :-

1. Wir können eine Schein-API für unser unendliches Scrollen verwenden und dann einen benutzerdefinierten Hook erstellen
2. Dieser benutzerdefinierte Hook übernimmt die Parameter der API als eigene Funktionsparameter.
3. Dann können wir einfach den API-Aufruf implementieren, indem wir useEffect und axios verwenden und die Parameter aus den Funktionsparametern übergeben.
4. Wir können Laden, Fehler, HasMore und Daten als Status haben
5. Wir können dann auch setTimeout verwenden, damit wir das Laden und das unendliche Scrollen ordnungsgemäß prüfen können
6. hasMore entspricht der Länge des Datenarrays, das wir derzeit auf der Seite anzeigen, verglichen mit dem, was wir vom API-Aufruf erhalten
7. Dies dient dazu, Anrufe zu vermeiden, selbst wenn wir das Ende unserer Datenmenge erreicht haben.
8. Sobald der benutzerdefinierte Hook auf unserer Hauptseite vorhanden ist, erstellen wir den Status der Parameter, die wir übergeben haben
9. Dann übergeben wir die Parameter an unsere benutzerdefinierten Hooks und rufen die Daten ab
10. Die Liste der Daten, die wir erhalten, rendern wir mithilfe einer Karte und zeigen sie dann an
11. Jetzt müssen wir den unendlichen Bildlauf anwenden, sobald wir das Ende erreicht haben, sodass wir für die letzten Elementdaten des Arrays, die wir erhalten, einfach eine Referenz hinzufügen
12. Diese Referenz entspricht einer useCallback-Funktion, deren Parameter dieses letzte Element ist.
13. Als nächstes erstellen wir eine useRef, deren Wert standardmäßig null ist
14. Jetzt prüfen wir, ob wir uns im Ladezustand befinden oder nicht. Wenn ja, kommen wir einfach wieder
15. Als nächstes prüfen wir, ob dieser aktuelle Wert von useRef null ist oder nicht. Wenn nicht null, trennen wir diesen Beobachter einfach. Die Idee dabei ist, dass der Beobachter jedes Mal neu sein sollte, da wir jedes Mal neue Daten haben werden
16. Jetzt werden wir diesen neuen Observer.current-Wert der Rückruffunktion durch den neuen IntersectionObserver zuweisen. Die IntersectionObserver-API gibt eine Rückruffunktion mit Einträgen als Parameter zurück.
17. Diese Einträge sind im Grunde der Wert unseres letzten Elements, wenn es sich auf der Seite befindet. Wir möchten die Bedingung, wann wir mit diesen Einträgen auf der Seite interagieren werden
18. Wir haben also für jeden Eintrag einen booleschen Wert. isIntersecting
19. Wenn dies zutrifft, werden wir die Parameter des benutzerdefinierten Hooks ändern. Dadurch wird wiederum die API erneut aufgerufen und auch erneut gerendert
20. Zuletzt müssen wir das Element beobachten, das wir im Rückruf übergeben haben. Wenn wir also das Element haben, beobachten wir es einfach.

Code

CustomHook.jsx

import axios from "axios";
import { useEffect, useState } from "react";
import { API_URL } from "../common/constants";

export const useAuthorList = (limit, page) => {
  const [isLoading, setIsLoading] = useState(false);
  const [authorList, setAuthorList] = useState([]);
  const [error, setError] = useState("");
  const [hasMore, setHasMore] = useState(true);

  useEffect(() => {
    setIsLoading(true);
    setTimeout(() => {
      axios({
        method: "GET",
        url: API_URL,
        params: { limit: limit, page: page },
      })
        .then((res) => {
          setAuthorList(res.data.data);
          setHasMore(res.data.data.length === limit);
          setIsLoading(false);
        })
        .catch((e) => setError(e));
    }, 500);
  }, [limit, page]);

  return [isLoading, authorList, error, hasMore];
};

App.jsx

import React, { useCallback, useRef, useState } from "react";
import { useAuthorList } from "./hooks/useAuthorList";
import { AuthorQuotes } from "./components/AuthorQuotes";

const App = () => {
  const [limit, setLimit] = useState(10);
  const [page, setPage] = useState(1);
  const [isLoading, authorList, error, hasMore] = useAuthorList(limit, page);

  const observer = useRef(null);
  const infiniteReference = useCallback(
    (element) => {
      if (isLoading) return;
      if (observer.current) {
        observer.current.disconnect();
      }

      observer.current = new IntersectionObserver((entries) => {
        if (entries[0].isIntersecting && hasMore) {
          setLimit((prev) => prev + 10);
        }
      });

      if (element) {
        observer.current.observe(element);
      }
    },
    [isLoading, hasMore]
  );

  return (
    <div className="author-quotes-list">
      {authorList.length > 0 &&
        authorList.map((authorQuotes, index) => {
          if (index + 1 === authorList.length) {
            return (
              <AuthorQuotes
                authorQuotes={authorQuotes}
                hasReference
                infiniteReference={infiniteReference}
              />
            );
          }
          return <AuthorQuotes authorQuotes={authorQuotes} />;
        })}
      {isLoading && <>Loading...</>}
    </div>
  );
};

export default App;

constants.js

export const API_URL = "https://api.javascripttutorial.net/v1/quotes/"

Das obige ist der detaillierte Inhalt vonMeistern Sie das unendliche Scrollen in einfachen Schritten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!