פונקציות Lifecycle Hooks
Clock נוצר עם props ו-state. ה-props כוללים ערך אופציונלי בוליאני ampm, ו-state מחזיק time כמחרוזת. פונקציה פרטית getTime מחזירה את השעה בפורמט 12 שעות אם ampm נכון, ובפורמט 24 שעות (שמונה תווים ראשונים) אחרת. כדי שהשעה תתעדכן כל שנייה, צריך טיימר.constructor: האובייקט נוצר. משמש לאתחול state ושדות. לא עושים בו side effects. Side effect הוא כל דבר מחוץ לקומפוננט, כמו setInterval או גישה לאינטרנט. הניסיון לקרוא ל-setState בו נותן את האזהרה שהקומפוננט עוד לא mounted.render: מחזירה את ה-UI שיוכנס ל-DOM.getDerivedStateFromProps: פונקציה סטטית שמקבלת props ו-state ומחזירה props. היא רצה כשה-props מבחוץ השתנו, ומשלבת אותם ב-state. שימושה נדיר.componentDidMount: הקומפוננט מוכן לשימוש. רצה פעם אחת, ומתאימה לכל side effect שנדרש פעם אחת, כמו טיימר או גישה לרשת. כאן עוברים הטיימר וה-setState, והאזהרה נעלמת.componentDidCatch: מקבלת error ו-errorInfo. נקראת כשקומפוננט ילד קורס. מתאימה לרישום שגיאות.componentWillUnmount: הקומפוננט עומד להיהרס, למשל כשהמשתמש עובר לדף אחר. מנקים כאן דברים: את הטיימר שומרים ב-timerID (window.setInterval), וסוגרים אותו עם window.clearInterval. אחרת הטיימר ימשיך לרוץ בזיכרון.componentDidUpdate: מופעלת כש-state או props השתנו. מקבלת את ה-props וה-state הקודמים, כך שאפשר להשוות אותם לנוכחיים (בעזרת console.log) ולהחליט אם לעשות פעולה לוגית, למשל לשלוח לשרת או לשמור משהו.פרקי ההרצאה: פונקציות Lifecycle Hooks
תמלול ההרצאה: פונקציות Lifecycle Hooks
הטקסט המלא של הדקות הראשונות בהרצאה «פונקציות Lifecycle Hooks» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.
אנחנו מגיעים למשהו שנקרא Life Cycle Hooks זה לא React Hooks כמו שהזכרתי באחד הסרטונים האחרונים Life Cycle Hooks זה משהו אחר Life Cycle Hooks אלו פונקציות שמתבצעות אוטומטית בשלבים שונים של Class Component אין את הפונקציות האלה בדיוק בפונקצ'נל קומפורננט.
בפונקצ'נל קומפורנט יש טכניקה אחרת בשביל להגיע אליהם או בשביל לדמות אותם. לכן אנחנו הולכים לראות אותם בקלאס קומפורנט ולראות בעצם מה אלה הפונקציות האלה, או אנחנו כמובן נראה פונקציות נפוצות ביניהם, ומה השימושים שלהם.
לצורך כך בואו נצרף קלאס קומפורנט לתוך הום. אני אצרף קומפוננט, אני אקרא לו clock כי אני רוצה להציג שעון. לקומפוננט הזה אני גם רוצה props ואני גם רוצה state.
דרך אגב, כמו שאמרתי בעבר, אפשר לרשום מינוס p ומינוס s ואז הוא ייצר לי גם props וגם state. בואו ניתן לו לרוץ והנה אנחנו רואים clock ויש לו את ה-props שלו ויש לו את ה-state שלו.
הנה הפרופס, הנה הסטייט והנה הקונסטרקטור. מה אנחנו רוצים בפרופס? אנחנו רוצים להציג שעון, אבל אנחנו רוצים שהפרנט שלנו יגיד לנו האם אנחנו רוצים להציג את זה בפורמט של AMPM, זה יהיה ערך דיפולטי, זאת אומרת ערך אופציונלי, ובוליאן.
זאת אומרת, אם הוא נותן לי פה true, אז אני רוצה להציג את זה בפורמט AMPM, ואם הוא לא נותן לי false או שהוא לא נותן לי בכלל, אז אני לא רוצה להציג את זה בפורמט של AMPM.
כלומר, AMPM זה הכוונה 12 שעות, ובלי AMPM זה 24 שעות. הסטייט שלי מכיל את ה-time, וזה סטרינג. כאן אנחנו רוצים שתהיה לנו איזושהי פונקציה בשעון שמחזירה לנו את השעה. בואו נבנה אותה פה כפונקציה פרייבט, אז אני אבנה אותה פה למטה, time והפונקציה רוצה לבדוק קודם כל בואו ניקח now newdate ואנחנו רוצים לבדוק האם להציג את זה
בתצוגה שקיבלנו מהprops וזה ampm האם קיבלנו את זה אם כן אני רוצה to return now.tolocaltime ring זה יהיה ampm זה הדיפולט אלס אנחנו רוצים to return now to time string אבל תן לי sub של 0 עד 8 בלבד.
זאת אומרת אם אנחנו נסתכל על זה אחר כך זה יהיה לנו לדוגמה אנחנו רואים 10, 20, 30, PM ואם אנחנו נסתכל על זה זה יהיה 22, 20, שלושים והפורמט פשוט שני פורמטים שונים זאת הפונקציה gtime ואנחנו יכולים לחזור לפה ולהגיד שמה שאנחנו רוצים לראות פה זה basically את הtime תן לו this.gtime
בצורה כזאת ככה עכשיו בואו נתחיל רגע להבין את הlife cycle hooks שאנחנו רוצים לראות אז האמת אולי נראה את הcomponent בפעולה ואז אז נבין את ה-Life Cycle Hooks.
אני הולך לכאן ואני אומר, אני רוצה לראות את ה... סליחה, זה נקרא Clock בצורה כזאת, ופה אני רוצה בכלל להציג את השעה עצמה, this.state.time, ואני גם רוצה לראות את זה בצורה של Box, והאמת, אני לא רואה שיש לי אפילו CSS, אז בואו נוריד את ה-CSS של הדבר הזה, גם כאן וגם כאן ונריץ ואנחנו רואים את השעה
הנוכחית בלי עדכון כל שניה אוקיי בלי עדכון כל שניה אז אנחנו צריכים כל שניה לעדכן את השעה אז אנחנו יכולים לגשת פה או לקונסטרקטור נניח ולהגיד לו set interval ולהגיד לו תשמע בוא תעדכן לי כל שנייה this.setState את ה-time ותן לי את ה-time הנוכחי ואנחנו רוצים גם לעשות את זה כל 1000 מילי סקנדס גו והנה כל שנייה אנחנו
רואים שיש לנו שעון בואו בואו נסתכל על הקונסול ואנחנו רואים כאן איזה שהיא שגיאה warning can't call set state on a component that is not yet mounted מה זה mounted אז מה שבעצם מתרחש כאן זה איזה שהיא בעיה שריאקט אומרת לנו היא אומרת לנו תשמעו אתם מנסים לקרוא ל-set state
בקונסטרקטור, קונסטרקטור זה אחד מה-life cycle hooks ולמעשה זה ה-life cycle Hook הראשון, נרשום פה אחד, וכל מה שהוא אומר זה Object has been created.
מה ה-usage שלנו? init, state, and classFields, זהו, תעדכן לי את ה-state, תעדכן לי, לא יודע, אולי יש לך dataMembers, Don't do side effects.
מה זה side effect? side effect זה מונח חשוב בריאט שאומר כל מיני דברים שהם מחוץ לקומפוננט. Set interval זה משהו של JavaScript, זה מחוץ לקומפוננט.
גישה לאינטרנט, אולי אני רוצה להביא איזה מידע מאיזה אתר אחר, זה מחוץ לקומפוננט. כל הדברים האלה נחשבים side effects.
side effect זה לא משהו שאנחנו רוצים לעשות בקונסטרקטור. קרואוננט בכלל עדיין לא מוכן לשימוש, הוא לא לגמרי לגמרי מוכן לשימוש, וכאשר הוא מוכן לשימוש, מתרחש מעין אירוע או איזושהי פונקציה מיוחדת, שאומרת לי, תשמע, עכשיו הוא מוכן לשימוש, אתה עכשיו יכול לבצע פעולות שהן סייד אפקטס.
אבל עוד לא הגענו לשם, תכף אנחנו נגיע לשם וניפטר מהשגיאה הזאת, את זה אנחנו רוצים להוציא מפה לאירוע המיוחד הזה. אבל רגע, איזה עוד סייד אפקט יש לפני שאנחנו מגיעים לאירוע הזה?
רנדר זה סייד אפקט, סליחה, לא סייד אפקט, Lifecycle Hook. מה רנדר אומר? UI needs to be rendered into the dome.
ברגע שהקומפורננט נוצר, אנחנו רוצים לקבל את הדבר הזה לתוך הדום. ה-usage שלו return component UI בוא תחזיר לי את ה-UI שלו זה עוד LifecycleHook שקיימת LifecycleHook הבאה בתור שלנו נרשום אותה