Angular Academy · Pelajaran

Deteksi Perubahan OnPush

Kurangi pemeriksaan dengan strategi OnPush.

Deteksi Perubahan OnPush adalah pelajaran Angular Academy gratis di CoddyKit. Ini adalah pelajaran 2 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Angular Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Angular Academy mencakup 4 pelajaran total.

Masalah Performa

Strategi default memeriksa setiap komponen pada setiap siklus. Dalam aplikasi besar, dampaknya akan terakumulasi. OnPush memberi tahu Angular untuk melewati suatu komponen kecuali ada sesuatu yang relevan berubah.

Mengaktifkan OnPush

Tetapkan opsi changeDetection pada komponen.

@Component({
  selector: 'app-user',
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: '{{ user().name }}'
})
export class UserComponent {}

Kapan OnPush Memeriksa Ulang

Komponen OnPush hanya diperiksa ketika: referensi @Input berubah, suatu peristiwa dipicu dari templatnya, observable yang diikat dengan async memancarkan nilai, atau Anda memanggil markForCheck().

Kesetaraan Referensi Input

OnPush membandingkan referensi input dengan Object.is. Mengubah objek secara langsung tidak memicu pemeriksaan ulang; Anda harus meneruskan referensi baru.

// Mutation: ignored by OnPush
this.user.name = 'New';
// New reference: detected
this.user = { ...this.user, name: 'New' };

Imutabilitas Membantu

OnPush berpadu secara alami dengan data yang tidak dapat diubah. Selalu buat objek/larik baru alih-alih mengubah data, agar pemeriksaan referensi dapat mendeteksi perubahan dengan andal.

this.items = [...this.items, newItem];

Peristiwa Tetap Berfungsi

Peristiwa dari templat komponen itu sendiri (klik, input) secara otomatis menandai komponen untuk diperiksa, sehingga interaktivitas lokal berfungsi tanpa kode tambahan.

<button (click)="count.set(count() + 1)">+</button>

Pipa async

Pipa async memanggil markForCheck() ketika observable-nya memancarkan nilai, sehingga OnPush dapat bekerja lancar dengan aliran data.

<p>{{ data$ | async }}</p>

markForCheck

Saat Anda memperbarui keadaan di luar pemicu normal, panggil markForCheck() untuk menjadwalkan komponen (beserta leluhurnya) pada siklus berikutnya.

private cdr = inject(ChangeDetectorRef);
this.cdr.markForCheck();

Sinyal dan OnPush

Sinyal terintegrasi dengan OnPush: membaca sinyal di dalam templat mendaftarkan dependensi, dan memperbaruinya secara otomatis menandai komponen untuk diperiksa, tanpa memerlukan pemanggilan manual.

count = signal(0);
increment() { this.count.update(c => c + 1); }

Propagasi OnPush

Saat ditandai, komponen dan semua leluhurnya hingga akar diberi penanda agar jalurnya diperiksa. Komponen anak di bawahnya diperiksa secara normal.

Praktik Terbaik

Jadikan OnPush sebagai default untuk komponen baru. Jika dipadukan dengan sinyal atau input yang tidak dapat diubah, cara ini secara drastis mengurangi pekerjaan yang tidak perlu.

Pemeriksaan Singkat

Uji pemahaman Anda tentang OnPush.

Ringkasan

Anda telah mempelajari bahwa ChangeDetectionStrategy.OnPush melewati pemeriksaan kecuali referensi input berubah, peristiwa templat dipicu, pipa async memancarkan nilai, atau Anda memanggil markForCheck(). Strategi ini paling cocok dipadukan dengan data yang tidak dapat diubah dan sinyal.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Deteksi Perubahan OnPush” gratis?

Ya — teks lengkap “Deteksi Perubahan OnPush” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Angular Academy, upgrade ke CoddyKit PRO. Kursus Angular Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Deteksi Perubahan OnPush”?

Kurangi pemeriksaan dengan strategi OnPush. Kamu berlatih Angular Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Angular Academy?

Tidak diperlukan pengalaman sebelumnya. Angular Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 2 dari 4.

Berapa lama pelajaran “Deteksi Perubahan OnPush” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Angular Academy ini?

Ya. Setiap pelajaran Angular Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke Angular Academy