Einführung

Wir sehen endloses Scrollen in Anwendungen und Webseiten, insbesondere in sozialen Medien, die von uns verlangen, dass wir einfach scrollen. Während gedankenloses Scrollen nicht gut ist, ist es großartig, eine eigene unendliche Schriftrolle zu erstellen. Als Entwickler sollten wir versuchen, Komponenten nachzubilden, die wir beim Surfen im Internet sehen. Es kann Sie herausfordern, mehr zu lernen und bei der Implementierung einiger Komponenten über den Tellerrand hinaus zu denken.

Außerdem können Sie, wenn Sie einen unendlichen Bildlauf in Ihre Anwendung implementieren möchten, der Anleitung folgen, um Ihren eigenen zu erstellen. Sie können Ihren eigenen Code hinzufügen, um das Verhalten des Scrollens zu verbessern.

In diesem Artikel werden wir eine Infinite-Scroll-Komponente von Grund auf erstellen. Folgende Themen werden behandelt:

• Umgebungseinrichtung
• Erstellen der Komponente
• CSS hinzufügen
• Optimierung des Infinite Scroll

Jetzt fangen wir an.

Umgebungseinrichtung

Wir werden CRA verwenden, um die grundlegende React-Anwendung zu erstellen. Sie können dies tun, indem Sie den folgenden Befehl ausführen:

    npx create-react-app infinite-scroll

Wenn Sie Vite oder NextJS möchten, können Sie dies auch tun. Abgesehen von geringfügigen Änderungen bleiben andere Dinge gleich.

Hinweis: Um diesen Befehl auszuführen, muss NodeJS vorinstalliert sein. Entfernen Sie außerdem einige unnötige Codebausteine ​​aus CRA.

Wir benötigen eine Abhängigkeit, um Daten von einer API abzurufen. Nachdem wir React eingestellt haben, können wir Axios mit dem folgenden Befehl installieren:

    npm install axios

Jetzt sind wir bereit, die Komponente zu erstellen.

App-Komponente

Wir werden eine Komponente erstellen, die beliebte Filmdaten von der Tmdb-API abruft. Der API-Schlüssel ist kostenlos auf der Website erhältlich. Lassen Sie uns zuerst den Ort erstellen, an dem die Daten abgerufen werden, und dann unendliche Bildlauffunktionen hinzufügen.

Hier ist der Code für die App-Komponente:

App.js

    import "./App.css";
    import { useState, useEffect } from "react";
    import axios from "axios";
    import { MovieCard } from "./MovieCard";

    function App() {
      const [page, setPage] = useState(1); // for number of page in tmdb 
      const [data, setData] = useState([]); // storing the fetched data
      const [loading, setLoading] = useState(false); // for setting loading state

      // fetching and stroring the data in the state
      const fetchMovie = async () => {
        const URL = `https://api.themoviedb.org/3/movie/popular?language=en-US&page=${page}`;
        const data = await axios.get(URL, {
          headers: {
            Authorization:
              "Bearer API KEY",
            Accept: "application/json",
          },
        });
        setData((prevData) => [...prevData, ...data.data.results]); // we are going to add the new data to current data.
        setLoading(false);
      };

      // useEffecte for invoking the function at the start
      useEffect(() => {
        fetchMovie();
      }, [page]);

      return (
        

          

            Popular movies according to Tmdb
            

              {data.length > 1 &&
                data.map((item) => {
                  return (
                    
                  );
                })}
              {loading && 
Loading....
}
            
          
      );
    }

    export default App;

Sie können den Code ziemlich gut verstehen, in dem wir die Daten abrufen und sie als Requisite an die MovieCard-Komponente übergeben.

Erstellen Sie eine MovieCard.js-Komponente zum Anzeigen der Informationen zu jedem Film.

MoveCard.js

    import React from "react";

    export const MovieCard = ({ title, description, imageURL, rating }) => {

      const imagePath = `https://image.tmdb.org/t/p/w500${imageURL}`; // poster image path URL 

      return (
        

          

            
{title}
            
{description}
            
{rating.toFixed(1)}⭐
          
        
      );
    };

Hier ist das CSS der Anwendung:

App.css

    .App {
      text-align: center;
    }

    .App-header {
      background-color: #282c34;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding-top: 1em;
      font-size: calc(10px   2vmin);
      color: white;
    }

    .movieCardContainer{
      margin-top: 1em;
      display: flex;
      flex-direction: column;
      gap: 1em;
      width: 60%;
      max-width: 800px;
    }

    .movieCard{
      display: flex;
    }

    .movieInfo{
      margin-left: 1em;
      text-align: left;
    }

    p{
      font-size: 18px;
    }

Unendliche Schriftrolle

Lassen Sie uns zunächst verstehen, wie wir die unendliche Schriftrolle erstellen werden. Dazu schauen wir uns die Position der Bildlaufleiste an. Wenn sich die Position der Bildlaufleiste knapp über dem Ende der Seite befindet, setzen wir den Ladestatus auf „True“.

Wir werden einen weiteren useEffect haben, der den Seitenstatus um 1 erhöht. Sobald die Seitennummer aktualisiert wird, wird der anfängliche useEffect ausgelöst, der die Seite als Abhängigkeit hat. Dadurch wird die Funktion fetchMovie() aufgerufen, um die Daten abzurufen.

EventListner zu Scroll hinzufügen

Zuerst werden wir „Sogar abhören“ hinzufügen, um zu erfahren, wann sich die Position der Bildlaufleiste ändert.

    window.addEventListener("scroll", handleScroll);

handleScroll

Wenn der Bildlauf erfolgt, prüfen wir, ob sich die aktuelle Position der Bildlaufleiste direkt über dem unteren Rand der Webseite befindet (dh der gesamte vertikale Bildlaufbereich). Wenn ja, ändern wir den Ladezustand auf „True“.

    const handleScroll = () => {
      if (document.body.scrollHeight - 300 

• scrollHeight: Dies ist die Eigenschaft, die die Gesamthöhe des Inhalts zurückgibt, einschließlich des Teils, der auf dem Bildschirm nicht sichtbar ist. Es handelt sich also um den gesamten scrollbaren Bereich.
• scrollY: Diese Eigenschaft gibt die Anzahl der Pixel zurück, um die das Dokument vertikal von oben gescrollt wurde. Es handelt sich also um den Bereich, der gescrollt wurde.
• innerHeight: Dies ist die Eigenschaft, die die Höhe des Windows-Inhaltsbereichs des Browsers zurückgibt. Es wird die Breite der Bildlaufleiste sein. Es wird scrollY hinzugefügt, sodass der Abruf erfolgt, wenn wir den Inhalt erreicht haben, und nicht, wenn wir den Inhalt übergeben haben. ## useEffect

Nach erfolgreicher Änderung des Ladezustands können wir einen useEffect implementieren, um die Seitenzahl zu erhöhen. Damit das Abrufen der Filmdaten erfolgen kann.

    useEffect(() => {
      if (loading == true) {
        setPage((prevPage) => prevPage   1);
      }
    }, [loading]);

    // other useEffect that we already implemented

    useEffect(() => {
      fetchMovie();
    }, [page]);

Optimierung des EventListner

Da Scrollen beim Scrollen mehrmals handleScroll auslösen kann, führt dies zu unnötigen mehrfachen Aufrufen der Funktion. Wir können der Funktion Entprellen hinzufügen, sodass es einige Zeit dauern kann, bis die Funktion aufgerufen wird.

    // debounce function
    function debounce(func, delay) {
      let timeoutId;
      return function (...args) {
        if (timeoutId) {
          clearTimeout(timeoutId);
        }
        timeoutId = setTimeout(() => {
          func(...args);
        }, delay);
      };
    }

    // adding debounce to the eventListner
    window.addEventListener("scroll", debounce(handleScroll, 500));

Hier ist der vollständige Code von App.js:

    import "./App.css";
    import { useState, useEffect } from "react";
    import axios from "axios";
    import { MovieCard } from "./MovieCard";

    function App() {
      const [page, setPage] = useState(1);
      const [data, setData] = useState([]);
      const [loading, setLoading] = useState(false);
      const fetchMovie = async () => {

        const URL = `https://api.themoviedb.org/3/movie/popular?language=en-US&page=${page}`;
        const data = await axios.get(URL, {
          headers: {
            Authorization:
              "Bearer API KEY",
            Accept: "application/json",
          },
        });
        setData((prevData) => [...prevData, ...data.data.results]);
        setLoading(false);
      };
      useEffect(() => {
        fetchMovie();
      }, [page]);

      const handleScroll = () => {
        if (
          document.body.scrollHeight - 300  {
            func(...args);
          }, delay);
        };
      }

      window.addEventListener("scroll", debounce(handleScroll, 500));

      useEffect(() => {
        if (loading == true) {
          setPage((prevPage) => prevPage   1);
        }
      }, [loading]);

      return (
        

          

            Popular movies according to Tmdb
            

              {data.length > 1 &&
                data.map((item) => {
                  return (
                    
                  );
                })}
              {loading && 
Loading....
}
            
          
      );
    }

    export default App;

Hier ist das GIF, das die Funktionsweise der Anwendung demonstriert.

Abschluss

Das Erstellen einer Infinite-Scroll-Komponente in React kann eine äußerst lohnende Erfahrung sein. Es verbessert nicht nur Ihr Verständnis der Funktionsweise des Scrollens, sondern vermittelt Ihnen auch etwas über Zustandsverwaltung, Ereignis-Listener und Optimierungstechniken wie Entprellen. Wenn Sie dieser Anleitung folgen, verfügen Sie nun über ein grundlegendes Infinite-Scroll-Setup, das Sie entsprechend Ihren Anforderungen anpassen und verbessern können.

Ganz gleich, ob Sie Filmdaten, Blogbeiträge oder andere Inhalte anzeigen, diese Komponente dient als solide Grundlage. Denken Sie daran, dass der Schlüssel darin liegt, ein reibungsloses Benutzererlebnis zu gewährleisten, indem Sie sorgfältig verwalten, wann und wie Daten abgerufen werden, während der Benutzer scrollt. Viel Spaß beim Codieren!