שיפור ביצועים בריאקט בעזרת memo
memo.DayPartIcon. הוא מקבל את השעה הנוכחית ב-props ומציג תמונה לפי חלק היום. פונקציה getImageByHour בוחרת בין ארבע תמונות בתיקיית assets/images: קפה בין 6 ל-10, מים בין 11 ל-15, יין בין 16 ל-20, ותמונה רביעית בשאר השעות. הקומפוננט מוצג ליד השעה, והעיצוב הוא 40x40 פיקסלים, inline-block וריווח של 3 פיקסלים.console.log בתוך הקומפוננט רואים שהוא מרונדר מחדש כל שנייה, בעוד התמונה משתנה רק ארבע פעמים ביום. האב מתעדכן כל שנייה, ולכן הבן מצויר מחדש, גם בלי שה-props שלו השתנו.memo: עוטפים את הקומפוננט ב-memo של React. זה קומפוננט שמקבל קומפוננט ומחזיר קומפוננט אחר, ובהתאם נקרא Higher Order Component, או HOC. בהמשך הקורס יוצג איך בונים HOC בעצמנו.memo פונקציה שמקבלת props קודמים ובאים ומחזירה true או false, כדי להחליט מתי כן לרנדר. המרצה לא משתמש בכך, ורק מזכיר שזה אפשרי.memo.פרקי ההרצאה: שיפור ביצועים בריאקט בעזרת memo
תמלול ההרצאה: שיפור ביצועים בריאקט בעזרת memo
הטקסט המלא של הדקות הראשונות בהרצאה «שיפור ביצועים בריאקט בעזרת memo» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.
הכלי הבא שריאקט נותנת לנו זה כלי שקשור לפרפורמנס. בואו נגיד שאנחנו רוצים לגשת לשעון המדהים שבנינו פה ולהוסיף איזה פיצ'ר מעניין בשעון.
מה שאני רוצה לעשות זה לבנות כאן עוד איזשהו קומפוננט שמציג לי תמונה כתלות בשעה. אני רוצה שהשעון יציג לי גם את השעה וגם את אותה תמונה שנמצאת בקומפוננט הזה. תכף נבין איזושהי בעיית פרפורמנס שקיימת פה ומה בעצם היכולת שריאק מספקת לי בשביל לפתור את בעיית הפרפורמנס הזאת.
אז אני הולך לכאן, נעשה פה אולי CLS כזה, ננקה, וניגש ונבנה לעצמנו functional component, בואו רגע נמחק את זה, ואני רוצה ליצור אותו בתוכה home זה בסדר ואני אקרא לקומפוננט הזה day art icon איזשהו אייקון שמציג לי חלק מסוים ביום בוא נניח שניקח את כל ה24 שעות נחלק אותם לארבעה חלקים ונציג
אייקון כתלות באותו חלק של היום אני כן רוצה אבל לקבל props אז אני אגדיר אותו בצורה כזאת וזה functional component בסדר והנה יש לנו פה קומפוננט שנקרא day part icon בתוך הprops אני רוצה לקבל את השעה הנוכחית כי לפי השעה אני רוצה להציג את אותו אייקון רגע איזה אייקונים אני רוצה להציג בואו ניגש פה ל-images והנה יש לי פה ארבע תמונות של סוגי
השקעות ששותים בכל מיני זמנים שונים במהלך היום. יש לנו בטח קופי בבוקר ובצהריים אולי מים כדאי לשתות ובערב תה ובלילה או למאוחר אולי עין, סתם זרקתי פה כמה תמונות, יש לנו פה את ה-images והוספנו אותם לכאן.
ומה שאנחנו רוצים, את זה אפשר למחוק, ביי ביי, ננקה, ומה שאנחנו רוצים לעשות זה קודם כל להביא את ארבעת התמונות. אז יש לנו כאן אימפורט, נביא את הקופי, אימג', פרום, הולך תיקיה למעלה, עוד תיקיה ועוד תיקיה, כנס לאסטס, כנס לאימג'ס ויש שם את קופי והתמונה היא png, שכפל, אנחנו פה רוצים את הוואטר,
כאן אנחנו רוצים את y, האמת ש-y נראה לי בערב קצת ו-t אולי יותר בלילה ו-t בסוף.
מה עוד אנחנו רוצים לעשות? אנחנו רוצים פה להציג את התמונה image ובואו ניקח src שווה ונקרא לפונקציה שאני אבנה פה למטה function get image by hour.
תן לי שעה ואני אחזיר לך את התמונה המתאימה לשעה הזאת. אז פה אנחנו פשוט יכולים לקרוא לפונקציה, להביא לה את השעה והיא תחזיר לנו את התמונה המתאימה.
אז בואו נבדוק כאן את השעה. אם hour בוא נניח גדול שווה ל-6 בבוקר גם hour קטן שווה ל-10 בבוקר. בוא תחזיר לי את coffee. אם hour גדול שווה ל-11 וקטן שווה ל-15, אז אני רוצה לשתות מים, ותביא לי פשוט את התמונה של המים.
אם hour גדול שווה ל-16 וקטן שווה ל-20 נניח, תן לי wine, אחרת תחזיר לי את... נניח שזה התמונות שאני רוצה להציג, גוד, אז הנה יש לנו פה קומפורננט שמסוגל להציג תמונה כתלות בשעה שהוא מקבל.
בואו נסדר לו טיפה CSS אולי, שים פה את זה, ונגיד שרוחב, בגלל שאני רוצה להציג את זה בשעון קטנצ'יק, אז נגיד שזה 40 פיקסלים, והייט זה 40 פיקסלים, ותציג לי אותו כאינליין בלוק בכדי שהוא לא יפריע למישהו אחר, יהיה באותה שורה תן לי
padding של שלוש פיקסלים בנוסף תן לי עבור התמונה width תפוס לי כמה שאתה יכול וגם height תפוס לי כמה שאתה יכול ושים לי אותה באמצע מבחינה ורטיקלית יש לנו css בואו ניגש לאן אנחנו רוצים אנחנו רוצים לגשת לקלוק ובקלוק שהיה לנו זאת השעה ליד השעה תציג לי את day part icon ותן לו את השעה הנוכחית נניח
new date.gethours זה השעה הנוכחית והנה יש לנו עכשיו אייקון שמציג לנו תמונה כתלות בשעה של היום הנה אנחנו רואים את התמונה המתאימה ליד השעון.
עד כאן הכל בסדר, פרט לבעיית פרפורמנס שקיימת לנו. בואו ניגש רגע לפה, שימו לב לאן. אני נמצא פה בפונקציה ואני רושם בתוך הפונקציה console.log ואת המחרוזת day.part.icon.render זה בעצם מה שקורה.
הפונקציה הזאת בצעד ומחזירה לי את ה-HTML. בואו נציג את הקונסול ותראו שהוא פשוט כותב לי פה day part icon render. קודם כל למה אני רואה פה עוד קונסול לוגים?
זה קטע מעניין. איפה יש לנו קונסול לוג? בואו רגע נריץ console.log בכל הפרויקט. קומפוננט did update כל אלה, הופה, אז אפשר רגע לכבות אותם.
האמת שזה לא קורס אבל לא משנה. זה אצלנו ומה זה? זה לא פעיל כל כך, אז זה לא כזה משנה לי. והנה זה מה שאני רוצה לראות. אז אני רואה, תסתכלו על המספר הזה, שכל שנייה הוא מרנדר את הקומפוננט שבנינו, נקרא Daypart Icon אתם יכולים להגיד טוב ברור אתה רוצה להציג אותו
אבל אני לא רוצה שהוא ירנדר לי אותו כל שנייה כי אין שינוי ב-UI של הקומפורנט אין שינוי זאת אותה התמונה ארבע פעמים ביום אני צריך לשנות את התמונה לא כל שנייה אני צריך לשנות את התמונה כולה ארבע פעמים ב-24 שעות אז מה שקורה עכשיו זה שכל שנייה הוא מצייר לי מחדש את כל הקומפורנט הזה אולי הקומפורננט לא כזה בעייתי לציור אבל עדיין
אני לא רוצה שתצייר לי אותו כל שנייה. תצייר לי אותו רק אם יש לך שינוי בפרופס. קיבלת מהפעם הקודמת לפעם החדשה פרופס חדשים אז תצייר לי אותו מחדש. אבל אני לא צריך כל שנייה שתחזיר לי עכשיו UI ותכניס לדום UI חדש.
מה הפתרון של ריאקט? פתרון של ריאקט זאת פונקציה אנחנו קוראים לה בצורה קצת מוזרה, אנחנו אולי בהמשך נראה מה זה בעצם הפורמט הזה של הקריאה לפונקציה, והאמת שזה לא בדיוק פונקציה, זה איזה קומפוננט אחר, שאנחנו קוראים לו בצורה כזאת, הוא נקרא ממו, הנה הוא, ואנחנו
עוטפים את הקומפוננט שלנו.