Cara Kerja Deteksi Perubahan
Pahami siklus deteksi perubahan Angular.
Cara Kerja Deteksi Perubahan adalah pelajaran Angular Academy gratis di CoddyKit. Ini adalah pelajaran 1 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.
Apa Itu Deteksi Perubahan
Deteksi perubahan adalah proses yang digunakan Angular untuk menjaga DOM tetap selaras dengan keadaan komponen Anda. Saat data berubah, Angular mengevaluasi ulang pengikatan dan hanya memperbarui bagian yang berbeda.
Siklus Deteksi
Angular menelusuri pohon komponen dari akar ke bawah dan memeriksa pengikatan setiap komponen. Lintasan dari atas ke bawah ini merupakan satu siklus deteksi perubahan (tick).
Apa yang Memicu Tick?
Secara bawaan, Angular menjalankan deteksi perubahan setelah peristiwa asinkron: peristiwa DOM, pengatur waktu, dan respons HTTP. Proses ini dikoordinasikan oleh Zone.js.
Zone.js
Zone.js melakukan monkey patch pada API asinkron (setTimeout, addEventListener, Promise, XHR) agar Angular mengetahui kapan salah satunya selesai dan kapan tick mungkin diperlukan.
// Patched by Zone.js:
setTimeout(() => this.count++, 1000);
// After the timer, Angular runs change detection.NgZone
NgZone membungkus Zone.js untuk Angular. Anda dapat menjalankan kode di luar zone Angular agar tidak memicu deteksi perubahan untuk loop yang sering dijalankan.
private zone = inject(NgZone);
this.zone.runOutsideAngular(() => {
// heavy work, no CD triggered
});Masuk Kembali ke Zone
Untuk memperbarui UI dari luar zone, masuk kembali ke dalamnya dengan run agar Angular menjadwalkan tick.
this.zone.run(() => {
this.ready = true;
});Strategi Bawaan
Dengan strategi bawaan, setiap komponen diperiksa pada setiap tick. Cara ini sederhana dan aman, tetapi dapat memboroskan sumber daya pada pohon yang besar.
Perbandingan Pengikatan
Angular membandingkan nilai setiap pengikatan saat ini dengan nilai sebelumnya menggunakan Object.is. Jika tidak berubah, DOM tidak disentuh.
Ekspresi Harus Murni
Ekspresi templat dijalankan pada setiap pemeriksaan, sehingga harus cepat dan bebas efek samping. Hindari memanggil fungsi mahal secara langsung di dalam templat.
<!-- Avoid: runs every tick -->
<p>{{ computeExpensiveTotal() }}</p>ExpressionChangedAfterChecked
Dalam mode pengembangan, Angular menjalankan lintasan verifikasi kedua. Jika suatu nilai berubah di antara kedua lintasan, Anda mendapatkan ExpressionChangedAfterItHasBeenCheckedError, yang menandakan keadaan berubah selama rendering.
Kendali Manual
Injeksikan ChangeDetectorRef untuk mengendalikan deteksi: markForCheck(), detectChanges(), dan detach() memberikan kendali terperinci.
private cdr = inject(ChangeDetectorRef);
this.cdr.detectChanges();Pemeriksaan Singkat
Uji pemahaman Anda tentang deteksi perubahan.
Rangkuman
Anda telah mempelajari bahwa deteksi perubahan merupakan lintasan pohon dari atas ke bawah yang menyelaraskan keadaan dengan DOM, dipicu oleh peristiwa asinkron melalui Zone.js/NgZone, dengan membandingkan pengikatan menggunakan Object.is. ChangeDetectorRef memberikan kendali manual.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Cara Kerja Deteksi Perubahan” gratis?
Ya — teks lengkap “Cara Kerja Deteksi Perubahan” 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 “Cara Kerja Deteksi Perubahan”?
Pahami siklus deteksi perubahan Angular. 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 1 dari 4.
Berapa lama pelajaran “Cara Kerja Deteksi Perubahan” 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
- Cara Kerja Deteksi Perubahan
- Deteksi Perubahan OnPush
- Angular Tanpa Zona
- Mengoptimalkan Daftar dan Rendering