קוראים כמוך עוזרים לתמוך ב-MUO. כאשר אתה מבצע רכישה באמצעות קישורים באתר שלנו, אנו עשויים להרוויח עמלת שותף.

האם אי פעם נתקלת באתר או באפליקציה שטוענת ומציגה יותר תוכן תוך כדי גלילה? לזה אנחנו קוראים מגילה אינסופית.

גלילה אינסופית היא טכניקה פופולרית שמפחיתה את מספר טעינת הדפים. זה יכול גם ליצור חווית משתמש חלקה יותר, במיוחד במכשירים ניידים.

ישנן כמה דרכים שונות שבהן תוכל ליישם גלילה אינסופית ב-React.js. דרך אחת היא להשתמש בספרייה כמו react-infinite-scroll-component. ספריה זו מספקת רכיב שיפעיל אירוע כאשר המשתמש גולל לתחתית העמוד. לאחר מכן תוכל להשתמש באירוע זה כדי לטעון תוכן נוסף.

דרך נוספת ליישם גלילה אינסופית היא להשתמש בפונקציות המובנות ש-React מספקת. פונקציה אחת כזו היא "componentDidMount" אשר React קורא כאשר רכיב מותקן לראשונה.

אתה יכול להשתמש בפונקציה זו כדי לטעון את אצווה הנתונים הראשונה ולאחר מכן להשתמש בפונקציה "componentDidUpdate" כדי לטעון נתונים נוספים כאשר המשתמש גולל מטה. אתה יכול גם השתמש בווי React כדי להוסיף תכונת גלילה אינסופית.

כדי להשתמש ב-react-infinite-scroll-component, עליך להתקין אותו תחילה באמצעות npm:

instagram viewer 
npm להתקין להגיב-אינסופי-גְלִילָה-רְכִיב --להציל

לאחר מכן, תוכל לייבא אותו לרכיב React שלך.

יְבוּא לְהָגִיב מ 'לְהָגִיב'
יְבוּא גלילה אינסופית מ 'react-infinite-croll-component'
מעמדאפליקציהמשתרעלְהָגִיב.רְכִיב{
בַּנַאִי() {
סוּפֶּר()
זֶה.state = {
פריטים: [],
 יש יותר: נָכוֹן
 }
 }


componentDidMount() {
זֶה.fetchData(1)
 }


fetchData = (עמוד) => {
const newItems = []


ל (לתת אני = 0; אני < 100; i++) {
פריטים חדשים.לִדחוֹף(אני )
 }


if (עמוד 100) {
זֶה.setState({ יש יותר: false })
 }


זֶה.setState({ פריטים: [...this.state.items, ...newItems] })
 }


render() {
לַחֲזוֹר (
<div>
<h1>גלילה אינסופית</h1>
<גלילה אינסופית
 dataLength={זֶה.state.items.length}
 הבא={זֶה.fetchData}
 hasMore={זֶה.state.hasMore}
 מטעין={<h4>טוען...</h4>}
 endMessage={
<p style={{ textAlign: 'מֶרְכָּז' }}>
<ב>יש! ראית הכל</ב>
</p>
 }
>
 {זֶה.state.items.map((item, index) => (
<מפתח div={index}>
 {פריט}
</div>
 ))}
</InfiniteScroll>
</div>
 )
 }
}
יְצוּאבְּרִירַת מֶחדָל אפליקציה

קוד זה מתחיל בייבוא ​​React ורכיב InfiniteScroll מספריית react-infinite-scroll-component. לאחר מכן הוא יוצר רכיב מצב ומאתחל את המצב עם ריק פריטים מערך וא יש יותר הדגל מוגדר כאמת.

בשיטת מחזור החיים componentDidMount, אתה קורא ל- fetchData שיטה עם א עמוד פרמטר של 1. שיטת fetchData מבצעת קריאת API כדי לקבל נתונים מסוימים. הדוגמה הזו רק מייצרת כמה נתוני דמה. לאחר מכן הוא יוצר מערך של 100 פריטים.

אם פרמטר העמוד הוא 100, אין יותר פריטים, אז הגדר את הדגל hasMore ל-false. זה ימנע מרכיב InfiniteScroll לבצע קריאות API נוספות. לבסוף, הגדר את המצב באמצעות הנתונים החדשים.

שיטת העיבוד משתמשת ברכיב InfiniteScroll ועוברת בחלק מהאביזרים. משענת dataLength מוגדרת לאורך מערך הפריטים. הפריט הבא מוגדר לשיטת fetchData. האביזר hasMore מוגדר לדגל hasMore. משענת הטעינה גורמת לרכיב להציג את תוכנו כמחוון טעינה. באופן דומה, הוא יציג את מאפיין endMessage כהודעה כאשר כל הנתונים יסתיימו לטעון.

ישנם גם אביזרים אחרים שתוכלו להעביר לרכיב InfiniteScroll, אבל אלו הם אלה שתשתמשו בתדירות הגבוהה ביותר.

שימוש בפונקציות מובנות

ל-React יש גם כמה שיטות מובנות בהן תוכלו להשתמש כדי ליישם גלילה אינסופית.

השיטה הראשונה היא componentDidUpdate. React קורא לשיטה זו לאחר עדכון שלה רכיב. אתה יכול להשתמש בשיטה זו כדי לבדוק אם המשתמש גלל לתחתית העמוד, ואם כן, לטעון נתונים נוספים.

השיטה השנייה היא גְלִילָה, אשר React מתקשר כאשר המשתמש גולל. אתה יכול להשתמש בשיטה זו כדי לעקוב אחר מיקום הגלילה. אם המשתמש גלל לתחתית העמוד, תוכל לטעון נתונים נוספים.

הנה דוגמה כיצד תוכל להשתמש בשיטות אלה כדי ליישם גלילה אינסופית:

יְבוּא תגובה, {useState, useEffect} מ 'לְהָגִיב'
פוּנקצִיָהאפליקציה() {
const [items, setItems] = useState([])
const [hasMore, setHasMore] = useState(נָכוֹן)
const [page, setPage] = useState(1)


useEffect(() => {
 fetchData (עמוד)
 }, [עמוד])


const fetchData = (דף) => {
const newItems = []


ל (לתת אני = 0; אני < 100; i++) {
פריטים חדשים.לִדחוֹף(אני)
 }


if (עמוד 100) {
 setHasMore(שֶׁקֶר)
 }


setItems([...פריטים, ...פריטים חדשים])
 }


const onScroll = () => {
const scrollTop = מסמך.documentElement.scrollTop
const scrollHeight = מסמך.documentElement.scrollHeight
const clientHeight = מסמך.documentElement.clientHeight


if (scrollTop + clientHeight >= scrollHeight) {
 setPage (עמוד + 1)
 }
 }


useEffect(() => {
 window.addEventListener('גְלִילָה', על גלילה)
 החזר () => window.removeEventListener('גְלִילָה', על גלילה)
 }, [פריטים])


לַחֲזוֹר (
<div>
 {items.map((item, index) => (
<מפתח div={index}>
 {פריט}
</div>
 ))}
</div>
 )
}
יְצוּאבְּרִירַת מֶחדָל אפליקציה

קוד זה משתמש ב-useState ו-useEffect hooks כדי לנהל מצב ותופעות לוואי.

ב-useEffect hook, הוא קורא לשיטת fetchData עם העמוד הנוכחי. שיטת fetchData מבצעת קריאת API כדי לקבל נתונים מסוימים. בדוגמה זו, אתה רק יוצר כמה נתוני דמה כדי להדגים את הטכניקה.

לולאת for מאכלסת את מערך newItems ב-100 מספרים שלמים. אם פרמטר העמוד הוא 100, הגדר את הדגל hasMore ל-false. זה ימנע מרכיב InfiniteScroll לבצע קריאות API נוספות. לבסוף, הגדר את המצב עם הנתונים החדשים.

שיטת onScroll עוקבת אחר מיקום הגלילה. אם המשתמש גלל לתחתית העמוד, תוכל לטעון נתונים נוספים.

ה-useEffect הוק מוסיף מאזין אירועים עבור אירוע הגלילה. כאשר אירוע הגלילה מופעל, הוא קורא לשיטת onScroll.

יש יתרונות וחסרונות לשימוש בגלילה אינסופית. זה יכול לעזור לשפר את ממשק המשתמש, וליצור חוויה חלקה יותר, במיוחד במכשירים ניידים. עם זאת, זה יכול גם לגרום למשתמשים שחסרים תוכן מכיוון שהם עלולים לא לגלול מספיק למטה כדי לראות אותו.

חשוב לשקול את היתרונות והחסרונות של טכניקת הגלילה האינסופית לפני הטמעתו באתר או באפליקציה שלך.

הוספת גלילה אינסופית לאתר או לאפליקציה שלך React.js יכולה לעזור לשפר את חווית המשתמש. עם גלילה אינסופית, משתמשים לא צריכים ללחוץ כדי לראות תוכן נוסף. שימוש ב-Infinite Scroll באפליקציית React.js שלך יכול גם לעזור להפחית את מספר הטעינות של הדפים, מה שיכול לשפר את הביצועים.

אתה יכול גם לפרוס בקלות את אפליקציית React שלך לדפי Github בחינם.