Angular 2.0 Component Lifecycle
אחת השאלות המרכזיות שאני חוקר אותם בימים אלו היא, איך Angular יכול לסרוק את העץ רק פעם אחת והכול עובד? או למה ב- Angular1 כאשר מזהים שינוי בשלב ה- digest חוזרים לסרוק את העץ שוב וב- Angular 2 לא.
ראו תמונה ל-digest ב- Angular 1. המעגל הסגול מסתובב כל עוד מזהים שינוי באחד ה- scopes.
בגלל תהליך זה אנחנו יכולים להיכנס ללולאה אין סופית, ולכן אחרי 10 סיבובים Angular זורק טעות.
מה קורה ב- Angular 2.0?
כדי להבין מה קורה ב- Angular 2.0 אנחנו צריכים לכתוב קוד שמנסה להכניס את Angular ללולאה אין סופית.
ראו תמונה: לקוד לחצו כאן.
הסברים:
ה- Angular עולה ובונה את המסך. בסיום התהליך הוא מריץ tick, דומה ל-$apply. ואז הוא מעביר ל- my-property את הערך {{counter}} כתוצאה מכך נזרק אירוע בשם my-event שגורם ל-parent לעדכן את הערך ב-counter ואז צריך לעדכן שוב את ה-my-property , וזה נכנס למעגל אין סופי.
למה הקוד לא זורק טעות?
מוכנים לצילה? כל הנאמר כאן עדין בחקירה, אך יש סבירות גדולה מאוד שאני מדייק J
1. הדף מריץ את זיהוי השינויים ChangeDetector מאבא לבן.
2. מזהים שצריך להכניס את הערך counter ל-my-property.
3. מתבצעת השמה של counter ל- my-property.
4. נזרק event בשם my-event.
5. מסתיים תהליך הסריקה על העץ.
6. המסך מתעדכן
7. המתודה setCounter שנרשמה לאירוע עובדת ומשנה את הערך. ברצוני להזכיר שאירוע זה דבר אסינכרוני.
8. ה- zone מזהה את זריקת האירוע my-event וקורא שוב ל- tick
9. חוזרים לסעיף 1.
זה דומה ל- Angular1, אך יש פה שינוי מרכזי !!! ב- Angular 1 לא מפסיקים להסתובב כלומר לא יוצאים מהמתודה $digest ולכן המסך לא יכול להתעדכן וזה מצב של תקיעות.
ב- Angular2 בגלל שאסור שבן יעדכן את האבא ישירות, אלה רק ע"י אירוע (מזכיר לכם זה אסינכרוני ) הסריקה של העץ מסתיימת ואז המסך יכול להתעדכן. ה-zone מאפשר לזהות את כל האירועים במסך ולקרוא ל-tick אחרי האירוע. ( מאמר טוב בנושא כאן ). ועכשיו אנחנו בתנועה מעגלית אך שמאפשרת למסך להתעדכן והאפליקציה לא נתקעת.
איך זה משתלב עם ה- lifecycle hooks ש- Angular2 הגדיר? זה לפוסט הבא…
אשמח לפידבקים כמו תמיד.
וכמובן אשמח לראות אתכם בקורס שלי על Angular 2.0 Course for Angular 1.0 Developer.