ReactJS - Custom Hooks: Mastering Infinite Scroll

Hallo, ambitionierte React-Entwickler! Heute machen wir uns auf eine aufregende Reise in die Welt der benutzerdefinierten Hooks, insbesondere mit dem Fokus auf die Implementierung von unendlichem Scrolling. Als dein freundlicher Nachbarschaftsinformatiklehrer werde ich dich schrittweise durch diesen Prozess führen, damit du jedes Konzept unterwegs verstehst. Also hole dir dein Lieblingsgetränk, setze dich bequem hin, und tauchen wir ein!

Understanding Custom Hooks

Bevor wir uns dem unendlichen Scrolling zuwenden, lassen Sie uns einen Moment innehalten, um zu verstehen, was benutzerdefinierte Hooks sind. In React sind Hooks Funktionen, die es dir ermöglichen, in funktionalen Komponenten auf React-State und Lebenszyklusfunktionen zuzugreifen. Benutzerdefinierte Hooks sind einfach Funktionen, die andere Hooks verwenden und zwischen Komponenten geteilt werden können.

Stellen Sie sich benutzerdefinierte Hooks als Ihre persönliche Schweizer Army-Dose für die React-Entwicklung vor. Sie helfen Ihnen dabei, Komponentenlogik in wiederverwendbare Funktionen zu extrahieren, was Ihren Code sauberer und modularer macht.

Implementing Infinite Scroll Functionality

Nun, lassen Sie uns das Highlight unseres Programms angehen: das unendliche Scrolling. Sie haben wahrscheinlich diese Funktion auf sozialen Medienplattformen oder Nachrichten-Websites erlebt, bei der Inhalte weiter geladen werden, während Sie nach unten scrollen. Es ist eine großartige Möglichkeit, das Benutzererlebnis zu verbessern, indem mehr Inhalte nahtlos ohne die Notwendigkeit von Paginierung präsentiert werden.

The Basics of Infinite Scroll

Im Kern umfasst das unendliche Scrolling drei Hauptschritte:

1. Erkennen, wann der Benutzer ans Ende der Seite gescrollt ist
2. Auslösen einer Anfrage, um mehr Daten zu laden
3. Hinzufügen der neuen Daten zu den vorhandenen Inhalten

Lassen Sie uns dies in handhabbare Stücke zerlegen und unseren benutzerdefinierten Hook erstellen.

Implementing useInfiniteScroll Hook

Wir werden einen benutzerdefinierten Hook namens useInfiniteScroll erstellen. Dieser Hook wird die Logik für das Erkennen, wann mehr Inhalte geladen werden sollen, und stellt uns die notwendigen States und Funktionen zur Verfügung, um unendliches Scrolling in unseren Komponenten zu implementieren.

Hier ist die grundlegende Struktur unseres Hooks:

import { useState, useEffect } from 'react';

const useInfiniteScroll = (callback) => {
const [isFetching, setIsFetching] = useState(false);

useEffect(() => {
window.addEventListener('scroll', handleScroll);
return () => window.removeEventListener('scroll', handleScroll);
}, []);

useEffect(() => {
if (!isFetching) return;
callback();
}, [isFetching]);

function handleScroll() {
if (window.innerHeight + document.documentElement.scrollTop !== document.documentElement.offsetHeight || isFetching) return;
setIsFetching(true);
}

return [isFetching, setIsFetching];
};

export default useInfiniteScroll;

Lassen Sie uns dies Stück für Stück auseinandernehmen:

1. Wir importieren useState und useEffect aus React. Diese sind die Bausteine unseres benutzerdefinierten Hooks.

2. Unser useInfiniteScroll Hook nimmt eine callback-Funktion als Argument. Dies wird die Funktion sein, die mehr Daten lädt, wenn sie ausgelöst wird.

3. Wir erstellen eine State-Variablen isFetching mit useState. Dies wird verfolgen, ob wir derzeit Daten abrufen.

4. Der erste useEffect fügt einen Scroll-Event-Listener hinzu, wenn das Komponente montiert wird, und entfernt ihn, wenn das Komponente demontiert wird. Dies ist unsere Reinigung, um Speicherlecks zu verhindern.

5. Der zweite useEffect beobachtet Änderungen in isFetching. Wenn es wahr wird, ruft es unsere callback-Funktion auf, um mehr Daten zu laden.

6. Die handleScroll-Funktion ist där Ort, wo die Magie passiert. Sie überprüft, ob wir ans Ende der Seite gescrollt sind und ob wir keine Daten abrufen. Wenn beide Bedingungen erfüllt sind, setzt sie isFetching auf wahr.

7. Schließlich geben wir isFetching und setIsFetching zurück, damit die Komponente, die diesen Hook verwendet, diesen State und die Funktion zugreifen und aktualisieren kann.

Nun sehen wir, wie wir diesen Hook in einer Komponente verwenden können:

import React, { useState } from 'react';
import useInfiniteScroll from './useInfiniteScroll';

const InfiniteScrollComponent = () => {
const [items, setItems] = useState([]);
const [isFetching, setIsFetching] = useInfiniteScroll(fetchMoreListItems);

function fetchMoreListItems() {
// Simulieren eines API-Aufrufs
setTimeout(() => {
setItems(prevItems => ([...prevItems, ...Array(20).fill(0).map((_, i) => ({ id: prevItems.length + i, name: `Item ${prevItems.length + i + 1}` }))]));
setIsFetching(false);
}, 2000);
}

return (
<div>
<ul>
{items.map(item => <li key={item.id}>{item.name}</li>)}
</ul>
{isFetching && 'Fetching more list items...'}
</div>
);
};

export default InfiniteScrollComponent;

In dieser Komponente:

1. Wir verwenden unseren useInfiniteScroll Hook und übergeben ihm die fetchMoreListItems-Funktion.
2. fetchMoreListItems simuliert einen API-Aufruf, fügt nach einer 2-sekündigen Verzögerung 20 neue Elemente zur Liste hinzu.
3. Wir rendern unsere Listenelemente und zeigen eine Ladebotschaft an, wenn isFetching wahr ist.

Und das ist es! Eine voll funktionsfähige Implementierung von unendlichem Scrolling mit einem benutzerdefinierten React Hook.

Denken Sie daran, dass die Schönheit von benutzerdefinierten Hooks in ihrer Wiederverwendbarkeit liegt. Sie können diesen useInfiniteScroll Hook jetzt in jeder Komponente verwenden, die unendliches Scrolling benötigen.

Conclusion

Benutzerdefinierte Hooks sind eine mächtige Funktion in React, die es uns ermöglichen, wiederverwendbare Logik zu erstellen. Durch die Implementierung von unendlichem Scrolling als benutzerdefinierten Hook haben wir eine flexible, wiederverwendbare Lösung geschaffen, die leicht in verschiedene Komponenten integriert werden kann.

Während Sie Ihre Reise mit React fortsetzen, halten Sie die Exploration und Erstellung von benutzerdefinierten Hooks aufrecht. Sie sind eine großartige Möglichkeit, Ihren Code DRY (Don't Repeat Yourself) zu halten und eine saubere, modulare Codebasis zu erhalten.

Happy Coding, und mögen Ihre Scrolls unendlich sein! ??

Credits: Image by storyset