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

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

הבנת עימוד מותאם אישית

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

היתרונות של עימוד מותאם אישית

יצירת מערכת עימוד מותאמת אישית עבור האפליקציות לנייד של React Native יכולה להציע כמה יתרונות:

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

יישום טעינה דינמית עם עימוד מותאם אישית

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

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

הגדרת מקור הנתונים

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

להלן דוגמה כיצד תגובת ה-API עשויה להיראות:

{
"נתונים": [
 {
"תְעוּדַת זֶהוּת": 1,
"כותרת": "התפסן בשדה השיפון",
"מְחַבֵּר": "J.D. Salinger"
 },
 {
"תְעוּדַת זֶהוּת": 2,
"כותרת": "אל תיגע בזמיר",
"מְחַבֵּר": "הרפר לי"
 },
// ...
 ],
"עמוד": 1,
"סה"כ דפים": 5
}

כדי להביא נתונים אלה באפליקציית React Native שלנו, אנו יכולים להשתמש ב- לְהָבִיא פונקציה, המחזירה א הַבטָחָה זה נפתר עם התגובה מה- REST API.

יצירת פונקציית עימוד מותאמת אישית

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

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

const PAGE_SIZE = 10;
const fetchBooks = אסינכרון (דף) => {
לְנַסוֹת {
const תגובה = לְהַמתִין לְהָבִיא(` https://myapi.com/books? page=${page}&pageSize=${PAGE_SIZE}`);
const json = לְהַמתִין response.json();
לַחֲזוֹר json.data;
 } לתפוס (שגיאה) {
לְנַחֵם.error (שגיאה);
לַחֲזוֹר [];
 }
}

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

יישום טעינה דינמית בעזרת פונקציית העימוד המותאם אישית

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

ראשית, הגדר את רשימה שטוחה רכיב עם מצב ראשוני כלשהו:

יְבוּא תגובה, { useState, useEffect } מ'לְהָגִיב';
יְבוּא { Flat List, View, Text } מ'תגובה-יליד';
const אפליקציה = () => {
const [books, setBooks] = useState([]);
const [currentPage, setCurrentPage] = useState(1);


 useEffect(() => {
// אחזר דף נתונים ראשוני
 fetchBooks (currentPage).then(נתונים => setBooks (נתונים));
 }, []);


const renderItem = ({ פריט }) => {
לַחֲזוֹר (

גודל גופן: 18 }}>{item.title}</Text>
גודל גופן: 14 }}>{item.author}</Text>
 </View>
 );
 };


לַחֲזוֹר (
 data={ספרים}
 renderItem={renderItem}
 keyExtractor={item => item.id.toString()}
 />
 );
}
יְצוּאבְּרִירַת מֶחדָל אפליקציה;

קוד זה מגדיר את רכיב FlatList עם שני חלקי מדינה, כלומר ספרים ו העמוד הנוכחי. אנו משתמשים ב- useEffect() הוק כדי להביא את הדף הראשוני של הנתונים כאשר האפליקציה שלנו פועלת לראשונה.

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

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

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

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

הנה הקוד המעודכן שמיישם את כל זה:

יְבוּא תגובה, { useState, useEffect } מ'לְהָגִיב';
יְבוּא { Flat List, View, Text } מ'תגובה-יליד';
const אפליקציה = () => {
const [books, setBooks] = useState([]);
const [currentPage, setCurrentPage] = useState(1);
const [isLoading, setIsLoading] = useState(שֶׁקֶר);


 useEffect(() => {
 fetchBooks (currentPage).then(נתונים => setBooks (נתונים));
 }, []);


const להביא עוד = אסינכרון () => {
אם (טוען) לַחֲזוֹר;


 setIsLoading(נָכוֹן);


const nextPage = currentPage + 1;
const newData = לְהַמתִין fetchBooks (NextPage);


 setCurrentPage (NextPage);
 setIsLoading(שֶׁקֶר);
 ספרי סט(prevData => [...prevData, ...newData]);
 };


const renderItem = ({ פריט }) => {
לַחֲזוֹר (
ריפוד: 16 }}>
גודל גופן: 18 }}>{item.title}</Text>
גודל גופן: 14 }}>{item.author}</Text>
 </View>
 );
 };


לַחֲזוֹר (
 data={ספרים}
 renderItem={renderItem}
 keyExtractor={item => item.id.toString()}
 onEndReached={fetchMore}
 onEndReachedThreshold={0.1}
 />
 );
}
יְצוּאבְּרִירַת מֶחדָל אפליקציה;

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

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

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

שפר את ביצועי האפליקציה שלך באמצעות עימוד מותאם אישית

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