Angular 2.0 Component Lifecycle

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.