Angular o‘zgarishlarni aniqlash (change detection)

O‘zgarishlarni aniqlash holati o‘zgarganda ko‘rinishni yangilaydi

Aniqlash asoslarini o‘zgartirish

• OnPush: Faqat kirishlar, hodisalar/sinxronlashtirilgan vazifalar va signal yangilanishlarini tekshiradi.
• Signallar: prognoz qilinadigan renderlar uchun holat o‘zgarishlari orqali yangilanishlarni aniq suring.
• Barqaror ro‘yxatlar: DOM buzilishining oldini olish uchun identifikatsiya uchun track/trackBy dan foydalaning.

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

@Component({ changeDetection: ChangeDetectionStrategy.OnPush })
class Demo {
  items = signal([{ id: 1, label: 'A' }]);
  add() { this.items.update(a => [...a, { id: Date.now(), label: 'N' }]); }
}

// Template: @for (it of items(); track it.id) { ... }

Misol tushuntirildi

• OnPush: component bashorat qilinadigan tekshiruvlar uchun ChangeDetectionStrategy.OnPush dan foydalanadi.
• Signallar: items - signal; update() qayta ko‘rsatishni ishga tushirish uchun massivni o‘zgarmas tarzda almashtiradi.
• Ro‘yxat identifikatori: DOM tugunlarini saqlash uchun shablon @for va track it.id bilan ishlaydi.

OnPush va signallar

• OnPush-ni bashorat qilinadigan yangilanishlar uchun signallar bilan birlashtiring.
• Shablonlarni oddiy saqlang va holat yangilanishlari orqali o‘zgarishlarni surish.

@Component({ changeDetection: ChangeDetectionStrategy.OnPush })
export class App { count = signal(0); inc() { this.count.set(this.count() + 1); } }

import { bootstrapApplication } from '@angular/platform-browser';
import { Component, signal, ChangeDetectionStrategy } from '@angular/core';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-root',
  standalone: true,
  changeDetection: ChangeDetectionStrategy.OnPush,
  imports: [CommonModule],
  template: `
    <h3>OnPush + Signals</h3>
    <p>Count: {{ count() }}</p>
    <button (click)="inc()">Increment</button>

    <ul>
      @for (it of items(); track it.id) {
        <li>{{ it.label }}</li>
      }
    </ul>
  `
})
export class App {
  count = signal(0);
  items = signal([{ id: 1, label: 'A' }, { id: 2, label: 'B' }]);
  inc() { this.count.set(this.count() + 1); }
}

bootstrapApplication(App);

<app-root></app-root>

Misol tushuntirildi

• OnPush + signallari: count signalini yangilash OnPush ostida yangilanishni ishga tushiradi.
• O‘sish: inc() yangi qiymatni o‘rnatadi (this.count.set(...)), bu ko‘rinishning yangilanishiga sabab bo‘ladi.
• Barqaror ro‘yxat: Ro‘yxat DOM buzilishini kamaytirish uchun @for ... track it.id dan foydalanadi.

Signal shakllari

• Olingan qiymatlar uchun computed() dan foydalaning; faqat bog‘liqliklar o‘zgarganda qayta hisoblaydi.
• Nojo‘ya ta’sirlar uchun effect() dan foydalaning (ro‘yxatga olish, sinxronlash); effektlarni yengil va idempotent saqlang.
• Shablonlardagi signallarni ularga chaqirish orqali o‘qing (masalan, {{ count() }} ).

import { signal, computed, effect } from '@angular/core';

const count = signal(0);
const double = computed(() => count() * 2);
effect(() => console.log('double =', double()));

Misol tushuntirildi

• signal(): Holatni ushlab turadi; uni chaqirish orqali o‘qing (count()).
• computed(): count dan double hosil qiladi va bog‘liqliklar o‘zgarganda qayta hisoblaydi.
• Effekt(): Har safar bog‘liqliklar yangilanganda nojo‘ya effektlarni ishga tushiradi (bu yerda jurnalga yozish).

Trek bilan barqaror massivlar

• DOM buzilishining oldini olish uchun track dan noyob kalit bilan foydalaning (*ngFor uchun trackBy bilan bir xil fikr).
• Ro‘yxatni tez va bashoratli ko‘rsatishni davom ettiradi.

@for (it of items(); track it.id) { <li>{{ it.label }}</li> }