Change Detection Strategy & Unsubscribing

פוסט המשך לפוסט: Imperative Programming.

נדבר על Change Detection Strategy. מה זה ולמה אנחנו צריכים להשתמש בזה?

נוסיף להגדרת הקומפוננטה את changeDetection.

ChangeDetectionStrategy.OnPush

קובץ posts.component.ts

@Component({
  selector: 'app-posts',
  templateUrl: './posts.component.html',
  styleUrls: ['./posts.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush
})

אחרי שמירה נראה שהמסך שלנו לא מציג שום נתונים. אם נסתכל על טאב ה-network בדפדפן נראה שיש קריאה ל-API, אבל אין מידע. השימוש ב-OnPush גורם לזה שאין רינדור של המידע.

למה זה קורה? כשיש לנו קומפוננטת אב וקומפוננטת בן, בכל פעם שיש איזה עידכון בקומפוננטת האב, גם קומפוננטת הבן נטענת מחדש. הפעולה הזאת גורמת לצריכת משאבים מיותרת והאטה של האפליקציה. במקרה כזה אנחנו רוצים להשתמש ב-ChangeDetectionStrategy.OnPush ואז קומפוננטת הבן תטען פעם אחת ולא בכל פעם שיש עדכון בקומפוננטת האב.

כדי להפעיל "ידנית" את הטעינה של קומפוננטת הבן, נשתמש ב-ChangeDetectorRef. נוסיף אותו ל-constructor ונקרא לו אחרי שטענו את הנתונים מה-DB.

קובץ posts.component.ts

constructor(private postsService: PostsService,
    private ref: ChangeDetectorRef){}

ngOnInit(){
    this.postsSubscription = this.postsService
        .getPostsWithCategories().subscribe(data => {
      this.posts = data;
      this.ref.detectChanges();
    });
}

עכשיו נראה את הנתונים על המסך. פעולת OnPush תהיה יעילה כשנשתמש ב-Declarative Programming.

Unsubscribing

לכל observable יש פעולת subscribe שצריכה להיות לה פעולת unsubscribe בהתאמה. כשאנחנו משתמשים ב-HttpClient יש לנו unsubscribe אוטומטי אחרי שנגמרת הבאת הנתונים.

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

פעולת ה-unsubscribe תסיים את פעולת ה-observable.

יש חיסרון גם לזה שסומכים על ה-unsubscribe של HttpClient. גם לאחר היציאה מקומפוננטה אחת לאחרת, אם שתיהן יהיו תחת אותה קומפוננטת אב, תהיה קריאה חוזרת של http גם אם נכנסים לקומפוננטה אחרת. לכן בכל מקרה כדאי לקרוא ל-unsubscribe בפונקציה onDestroy.