ஆங்குலர் மாற்றம் கண்டறிதல் & செயல்திறன்
மாற்றம் கண்டறிதல் மாநிலம் மாறும்போது பார்வையைப் புதுப்பிக்கிறது
மாற்றம் கண்டறிதல் அடிப்படைகள்
OnPush
உள்ளீடுகள், நிகழ்வுகள்/அசிங்க்ரோனஸ் பணிகள் மற்றும் சிக்னல் புதுப்பிப்புகளில் மட்டுமே சோதிக்கிறது.
சிக்னல்கள்
கணிக்கக்கூடிய வழங்கல்களுக்கான மாநில மாற்றங்கள் மூலம் முன்னோக்கு புதுப்பிப்புகள்.
நிலையான பட்டியல்கள்
DOM churn தவிர்க்க அடையாளத்திற்கு track/trackBy பயன்படுத்தவும்.
மாற்றம் கண்டறிதல் எடுத்துக்காட்டு
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) { ... }எடுத்துக்காட்டு விளக்கம்:
- OnPush: கூறு கணிக்கக்கூடிய சோதனைகளுக்கு ChangeDetectionStrategy.OnPush ஐப் பயன்படுத்துகிறது.
- சிக்னல்கள்: items ஒரு சிக்னல்; மீண்டும் வழங்கலைத் தொடங்க update() வரிசையை மாற்ற முடியாத முறையில் மாற்றுகிறது.
- பட்டியல் அடையாளம்: டெம்ப்ளேட் @for மற்றும் track it.id உடன் சுழல்கிறது, DOM முனைகளைப் பாதுகாக்கிறது.
தொடர்புடையவை:
- பட்டியல்கள், சிக்னல்கள் மற்றும் கூறுகள் ஆகியவற்றைப் பார்க்கவும்.
- சிக்னல்களுடன், OnPush தானாகவே புதுப்பிக்கிறது.
- DOM churn தடுக்க trackBy (அல்லது @for உடன் track) பயன்படுத்தவும்.
OnPush மற்றும் சிக்னல்கள்
கணிக்கக்கூடிய புதுப்பிப்புகளுக்கு OnPush ஐ சிக்னல்களுடன் இணைக்கவும்.
டெம்ப்ளேட்டுகளை எளிதாக வைத்திருக்கவும் மற்றும் மாநில புதுப்பிப்புகள் மூலம் மாற்றங்களைத் தள்ளவும்.
OnPush + சிக்னல்கள் எடுத்துக்காட்டு
@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);எடுத்துக்காட்டு விளக்கம்:
- OnPush + சிக்னல்கள்: count சிக்னலைப் புதுப்பித்தல் OnPush கீழ் ஒரு புதுப்பிப்பைத் தொடங்குகிறது.
- அதிகரிப்பு: inc() ஒரு புதிய மதிப்பை அமைக்கிறது (this.count.set(...)), பார்வையைப் புதுப்பிக்கக் காரணமாகிறது.
- நிலையான பட்டியல்: பட்டியல் DOM churn குறைக்க @for ... track it.id ஐப் பயன்படுத்துகிறது.
உதவிக்குறிப்புகள்:
- மாற்ற முடியாத புதுப்பிப்புகள்: OnPush மாற்றங்களைக் கண்டறிய புதிய பொருள்/வரிசை குறிப்புகளை உருவாக்கவும்.
- ஆழமான மாற்றத்தைத் தவிர்க்கவும்: குறிப்பை மாற்றாமல் கூடிய புலங்களை மாற்றுவது மீண்டும் வழங்காது.
- அது இயங்கும்போது: OnPush உள்ளீடு மாற்றங்கள், நிகழ்வுகள்/அசிங்க்ரோனஸ் பணிகள் மற்றும் சிக்னல் புதுப்பிப்புகளில் சோதிக்கிறது.
சிக்னல் முறைகள்
பெறப்பட்ட மதிப்புகளுக்கு computed() பயன்படுத்தவும்; சார்புகள் மாறும்போது மட்டுமே மீண்டும் கணக்கிடுகிறது.
பக்க விளைவுகளுக்கு (பதிவு, ஒத்திசைத்தல்) effect() பயன்படுத்தவும்; விளைவுகளை இலகுவாகவும் idempotent ஆகவும் வைத்திருக்கவும்.
டெம்ப்ளேட்டுகளில் சிக்னல்களை அழைப்பதன் மூலம் படிக்கவும் (எ.கா., {{ count() }}).
சிக்னல் முறைகள் எடுத்துக்காட்டு
import { signal, computed, effect } from '@angular/core';
const count = signal(0);
const double = computed(() => count() * 2);
effect(() => console.log('double =', double()));எடுத்துக்காட்டு விளக்கம்:
- signal(): மாநிலத்தை வைத்திருக்கிறது; அதை அழைப்பதன் மூலம் படிக்கவும் (count()).
- computed(): count இலிருந்து double பெறுகிறது மற்றும் சார்புகள் மாறும்போது மீண்டும் கணக்கிடுகிறது.
- effect(): அதன் சார்புகள் புதுப்பிக்கும் போதெல்லாம் பக்க விளைவுகளை இயக்குகிறது (இங்கே பதிவு).
track உடன் நிலையான பட்டியல்கள்
DOM churn தடுக்க ஒரு தனிப்பட்ட விசையுடன் track பயன்படுத்தவும் (*ngFor க்கான trackBy போன்ற கருத்து).
பட்டியல் வழங்கலை விரைவாகவும் கணிக்கக்கூடியதாகவும் வைத்திருக்கிறது.
track உடன் பட்டியல் எடுத்துக்காட்டு
@for (it of items(); track it.id) { <li>{{ it.label }}</li> }விசை தேர்வு
நிலையான தனிப்பட்ட IDகளைப் பயன்படுத்தவும்; உருப்படிகள் மறுசீரமைக்க முடிந்தால் வரிசை குறியீட்டைத் தவிர்க்கவும்.
கட்டுப்பாடு பாய்வு தொடரியல்
@for உடன், @for (it of items(); track it.id) போன்று track.
மாநிலப் பாதுகாப்பு
கண்காணிப்பு தேவையின்றி DOM மற்றும் கூறு மாநிலத்தை அழிப்பது/மீண்டும் உருவாக்குவதைத் தடுக்கிறது.
செயல்திறன் உதவிக்குறிப்புகள்:
- இரட்டை சோதனை தவிர்க்கவும்: track இல்லாமல், ஆங்குலர் ஒவ்வொரு மாற்றத்திலும் DOM உறுப்புகளை அழிக்கலாம் மற்றும் மீண்டும் உருவாக்கலாம்.
- நிலையான அடையாளங்களைப் பயன்படுத்தவும்: எப்போதும் தரவு மாதிரியில் நிலையான id புலங்களை வழங்கவும்.
- index ஐத் தவிர்க்கவும்: track $index வரிசை மறுசீரமைக்கப்படும்போது செயல்திறன் சிக்கல்களை ஏற்படுத்தும்.
செயல்திறன் சிறந்த பயிற்சிகள்
| பயிற்சி | செய்ய | செய்ய வேண்டாம் | காரணம் |
|---|---|---|---|
| மாற்றம் கண்டறிதல் | OnPush மூலோபாயத்தைப் பயன்படுத்தவும் | இயல்புநிலை கண்டறிதலை மட்டும் நம்பியிருக்கவும் | செயல்திறன் கணிசமாக மேம்படுகிறது |
| பட்டியல் வழங்கல் | track அல்லது trackBy பயன்படுத்தவும் | வரிசை குறியீட்டால் கண்காணிக்கவும் | DOM churn குறைகிறது |
| மாநில மேலாண்மை | சிக்னல்கள் மற்றும் computed() பயன்படுத்தவும் | மாற்ற முடியாத மாற்றங்கள் | கணிக்கக்கூடிய புதுப்பிப்புகள் |
| பக்க விளைவுகள் | effect() ஐ இலகுவாக வைத்திருக்கவும் | கனரக கணக்கீடுகளை effect() இல் வைக்கவும் | பயனர் இடைமுகத்தில் தாமதம் |
| தரவு மாற்றம் | கூறுகளில் தரவை மாற்றவும் | டெம்ப்ளேட்டுகளில் சிக்கலான தர்க்கம் | மீண்டும் கணக்கீட்டைக் குறைக்கிறது |
ஜாஸிஃப் குழு பரிந்துரை:
எல்லா புதிய ஆங்குலர் கூறுகளுக்கும் ChangeDetectionStrategy.OnPush ஐப் பயன்படுத்தவும். ஆங்குலர் சிக்னல்களுடன் இணைந்து, இது கணிசமான செயல்திறன் மேம்பாடுகளை வழங்குகிறது. பட்டியல் வழங்கலுக்கு எப்போதும் track அல்லது trackBy ஐப் பயன்படுத்தவும், மேலும் மாநில மாற்றங்களுக்கு மாற்ற முடியாத புதுப்பிப்புகளைப் பயன்படுத்தவும்.
பயிற்சி
எந்த ஆங்குலர் மாற்றம் கண்டறிதல் மூலோபாயம் குறிப்பிட்ட தூண்டுதல்களுக்கு சோதனைகளைக் கட்டுப்படுத்துகிறது?