تشخیص تغییر Angular را بهینه کنید

برای درک نحوه عملکرد تشخیص تغییر Angular، بیایید به یک برنامه نمونه نگاه کنیم!

می توانید کد برنامه را در این مخزن GitHub پیدا کنید.

این برنامه کارمندان دو بخش در یک شرکت - فروش و تحقیق و توسعه - را فهرست می کند و دارای دو جزء است:

• AppComponent که جزء اصلی برنامه است و
• دو نمونه از EmployeeListComponent ، یکی برای فروش و دیگری برای تحقیق و توسعه.

می توانید دو نمونه EmployeeListComponent را در قالب AppComponent مشاهده کنید:

<app-employee-list
  [data]="salesList"
  department="Sales"
  (add)="add(salesList, $event)"
  (remove)="remove(salesList, $event)"
></app-employee-list>

<app-employee-list
  [data]="rndList"
  department="R&D"
  (add)="add(rndList, $event)"
  (remove)="remove(rndList, $event)"
></app-employee-list>

برای هر کارمند یک نام و یک مقدار عددی وجود دارد. این برنامه مقدار عددی کارمند را به یک محاسبه تجاری ارسال می کند و نتیجه را روی صفحه نمایش می دهد.

اکنون نگاهی به EmployeeListComponent بیندازید:

const fibonacci = (num: number): number => {
  if (num === 1 || num === 2) {
    return 1;
  }
  return fibonacci(num - 1) + fibonacci(num - 2);
};

@Component(...)
export class EmployeeListComponent {
  @Input() data: EmployeeData[];
  @Input() department: string;
  @Output() remove = new EventEmitter<EmployeeData>();
  @Output() add = new EventEmitter<string>();

  label: string;

  handleKey(event: any) {
    if (event.keyCode === 13) {
      this.add.emit(this.label);
      this.label = '';
    }
  }

  calculate(num: number) {
    return fibonacci(num);
  }
}

EmployeeListComponent لیستی از کارکنان و نام بخش را به عنوان ورودی می پذیرد. هنگامی که کاربر سعی می کند یک کارمند را حذف یا اضافه کند، جزء خروجی مربوطه را راه اندازی می کند. مؤلفه همچنین روش calculate را تعریف می کند که محاسبات تجاری را پیاده سازی می کند.

در اینجا الگوی EmployeeListComponent آمده است:

<h1 title="Department">{{ department }}</h1>
<mat-form-field>
  <input placeholder="Enter name here" matInput type="text" [(ngModel)]="label" (keydown)="handleKey($event)">
</mat-form-field>
<mat-list>
  <mat-list-item *ngFor="let item of data">
    <h3 matLine title="Name">
      {{ item.label }}
    </h3>
    <md-chip title="Score" class="mat-chip mat-primary mat-chip-selected" color="primary" selected="true">
      {{ calculate(item.num) }}
    </md-chip>
  </mat-list-item>
</mat-list>

این کد روی همه کارمندان لیست تکرار می شود و برای هر یک، یک آیتم لیست را ارائه می دهد. همچنین شامل یک دستورالعمل ngModel برای اتصال داده دو طرفه بین ورودی و ویژگی label اعلام شده در EmployeeListComponent است.

با دو نمونه EmployeeListComponent ، برنامه درخت مؤلفه زیر را تشکیل می دهد:

AppComponent جزء اصلی برنامه است. اجزای فرزند آن دو نمونه از EmployeeListComponent هستند. هر نمونه دارای فهرستی از موارد (E ₁ ، E ₂ ، و غیره) است که نشان دهنده تک تک کارمندان در بخش است.

هنگامی که کاربر شروع به وارد کردن نام یک کارمند جدید در کادر ورودی در یک EmployeeListComponent می کند، Angular تشخیص تغییر را برای کل درخت مؤلفه شروع می کند که از AppComponent شروع می شود. این بدان معنی است که در حالی که کاربر در حال تایپ متن ورودی است، Angular به طور مکرر مقادیر عددی مرتبط با هر کارمند را مجدداً محاسبه می کند تا تأیید کند که از آخرین بررسی تغییری نکرده است.

برای اینکه ببینید چقدر این می تواند کند باشد، نسخه غیربهینه پروژه را در StackBlitz باز کنید و نام کارمند را وارد کنید.

با راه‌اندازی پروژه نمونه و باز کردن برگه Performance در Chrome DevTools، می‌توانید تأیید کنید که کاهش سرعت ناشی از تابع fibonacci است.

1. «Control+Shift+J» (یا «Command+Option+J» در Mac) را فشار دهید تا DevTools باز شود.
2. روی تب Performance کلیک کنید.

حالا روی Record کلیک کنید (در گوشه سمت چپ بالای پانل Performance ) و شروع به تایپ در یکی از کادرهای متنی در برنامه کنید. در چند ثانیه روی Record کلیک کنید دوباره ضبط را متوقف کنید. هنگامی که Chrome DevTools تمام داده‌های نمایه‌ای را که جمع‌آوری کرده است پردازش می‌کند، چیزی شبیه به این خواهید دید:

اگر تعداد زیادی کارمند در لیست وجود داشته باشد، این فرآیند ممکن است رشته رابط کاربری مرورگر را مسدود کند و باعث افت فریم شود که منجر به تجربه کاربری بدی می شود.

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

@Component({
  selector: 'app-employee-list',
  template: `...`,
  changeDetection: ChangeDetectionStrategy.OnPush,
  styleUrls: ['employee-list.component.css']
})
export class EmployeeListComponent {...}

import { Pipe, PipeTransform } from '@angular/core';

const fibonacci = (num: number): number => {
  if (num === 1 || num === 2) {
    return 1;
  }
  return fibonacci(num - 1) + fibonacci(num - 2);
};

@Pipe({
  name: 'calculate'
})
export class CalculatePipe implements PipeTransform {
  transform(val: number) {
    return fibonacci(val);
  }
}

<mat-chip-list>
  <md-chip>
    {{ item.num | calculate }}
  </md-chip>
</mat-chip-list>