RSS

DoCheck vs. DoChanges

02 יונ

בפוסט זה אני רוצה להסביר את תהליך עידכון המסך באפלקציות שנכתבו ב-angular 2. תהליך העדכון של המסך ב-Angular מורכב מ-3 חלקים עקריים.

1. זיהוי הצורך בעידכון המסך (NgZone):

מנגנון זה אחראי על הפעלת מנגנון העידכון (tick). בלי הפעלת ה-tick לא יתעדכן המסך.  איך NgZone עושה את זה ניתן לקרוא כאן.

2. זיהוי השינוים ב- State של ה- Component וה- Directive ועידכון התבנית בהתאם:

מנגנון זה נקרה ChangeDetector. לכל Component נוצר ChangeDetector יחודי ע"פ התבנית של ה- Component. כל ביטוי ( השימוש ב- {{expression}} או [property]='expression' ) בתבנית יוצר ב- ChangeDetector סוג של watcher. ניתן לקורא על זה כאן וכאן.

3. מעבר על עץ ה- Components:

כאשר מופעל ה- tick אנגולר בודק את השינויים ע"פ סעיף 2 ב- Root Component. בנוסף הוא הוא עובר לילדים של Root Component. האבא מעביר לבן את השינויים דרך ה- inputs שמוגדרים בבן. במילים פשוטות האבא מבצע השמה לתכונות של הבן אם הוא מזהה שינוי ב- inputs. ראה דוגמא:

clip_image002

זו התבנית של האבא. כאשר ה- ChangeDetector של האבא מזהה שה- expression קיבל ערך חדש, מתבצע השמה של הערך החדש ב- property1 של רכיב הבן.

לפני שמתבצעת ההשמה ב-property1 מופעלים אצל הבן ה-hooks  שהוא מימש. עכשיו הגענו לרגע האמת שאפשר להסביר את ההבדל בין שני ה- hooks, הראשון ngOnChanges והשני ngDoCheck.

בדוגמא שלמעלה אם ה- expression שווה לערך מסוג primitive , האנגולר מסוגל לזהות שינויים בערך של ה- expression. במקרים אלו אם נשתמש ב- ngOnChanges אנגולר יספק לנו ערך ישן וערך חדש.

שאלה: למה צריך את ה- ngOnChanges אם בסופו של דבר נגיע ל- setter של ה- property ששם אנחנו יודעים גם לזהות ערך קודם וערך חדש?

תשובה: אכן השימוש בזה לא שכיח, רוב ה- Directives של אנגולר לא משתמשים בזה.  NgModel משתמש ב- ngOnChanges, ע"פ דעתי אפשר לכתוב את הקוד הנ"ל גם בלי ngOnChanges.

שאלה: האם אנגולר מסוגל לזהות שינויים בתוך אובייקט או מערך ב- Input?

תשובה: לא.

בדוגמא למעלה אם ה- expression מחזיר אובייקט, אנגולר לא מסגול לזהות שינויים באובייקט ( זה כולל גם מערכים ) וכתוצאה מכך גם ה- setter של ה- property לא יתבצע, כאשר יש שינוי באובייקט.

שאלה: מה עושים?

תשובה: ngDoCheck.

כאשר אנחנו צריכים Input מסוג אובייקט או מערך אנחנו צריכים להשתמש ב- ngDoCheck. הפעלת המתודה ngDoCheck אומרת לכותב ה- Component זה הזמן שלך לבדוק מה השתנה ולעדכן את ה- properties בהתאם.

שאלה: איך בודקים מה השתנה באובייקט או במערך?

תשובה: באנגולר יש את שני המחלקות SimpleChange ו- IterableDiffers שבעזרתם אנחנו יכולים לזהות שינויים. פוסט בנושא ניתן לקורא כאן.

ראו טבלה של Directives שמשתמשים במחלקות אלו:

Differ Class

Hook

Input Type

Directives

SimpleChange

DoCheck

Object

NgClass

SimpleChange

DoCheck

Object

NgStyle

IterableDiffers

DoCheck

Array

NgFor

 

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

תשובה: ביצועים…

יש מספר פרמטרים שמשפיעים על הביצועים:

1. מספר ה- expressions ב- Template.

2. תדירות ה- tick.

3. גודל העץ שצריך לסרוק ב- tick.

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

 

איך עושים את זה בפוסט הבא.

אם אהבתם את הפוסט אתם מוזמנים לבוא לקורס שלי ב-Angular 2.

לפרטים לחצו כאן.

מודעות פרסומת
 
תגובה אחת

פורסם ע"י ב- יוני 2, 2016 ב- Angular 2.0

 

תגובה אחת ל-“DoCheck vs. DoChanges

להשאיר תגובה

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

הלוגו של WordPress.com

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

תמונת Twitter

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

תמונת Facebook

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

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

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

מתחבר ל-%s

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