Πώς να προσθέσετε Infinite Scroll στο React.js

Αναγνώστες σαν εσάς βοηθούν στην υποστήριξη του MUO. Όταν κάνετε μια αγορά χρησιμοποιώντας συνδέσμους στον ιστότοπό μας, ενδέχεται να κερδίσουμε μια προμήθεια θυγατρικών.

Έχετε συναντήσει ποτέ έναν ιστότοπο ή μια εφαρμογή που φορτώνει και εμφανίζει περισσότερο περιεχόμενο καθώς κάνετε κύλιση; Αυτό είναι αυτό που ονομάζουμε άπειρη κύλιση.

Η άπειρη κύλιση είναι μια δημοφιλής τεχνική που μειώνει τον αριθμό των φορτώσεων σελίδων. Μπορεί επίσης να προσφέρει μια πιο ομαλή εμπειρία χρήστη, ειδικά σε κινητές συσκευές.

Υπάρχουν μερικοί διαφορετικοί τρόποι με τους οποίους μπορείτε να εφαρμόσετε άπειρη κύλιση στο React.js. Ένας τρόπος είναι να χρησιμοποιήσετε μια βιβλιοθήκη όπως το react-infinite-scroll-component. Αυτή η βιβλιοθήκη παρέχει ένα στοιχείο που θα ενεργοποιεί ένα συμβάν όταν ο χρήστης κάνει κύλιση στο κάτω μέρος της σελίδας. Στη συνέχεια, μπορείτε να χρησιμοποιήσετε αυτό το συμβάν για να φορτώσετε περισσότερο περιεχόμενο.

Ένας άλλος τρόπος για την υλοποίηση της άπειρης κύλισης είναι να χρησιμοποιήσετε τις ενσωματωμένες λειτουργίες που παρέχει το React. Μια τέτοια συνάρτηση είναι η "componentDidMount" την οποία καλεί το React όταν ένα στοιχείο προσαρτάται για πρώτη φορά.

Μπορείτε να χρησιμοποιήσετε αυτήν τη λειτουργία για να φορτώσετε την πρώτη παρτίδα δεδομένων και στη συνέχεια να χρησιμοποιήσετε τη συνάρτηση "componentDidUpdate" για να φορτώσετε περισσότερα δεδομένα όταν ο χρήστης κάνει κύλιση προς τα κάτω. Μπορείτε επίσης να χρησιμοποιήστε τα άγκιστρα React για να προσθέσετε μια άπειρη δυνατότητα κύλισης.

Για να χρησιμοποιήσετε το react-infinite-scroll-component, πρέπει πρώτα να το εγκαταστήσετε χρησιμοποιώντας το npm:

npm εγκαθιστώ αντιδρώ-άπειρο-πάπυρος-συστατικό --αποθηκεύσετε

Στη συνέχεια, μπορείτε να το εισαγάγετε στο στοιχείο React.

εισαγωγή Αντιδρώ από 'αντιδρώ'
εισαγωγή InfiniteScroll από 'react-infinite-scroll-component'
τάξηAppεκτείνεταιΑντιδρώ.Συστατικό{
κατασκευαστής() {
σούπερ()
Αυτό.state = {
είδη: [],
 έχει περισσότερα: αληθής
 }
 }
componentDidMount() {
Αυτό.fetchData(1)
 }
fetchData = (σελίδα) => {
συνθ newItems = []
Για (αφήνω i = 0; i < 100; i++) {
νέα αντικείμενα.Σπρώξτε(Εγώ )
 }
εάν (σελίδα 100) {
Αυτό.setState({ έχει περισσότερα: ψευδές })
 }
Αυτό.setState({ είδη: [...this.state.items, ...newItems] })
 }
render() {
ΕΠΙΣΤΡΟΦΗ (
<div>
<h1>Άπειρη κύλιση</h1>
<InfiniteScroll
 dataLength={Αυτό.state.items.length}
 επόμενο={Αυτό.fetchData}
 έχειΠερισσότερα={Αυτό.state.hasΠερισσότερα}
 φορτωτής={<h4>Φόρτωση...</h4>}
 endMessage={
<p style={{ textAlign: 'κέντρο' }}>
<σι>Ναι! Τα έχεις δει όλα</σι>
</Π>
 }
>
 {Αυτό.state.items.map((στοιχείο, ευρετήριο) => (
<κλειδί div={index}>
 {είδος}
</div>
 ))}
</InfiniteScroll>
</div>
 )
 }
}
εξαγωγήΠροκαθορισμένο App

Αυτός ο κώδικας ξεκινάει εισάγοντας το React και το στοιχείο InfiniteScroll από τη βιβλιοθήκη react-infinite-scroll-component. Στη συνέχεια δημιουργεί ένα στοιχείο κατάστασης και αρχικοποιεί την κατάσταση με ένα κενό είδη συστοιχία και α έχει περισσότερα η σημαία ορίστηκε σε true.

Στη μέθοδο κύκλου ζωής componentDidMount, καλείτε το fetchData μέθοδος με α σελίδα παράμετρος του 1. Η μέθοδος fetchData πραγματοποιεί μια κλήση API για λήψη δεδομένων. Αυτό το παράδειγμα δημιουργεί απλώς μερικά εικονικά δεδομένα. Στη συνέχεια δημιουργεί έναν πίνακα 100 στοιχείων.

Εάν η παράμετρος σελίδας είναι 100, δεν υπάρχουν άλλα στοιχεία, επομένως ορίστε τη σημαία hasMore σε false. Αυτό θα σταματήσει το στοιχείο InfiniteScroll από την πραγματοποίηση περαιτέρω κλήσεων API. Τέλος, ορίστε την κατάσταση χρησιμοποιώντας τα νέα δεδομένα.

Η μέθοδος απόδοσης χρησιμοποιεί το στοιχείο InfiniteScroll και περνά σε ορισμένα στηρίγματα. Η βάση dataLength ορίζεται στο μήκος του πίνακα στοιχείων. Το επόμενο prop ορίζεται στη μέθοδο fetchData. Το στήριγμα hasMore έχει οριστεί στη σημαία hasMore. Η βάση φόρτωσης αναγκάζει το στοιχείο να αποδίδει τα περιεχόμενά του ως ένδειξη φόρτωσης. Ομοίως, θα αποδώσει το endMessage prop ως μήνυμα όταν ολοκληρωθεί η φόρτωση όλων των δεδομένων.

Υπάρχουν επίσης άλλα στηρίγματα που μπορείτε να περάσετε στο στοιχείο InfiniteScroll, αλλά αυτά είναι αυτά που θα χρησιμοποιείτε πιο συχνά.

Χρήση ενσωματωμένων λειτουργιών

Το React έχει επίσης ορισμένες ενσωματωμένες μεθόδους που μπορείτε να χρησιμοποιήσετε για να εφαρμόσετε άπειρη κύλιση.

Η πρώτη μέθοδος είναι componentDidUpdate. Το React καλεί αυτήν τη μέθοδο μετά την ενημέρωση ενός στοιχείου. Μπορείτε να χρησιμοποιήσετε αυτήν τη μέθοδο για να ελέγξετε εάν ο χρήστης έχει κάνει κύλιση στο κάτω μέρος της σελίδας και, εάν ναι, να φορτώσει περισσότερα δεδομένα.

Η δεύτερη μέθοδος είναι πάπυρος, το οποίο καλεί το React όταν ο χρήστης κάνει κύλιση. Μπορείτε να χρησιμοποιήσετε αυτήν τη μέθοδο για να παρακολουθείτε τη θέση κύλισης. Εάν ο χρήστης έχει κάνει κύλιση στο κάτω μέρος της σελίδας, μπορείτε να φορτώσετε περισσότερα δεδομένα.

Ακολουθεί ένα παράδειγμα για το πώς θα μπορούσατε να χρησιμοποιήσετε αυτές τις μεθόδους για να εφαρμόσετε άπειρη κύλιση:

εισαγωγή React, {useState, useEffect} από 'αντιδρώ'
λειτουργίαApp() {
συνθ [στοιχεία, setItems] = useState([])
συνθ [hasMore, setHasMore] = useState(αληθής)
συνθ [σελίδα, setPage] = useState(1)
useEffect(() => {
 fetchData (σελίδα)
 }, [σελίδα])
συνθ fetchData = (σελίδα) => {
συνθ newItems = []
Για (αφήνω i = 0; i < 100; i++) {
νέα αντικείμενα.Σπρώξτε(Εγώ)
 }
εάν (σελίδα 100) {
 setHasΠερισσότερα(ψευδής)
 }
setItems([...στοιχεία, ...νέα είδη])
 }
συνθ onScroll = () => {
συνθ scrollTop = έγγραφο.documentElement.scrollTop
συνθ κύλιση Ύψος = έγγραφο.documentElement.scrollHeight
συνθ Ύψος πελάτη = έγγραφο.documentElement.clientHeight
εάν (scrollTop + clientHeight >= ύψος κύλισης) {
 setPage (σελίδα + 1)
 }
 }
useEffect(() => {
 window.addEventListener('πάπυρος', onScroll)
 επιστροφή () => window.removeEventListener('πάπυρος', onScroll)
 }, [στοιχεία])
ΕΠΙΣΤΡΟΦΗ (
<div>
 {items.map((στοιχείο, ευρετήριο) => (
<κλειδί div={index}>
 {είδος}
</div>
 ))}
</div>
 )
}
εξαγωγήΠροκαθορισμένο App

Αυτός ο κώδικας χρησιμοποιεί τα άγκιστρα useState και useEffect για τη διαχείριση κατάστασης και παρενεργειών.

Στο άγκιστρο useEffect, καλεί τη μέθοδο fetchData με την τρέχουσα σελίδα. Η μέθοδος fetchData πραγματοποιεί μια κλήση API για λήψη δεδομένων. Σε αυτό το παράδειγμα, απλώς δημιουργείτε μερικά εικονικά δεδομένα για να επιδείξετε την τεχνική.

Ο βρόχος for συμπληρώνει τον πίνακα newItems με 100 ακέραιους αριθμούς. Εάν η παράμετρος σελίδας είναι 100, ορίστε τη σημαία hasMore σε false. Αυτό θα σταματήσει το στοιχείο InfiniteScroll από την πραγματοποίηση περαιτέρω κλήσεων API. Τέλος, ορίστε την κατάσταση με τα νέα δεδομένα.

Η μέθοδος onScroll παρακολουθεί τη θέση κύλισης. Εάν ο χρήστης έχει κάνει κύλιση στο κάτω μέρος της σελίδας, μπορείτε να φορτώσετε περισσότερα δεδομένα.

Το άγκιστρο useEffect προσθέτει ένα πρόγραμμα ακρόασης συμβάντων για το συμβάν κύλισης. Όταν ενεργοποιείται το συμβάν κύλισης, καλεί τη μέθοδο onScroll.

Υπάρχουν πλεονεκτήματα και μειονεκτήματα στη χρήση της άπειρης κύλισης. Μπορεί να βοηθήσει στη βελτίωση της διεπαφής χρήστη, προσφέροντας μια πιο ομαλή εμπειρία, ειδικά σε κινητές συσκευές. Ωστόσο, μπορεί επίσης να οδηγήσει σε απώλεια περιεχομένου από τους χρήστες, καθώς ενδέχεται να μην κάνουν κύλιση προς τα κάτω αρκετά για να το δουν.

Είναι σημαντικό να σταθμίσετε τα υπέρ και τα κατά της τεχνικής της άπειρης κύλισης πριν το εφαρμόσετε στον ιστότοπο ή την εφαρμογή σας.

Η προσθήκη απεριόριστης κύλισης στον ιστότοπο ή την εφαρμογή σας στο React.js μπορεί να βοηθήσει στη βελτίωση της εμπειρίας χρήστη. Με άπειρη κύλιση, οι χρήστες δεν χρειάζεται να κάνουν κλικ για να δουν περισσότερο περιεχόμενο. Η χρήση του Infinite Scroll στην εφαρμογή React.js μπορεί επίσης να βοηθήσει στη μείωση του αριθμού των φορτώσεων σελίδων, κάτι που μπορεί να βελτιώσει την απόδοση.

Μπορείτε επίσης να αναπτύξετε εύκολα την εφαρμογή React στις σελίδες Github δωρεάν.