RSS

Angular 2.0 Component Lifecycle

05 פבר

Angular 2.0 Component Lifecycle

 

אחת השאלות המרכזיות שאני חוקר אותם בימים אלו היא, איך Angular יכול לסרוק את העץ רק פעם אחת והכול עובד? או למה ב- Angular1  כאשר מזהים שינוי בשלב ה- digest חוזרים לסרוק את העץ שוב וב- Angular 2 לא.

ראו תמונה ל-digest ב- Angular 1. המעגל הסגול מסתובב כל עוד מזהים שינוי באחד ה- scopes.

clip_image002[4]

בגלל תהליך זה אנחנו יכולים להיכנס ללולאה אין סופית, ולכן אחרי 10 סיבובים Angular זורק טעות.

מה קורה ב- Angular 2.0?

כדי להבין מה קורה ב- Angular 2.0 אנחנו צריכים לכתוב קוד שמנסה להכניס את Angular ללולאה אין סופית.

ראו תמונה:  לקוד לחצו כאן.


clip_image004[4]

הסברים:

ה- 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.

Advertisements
 
השארת תגובה

פורסם ע"י ב- פברואר 5, 2016 ב- Angular 2.0

 

כתיבת תגובה

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

הלוגו של WordPress.com

אתה מגיב באמצעות חשבון WordPress.com שלך. לצאת מהמערכת / לשנות )

תמונת Twitter

אתה מגיב באמצעות חשבון Twitter שלך. לצאת מהמערכת / לשנות )

תמונת Facebook

אתה מגיב באמצעות חשבון Facebook שלך. לצאת מהמערכת / לשנות )

תמונת גוגל פלוס

אתה מגיב באמצעות חשבון Google+ שלך. לצאת מהמערכת / לשנות )

מתחבר ל-%s

 
%d בלוגרים אהבו את זה: