Πώς να προσθέσετε Infinite Scroll στο React.js
Έχετε συναντήσει ποτέ έναν ιστότοπο ή μια εφαρμογή που φορτώνει και εμφανίζει περισσότερο περιεχόμενο καθώς κάνετε κύλιση; Αυτό είναι αυτό που ονομάζουμε άπειρη κύλιση.
Η άπειρη κύλιση είναι μια δημοφιλής τεχνική που μπορεί να διευκολύνει την περιήγηση μεγάλων ποσοτήτων περιεχομένου. Μπορεί επίσης να προσφέρει μια πιο ομαλή εμπειρία χρήστη, ειδικά σε κινητές συσκευές.
Μπορείτε να εφαρμόσετε άπειρη κύλιση στο React με μερικούς διαφορετικούς τρόπους. Το πρώτο είναι να χρησιμοποιήσετε μια βιβλιοθήκη όπως το react-infinite-scroll-component. Το στοιχείο αυτής της βιβλιοθήκης ενεργοποιεί ένα συμβάν κάθε φορά που ο χρήστης κάνει κύλιση στο κάτω μέρος της σελίδας. Στη συνέχεια, μπορείτε να χρησιμοποιήσετε αυτό το συμβάν ως υπόδειξη για να φορτώσετε περισσότερο περιεχόμενο.
Ένας άλλος τρόπος για να εφαρμόσετε άπειρη κύλιση στο React είναι μέσω των ενσωματωμένων λειτουργιών του. Μια τέτοια συνάρτηση είναι το “componentDidMount”, το οποίο καλεί το React όταν προσαρτά για πρώτη φορά ένα στοιχείο.
Μπορείτε να χρησιμοποιήσετε αυτήν τη λειτουργία για να φορτώσετε την πρώτη παρτίδα δεδομένων, ακολουθούμενη από τη λειτουργία “componentDidUpdate” για να φορτώσετε τα επόμενα δεδομένα καθώς ο χρήστης κάνει κύλιση προς τα κάτω.
Μπορείτε επίσης να χρησιμοποιήσετε τα άγκιστρα React για να προσθέσετε μια άπειρη λειτουργία κύλισης.
Υπάρχουν μερικοί τρόποι για να χρησιμοποιήσετε το στοιχείο react-infinite-scroll-component.
Πίνακας περιεχομένων
Εγκαταστήστε το react-infinite-scroll-component
Για να ξεκινήσετε τη χρήση, πρέπει πρώτα να το εγκαταστήσετε μέσω npm:
npm install react-infinite-scroll-component --save
Εισαγάγετε το react-infinite-scroll-component στο React
Μετά την εγκατάσταση, πρέπει να εισαγάγετε την άπειρη βιβλιοθήκη κύλισης στο στοιχείο React.
import React from 'react'
import InfiniteScroll from 'react-infinite-scroll-component'
class App extends React.Component {
constructor() {
super()
this.state = {
items: [],
hasMore: true
}
}componentDidMount() {
this.fetchData(1)
}
fetchData = (page) => {
const newItems = []
for (let i = 0; i < 100; i++) {
newItems.push(i )
}
if (page === 100) {
this.setState({ hasMore: false })
}
this.setState({ items: [...this.state.items, ...newItems] })
}
render() {
return (
<div>
<h1>Infinite Scroll</h1>
<InfiniteScroll
dataLength={this.state.items.length}
next={this.fetchData}
hasMore={this.state.hasMore}
loader={<h4>Loading...</h4>}
endMessage={
<p style={{ textAlign: 'center' }}>
<b>Yay! You have seen it all</b>
</p>
}
>
{this.state.items.map((item, index) => (
<div key={index}>
{item}
</div>
))}
</InfiniteScroll>
</div>
)
}
}
export default App
Αυτός ο κώδικας ξεκινάει εισάγοντας το React και το στοιχείο InfiniteScroll από τη βιβλιοθήκη react-infinite-scroll-component. Στη συνέχεια, δημιουργεί ένα στοιχείο κατάστασης και το αρχικοποιεί με έναν κενό πίνακα στοιχείων και μια σημαία hasMore που έχει οριστεί σε True.
Ορισμός παραμέτρων
Στη μέθοδο κύκλου ζωής componentDidMount, πρέπει να καλέσετε τη μέθοδο fetchData με μια παράμετρο σελίδας που έχει οριστεί σε 1. Η μέθοδος fetchData πραγματοποιεί μια κλήση API για ανάκτηση δεδομένων. Αυτό το παράδειγμα react-infinite-scroller δημιουργεί ορισμένα εικονικά δεδομένα και δημιουργεί έναν πίνακα 100 στοιχείων.
Μόλις η παράμετρος σελίδας φτάσει το 100, καθώς δεν υπάρχουν άλλα στοιχεία, μπορείτε να ορίσετε τη σημαία hasMore σε False. Αυτό εμποδίζει το στοιχείο InfiniteScroll να πραγματοποιεί περαιτέρω κλήσεις API. Τέλος, ορίστε την κατάσταση χρησιμοποιώντας τα νέα δεδομένα.
Η μέθοδος απόδοσης χρησιμοποιεί το στοιχείο InfiniteScroll και περνά σε ορισμένα στηρίγματα. Η βάση dataLength ορίζεται στο μήκος του πίνακα στοιχείων. Η ακόλουθη βάση έχει οριστεί στη μέθοδο fetchData. Το στήριγμα hasMore ορίζεται ίσο με τη σημαία hasMore.
Η βάση φόρτωσης αναγκάζει το στοιχείο να αποδίδει τα περιεχόμενά του ως ένδειξη φόρτωσης. Ομοίως, θα αποδώσει το endMessage prop ως μήνυμα όταν ολοκληρωθεί η φόρτωση όλων των δεδομένων.
Μπορείτε να περάσετε άλλα στηρίγματα στο στοιχείο InfiniteScroll, αλλά αυτά είναι αυτά που θα χρησιμοποιείτε πιο συχνά.
Χρήση ενσωματωμένων λειτουργιών
Το React έχει επίσης ορισμένες ενσωματωμένες μεθόδους που μπορείτε να χρησιμοποιήσετε για να εφαρμόσετε το InfiniteScroll.
Η πρώτη μέθοδος είναι το componentDidUpdate. Το React καλεί αυτήν τη μέθοδο αφού ενημερώσει ένα στοιχείο. Μπορείτε να χρησιμοποιήσετε αυτήν τη μέθοδο για να ελέγξετε εάν ο χρήστης έχει κάνει κύλιση στο κάτω μέρος της σελίδας. Αν ναι, φορτώνει περισσότερα δεδομένα.
Η δεύτερη μέθοδος είναι η κύλιση, την οποία καλεί το React όταν ο χρήστης κάνει κύλιση. Μπορείτε να χρησιμοποιήσετε αυτήν τη μέθοδο για να παρακολουθείτε τη θέση κύλισης. Μπορείτε να φορτώσετε περισσότερα δεδομένα εάν ο χρήστης έχει κάνει κύλιση στο κάτω μέρος της σελίδας.
Ακολουθεί ένα παράδειγμα άπειρης κύλισης React που σας δείχνει πώς να χρησιμοποιήσετε αυτές τις μεθόδους:
import React, {useState, useEffect} from 'react'
function App() {
const [items, setItems] = useState([])
const [hasMore, setHasMore] = useState(true)
const [page, setPage] = useState(1)
useEffect(() => {
fetchData(page)
}, [page])
const fetchData = (page) => {
const newItems = []
for (let i = 0; i < 100; i++) {
newItems.push(i)
}
if (page === 100) {
setHasMore(false)
}
setItems([...items, ...newItems])
}
const onScroll = () => {
const scrollTop = document.documentElement.scrollTop
const scrollHeight = document.documentElement.scrollHeight
const clientHeight = document.documentElement.clientHeight
if (scrollTop + clientHeight >= scrollHeight) {
setPage(page + 1)
}
}
useEffect(() => {
window.addEventListener('scroll', onScroll)
return () => window.removeEventListener('scroll', onScroll)
}, [items])
return (
<div>
{items.map((item, index) => (
<div key={index}>
{item}
</div>
))}
</div>
)
}
export default App
Αυτός ο κώδικας χρησιμοποιεί τα άγκιστρα useState και useEffect για τη διαχείριση κατάστασης και παρενεργειών.
Μέσα στο άγκιστρο useEffect, καλεί τη μέθοδο fetchData με την τρέχουσα σελίδα. Η μέθοδος fetchData πραγματοποιεί μια κλήση API για ανάκτηση δεδομένων. Σε αυτό το παράδειγμα, απλώς δημιουργείτε μερικά εικονικά δεδομένα για να επιδείξετε την τεχνική.
Ο βρόχος for συμπληρώνει τον πίνακα newItems με 100 ακέραιους αριθμούς. Εάν η παράμετρος σελίδας είναι 100, ορίζει τη σημαία hasMore σε False. Αυτό εμποδίζει το στοιχείο άπειρης κύλισης να πραγματοποιεί περαιτέρω κλήσεις API.
Τέλος, ορίστε την κατάσταση με τα νέα δεδομένα.
Η μέθοδος onScroll παρακολουθεί τη θέση κύλισης. Μπορείτε να φορτώσετε περισσότερα δεδομένα εάν ο χρήστης κάνει κύλιση στο κάτω μέρος της σελίδας.
Το άγκιστρο useEffect προσθέτει ένα πρόγραμμα ακρόασης συμβάντων για το συμβάν κύλισης. Όταν ενεργοποιείται το συμβάν κύλισης, καλεί τη μέθοδο onScroll.
Υπάρχουν πλεονεκτήματα και μειονεκτήματα στη χρήση της άπειρης κύλισης του React. Βελτιώνει τη διεπαφή χρήστη, προσφέροντας μια πιο ομαλή εμπειρία, ειδικά σε κινητές συσκευές. Ωστόσο, μπορεί επίσης να οδηγήσει σε απώλεια περιεχομένου από τους χρήστες, καθώς ενδέχεται να μην κάνουν κύλιση προς τα κάτω αρκετά για να το δουν.
Είναι σημαντικό να σταθμίσετε τα πλεονεκτήματα και τα μειονεκτήματα της τεχνικής άπειρης κύλισης πριν την εφαρμόσετε στον ιστότοπο ή την εφαρμογή σας.
Η προσθήκη απεριόριστης κύλισης στον ιστότοπο ή την εφαρμογή React.js μπορεί να βελτιώσει την εμπειρία χρήστη. Με άπειρη κύλιση, οι χρήστες δεν χρειάζεται να κάνουν κλικ για να δουν περισσότερο περιεχόμενο. Η χρήση του Infinite Scroll στην εφαρμογή React.js μπορεί να μειώσει τον αριθμό των φορτώσεων σελίδων, γεγονός που βελτιώνει περαιτέρω την απόδοση.
Μπορείτε επίσης να αναπτύξετε εύκολα την εφαρμογή React στις σελίδες Github δωρεάν.