במאמר הקודם למדנו על Pipes, היום נעסוק בנושא מורכב יחסית והוא הבנת מנגנון Change Detection, גם מפתחים מנוסים באנגולר לא תמיד מבינים את המנגנון במדוייק.

במאמר זה נחקור את מנגנון Change Detection באנגולר, נבין כיצד הוא פועל, ומתי ואיך להשתמש בו בצורה היעילה ביותר. Change Detection הוא חלק מרכזי בעבודה עם אנגולר, ומאפשר לאפליקציה להגיב לשינויים בנתונים ובמצב הקומפוננטות.

מהו Change Detection?

Change Detection באנגולר הוא התהליך שבו מסגרת העבודה (framework) מזהה שינויים במצב האפליקציה ומעדכנת את התצוגה בהתאם. התהליך כולל בדיקה האם יש שינויים בנתונים, ואם כן, עדכון ה-DOM כדי להציג את השינויים הללו.

אנחנו יכולים להבין את מנגנון Change Detection באנגולר כמעין "מאזין" לשינויים, שמפעיל את עצמו באופן אוטומטי כאשר מתרחשים אירועים מסוימים כמו לחיצה על כפתור, שינוי בערך של קלט (input), או שינוי במשתנה בקומפוננטה.

כיצד פועל מנגנון Change Detection?

בכל פעם שמתרחש שינוי בנתונים, אנגולר מבצע את התהליך הבא:

1. מנגנון Change Detection מזהה את השינוי.
2. אנגולר מחשב מחדש את הערכים בתבנית (template).
3. אנגולר מעדכן את התצוגה ב-DOM.

תהליך זה נעשה באופן אוטומטי ואינו דורש מאתנו לבצע פעולות נוספות מלבד כתיבת הקוד הרגיל בקומפוננטות.

שימוש ב-Change Detection

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

<ul>
  <li *ngFor="let item of items">{{ item }}</li>
</ul>

הקומפוננטה תקבל מערך של פריטים ותציג אותם ברשימה. בכל פעם שהמערך מתעדכן, אנגולר יפעיל את מנגנון Change Detection ויעדכן את התצוגה בהתאם.

הגדרת Change Detection באנגולר

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

import { ChangeDetectionStrategy, Component } from '@angular/core';

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class MyComponent {
  // קוד הקומפוננטה
}

בהגדרת ChangeDetectionStrategy.OnPush, אנו אומרים לאנגולר להפעיל את מנגנון Change Detection רק כאשר יש שינוי בערכים של הקומפוננטה או בקלטים שלה.

מתי להשתמש ב-OnPush?

OnPush מתאים כאשר יש לנו קומפוננטות שמקבלות נתונים מבחוץ ולא משנות את מצבן באופן פנימי. זה יכול להיות שימושי במיוחד כאשר אנו רוצים לשפר את ביצועי האפליקציה על ידי הפחתת מספר הפעלות מנגנון Change Detection.

לדוגמה, נניח שיש לנו קומפוננטה שמקבלת מערך של פריטים ומציגה אותם בטבלה:

<table>
  <tr *ngFor="let item of items">
    <td>{{ item.name }}</td>
    <td>{{ item.value }}</td>
  </tr>
</table>

כאשר המערך items מתעדכן, אנגולר יפעיל את מנגנון Change Detection ויעדכן את התצוגה בטבלה.

שימוש ב-Change Detector Ref

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

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

import { ChangeDetectorRef, Component } from '@angular/core';

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
})
export class MyComponent {
  constructor(private cdr: ChangeDetectorRef) {}

  updateData() {
    // ביצוע עדכון א-סינכרוני
    setTimeout(() => {
      // עדכון הנתונים
      this.cdr.detectChanges(); // הפעלת מנגנון Change Detection
    }, 1000);
  }
}

בדוגמה זו, אנו משתמשים ב-ChangeDetectorRef כדי להפעיל את מנגנון Change Detection לאחר עדכון הנתונים.

סיכום

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

אם אתם מעוניינים ללמוד בצורה מעמיקה יותר אתם מוזמנים להתייעץ איתנו על קורס אנגולר.

במאמר הבא נלמד על ניהול מתקדם של State באמצעות NgRx