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

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

ב-React, אתה יכול לבחור להשתמש ברכיבים מובנים מראש המסופקים על ידי ספריות עימוד, לחלופין, אתה יכול לבנות מערכת עימוד מותאמת אישית באמצעות React hooks.

יישום עימוד בצד הלקוח

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

אתה יכול ליישם עימוד בצד הלקוח באמצעות טכניקות שונות. טכניקות אלו כוללות:

1. עימוד מבוסס עמודים: שיטה זו כוללת חלוקת הנתונים לנתחים בגודל קבוע או לדפים, בדרך כלל מציגים מספר מסוים של פריטים בכל עמוד. משתמשים יכולים לנווט בין הדפים באמצעות קישורי ניווט או כפתורים, המסומנים עם מספרי עמודים או כפתורי הקודם והבא. זהו יישום פופולרי עם מנועי חיפוש ויישומי מסחר אלקטרוני.
   instagram viewer
2. גלילה אינסופית: שיטה זו כוללת טעינה ועיבוד דינמי של נתונים חדשים בזמן שהמשתמש גולל מטה בעמוד, יצירת חוויית גלישה חלקה ורציפה. טכניקה זו שימושית במיוחד כאשר מתמודדים עם מערכי נתונים גדולים שמתרחבים ללא הרף, כגון עדכוני מדיה חברתית.

יישום עימוד מבוסס עמוד באמצעות React Hooks

כדי להתחיל, צור פרויקט React. אתה יכול להשתמש ב- הפקודה create-react-app JavaScript להגדרת אפליקציית React בסיסיתמקומית או השתמש ב-Vite לפיגום פרויקט React במכונה שלך.

מדריך זה השתמש ב-Vite, אתה יכול למצוא את הקוד של הפרויקט הזה בזה מאגר GitHub.

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

הגדרת מערך הנתונים

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

בתוך ה src ספרייה, צור חדש רכיבים/דפיון קובץ, והוסיפו את הקוד הבא.

1. צור רכיב פונקציונלי של React והגדר את המצבים הבאים.

   יְבוּא תגובה, { useEffect, useState } מ"לְהָגִיב";
   יְבוּא"./style.component.css";
   פוּנקצִיָהדִפּוּף() {
   const [נתונים, setData] = useState([]);
   const [currentPage, setcurrentPage] = useState(1);
   const [itemsPerPage, setitemsPerPage] = useState(5);
   const [pageNumberLimit, setpageNumberLimit] = useState(5);
   const [maxPageNumberLimit, setmaxPageNumberLimit] = useState(5);
   const [minPageNumberLimit, setminPageNumberLimit] = useState(0);
   לַחֲזוֹר (
    <>
   
    רכיב עימוד</h1> 
   >
   
    </>
    );
   }
   יְצוּאבְּרִירַת מֶחדָל דִפּוּף;

2. יישם את ההיגיון כדי להביא נתונים מה-Dmmy API. בתוך ה דִפּוּף רכיב, הוסף את הדברים למטה.

    useEffect(() => {
    לְהָבִיא(" https://jsonplaceholder.typicode.com/todos")
    .לאחר מכן((תְגוּבָה) => response.json())
    .לאחר מכן((json) => setData (json));
    }, []);
   const displayData = (נתונים) => {
   לַחֲזוֹר (
   
   
    {data.length > 0 &&
    data.map((לעשות, אינדקס) => {
   לַחֲזוֹר<לימַפְתֵחַ={אינדקס}>{todo.title}לי>;
    })}
    </ul>
    );
    };
   

   הקוד למעלה משרת שתי מטרות עיקריות. ראשית, ברגע שהרכיב עולה, ה useEffect מפעילי hook כדי להביא נתונים מנקודת הקצה החיצונית של ה-API אשר לאחר מכן מומר לפורמט JSON. לאחר מכן נעשה שימוש בנתוני ה-JSON המתקבלים לעדכון נתונים משתנה מצב עם נתוני המטלות שנלקחו. שנית, ה נתוני תצוגה הפונקציה תיקח את הנתונים שהובאו כארגומנט ותציג את הנתונים כרשימה לא מסודרת של מטלות.
3. בקטע ההחזרה של ה דִפּוּף רכיב, כולל את נתוני תצוגה פונקציה לעיבוד הנתונים שהובאו בדפדפן. הנה גרסה מעודכנת של הקוד:

   לַחֲזוֹר (
    <>
    רכיב עימוד</h1> 
   >
    {displayData (נתונים)}
    </>
   );
   

   על ידי התקשרות displayData (נתונים) בתוך אלמנט JSX והעברת ה- נתונים משתנה מצב כפרמטר, הפונקציה תציג את הנתונים שהובאו כרשימה לא מסודרת בדפדפן.

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

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

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

יישום היגיון עימוד להצגת מספר מוגבל של פריטים בעמוד

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

כדי להשיג זאת, אתה יכול להוסיף את הקוד הבא ל- דִפּוּף רְכִיב:

const דפים = [];
ל (לתת אני = 1; אני <= מתמטיקה.ceil (data.length / itemsPerPage); i++) {
 pages.push (i);
 }

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

עם זאת, אתה יכול לעדכן את המספר הזה כנדרש כדי לבדוק את ההיגיון. לבסוף, כל מספר עמוד מתווסף ל- דפים מַעֲרָך. כעת, בואו ליישם את ההיגיון להצגת מספר פריטים בכל עמוד.

const indexOfLastItem = currentPage * itemsPerPage;
const indexOfFirstItem = indexOfLastItem - itemsPerPage;
const pageItems = data.slice (indexOfFirstItem, indexOfLastItem);

קוד זה קובע את המשימות לעיבוד בדף הדפדפן בהתבסס העמוד הנוכחי ו itemsPage משתנים - הוא מחלץ את האינדקסים המתאימים לקבוצת המשימות ממערך הנתונים באמצעות שיטת ה-Slice. לאחר מכן נעשה שימוש באינדקסים כדי לאחזר את המטלות הספציפיות השייכות לעמוד הרצוי.

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

לַחֲזוֹר (
 <>
 רכיב עימוד</h1> 
>
 {displayData (pageItems)}
 </>
);

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

ייעול הגישה והניווט לדף באמצעות לחצני ניווט

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

ראשית, בואו ליישם את ההיגיון של כפתורי מספר העמודים. בתוך ה דִפּוּף רכיב, הוסף את הקוד למטה.

const handleClick = (מִקרֶה) => {
 setcurrentPage(מספר(event.target.id));
 };
const renderPageNumbers = pages.map((מספר) => {
אם (מספר < maxPageNumberLimit +1 && מספר > minPageNumberLimit) {
לַחֲזוֹר (
 key={number}
 id={number}
 onClick={handleClick}
 className={currentPage == מספר? "פָּעִיל": ריק}
 >
 {מספר}
 </li>
 );
 } אַחֵר {
לַחֲזוֹרריק;
 }
 });

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

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

לבסוף, הוסף את הקוד עבור הכפתורים הבאים והקודמים.

const handleNextbtn = () => {
 setcurrentPage (currentPage + 1);
אם (currentPage + 1 > maxPageNumberLimit) {
 setmaxPageNumberLimit (maxPageNumberLimit + pageNumberLimit);
 setminPageNumberLimit (minPageNumberLimit + pageNumberLimit);
 }
 };
const handlePrevbtn = () => {
 setcurrentPage (currentPage - 1);
אם ((העמוד הנוכחי - 1) % pageNumberLimit == 0) {
 setmaxPageNumberLimit (maxPageNumberLimit - pageNumberLimit);
 setminPageNumberLimit (minPageNumberLimit - pageNumberLimit);
 }
 };

כדי להציג את לחצני הניווט, עדכן את רכיבי JSX באופן הבא:

לַחֲזוֹר (
 <>
 רכיב עימוד</h1> 
>
 {displayData (pageItems)}
"מספרי עמודים">




 onClick={handlePrevbtn}
 disabled={currentPage == דפים[0]? נָכוֹן: שֶׁקֶר}
 > הקודם
 </button>
 </li>

 {renderPageNumbers}


 onClick={handleNextbtn}
 disabled={currentPage == pages[pages.length - 1]? נָכוֹן: שֶׁקֶר}
 > הבא
 </button>
 </li>
 </ul>
 </>
 );

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

בחירה בין ספריות עימוד ומערכות עימוד מותאמות אישית

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

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