6 טיפים למיטוב ביצועי האפליקציה המקורית של React

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

עיין בטיפים ובטכניקות אלה למיטוב הביצועים של אפליקציית React Native שלך.

1. צמצם עיבודים מיותרים מחדש עם שימוש ב-Memo Hook

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

ספריית React מספקת את השתמש ב-Memo ו השתמש בהתקשרות חזרה ווים כדי לפתור בעיה זו ברכיבים פונקציונליים. אתה יכול להשתמש ב-useMemo כדי לשנן את הערך המתקבל של פונקציית JavaScript שאתה לא רוצה לחשב מחדש בכל עיבוד.

הנה דוגמה לאופן שבו אתה יכול להשתמש ב- השתמש ב-Memo וו:

יְבוּא { useMemo } 





instagram viewer

מ'לְהָגִיב';
פוּנקצִיָהMyComponent({ נתונים }) {
// הפונקציה computeExpensiveValue היא חישוב יקר ש
// אין צורך לחשב מחדש בכל עיבוד.
const יקרValue = useMemo(() => computeExpensiveValue (נתונים), [נתונים]);
// הרכיב יכול להשתמש בערך הממוזכר בלי לחשב מחדש 
// זה בכל עיבוד.
לַחֲזוֹר
{expensiveValue}</div>;
}

עוטף את computeExpensiveValue לתפקד בתוך השתמש ב-Memo hook משחזר את התוצאה של הפונקציה. ה השתמש ב-Memo הוק יכול לקבל טיעון שני כתלות. משמעות הדבר היא שהפונקציה הממוזכרת תפעיל רווח רק כאשר התלות הזו משתנה.

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

2. טיפול יעיל בנתוני המדינה

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

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

לדוגמה:

יְבוּא תגובה, { useState } מ'לְהָגִיב';
פוּנקצִיָהMyComponent() {
const [state, setState] = useState({
 לספור: 0,
 טֶקסט: 'שלום'
 });
פוּנקצִיָהhandleClick() {
 setState(prevState => {
לַחֲזוֹרלְהִתְנַגֵד.assign({}, prevState, { count: prevState.count + 1 });
 });
 }
לַחֲזוֹר (


ספירת תוספת</button>
 </div>
 );
}

בדוגמה זו, ה handleClick הפונקציה משתמשת ב- setState וו לעדכן את המדינה. ובכל זאת, במקום לשנות ישירות את אובייקט המצב, הוא משתמש ב- Object.assign() שיטה ליצירת אובייקט חדש שמעתיק את המצב הקודם עם מאפיין ה-count שונה. גישה זו מאפשרת ל-DOM הוירטואלי של React לעבד מחדש את הרכיב כאשר הוא מזהה שעדכנת את המצב.

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

3. הטמעת מערכת ניטור ביצועים

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

להלן רשימה של מספר כלי PMC הזמינים.

• React Native Debugger: אפליקציה עצמאית המאפשרת לך לבצע ניפוי באגים ולבדוק את מצב אפליקציית React Native שלך. זה כולל גם צג ביצועים שיעזור לך לזהות ולתקן בעיות ביצועים.
• React Native Profiler: כלי ניטור ביצועים מובנה זה מאפשר לך לצפות בביצועי האפליקציה שלך על ידי מדידת הזמן שלוקח לעיבוד כל רכיב.
• Flipper: פלטפורמת פיתוח אפליקציות לנייד עם צג ביצועים שיכול לעזור לך לזהות ולתקן בעיות ביצועים.
• ניטור ביצועים של Firebase: כלי ניטור ביצועים שמסופק על ידי Firebase המאפשר לך לעקוב אחר הביצועים של האפליקציה שלך במכשירים ובפלטפורמות שונות.

4. הסר את הצהרות Console.log

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

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

5. בניית מערכת ניווט יעילה

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

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

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

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

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

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

פיצול קוד וטעינה עצלה הן טכניקות שיכולות להקטין את גודל אפליקציית React Native ולשפר את הביצועים.

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

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

מדוע אופטימיזציית ביצועים חשובה

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

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