Beranda>Tutorial Desain Web>Tutorial Javascript

Apa itu deteksi perubahan? Mari kita bicara tentang mekanisme perubahan sudut

Penulis：Eve Cole Waktu Pembaruan：2022-06-02 14:05:53

Apa itu deteksi perubahan? Artikel berikut akan membahas tentang mekanisme deteksi perubahan di Angular, memperkenalkan bagaimana perubahan status memberitahukan deteksi perubahan, dan strategi deteksi perubahan Angular. Saya harap ini dapat bermanfaat bagi semua orang.

1. Apa yang dimaksud dengan deteksi perubahan?

  • Ringkasan:检测机制perubahan yang melintasi pohon komponen, memeriksa perubahan di setiap komponen, dan memicu pembaruan DOM ketika properti komponen berubah. [Tutorial terkait yang direkomendasikan: "tutorial sudut"]

  • Tugas dasar deteksi perubahan: Mendapatkan状态internal program dan membuatnya可见di antarmuka pengguna. Status ini dapat berupa objek, larik, atau tipe data dasar apa pun.

2. Apa yang menyebabkan perubahan tersebut?

Sumber berdasarkan peristiwa terbagi dalam tiga kategori berikut:

  • Acara: klik halaman, kirim, arahkan mouse...

  • XHR: Dapatkan data dari server backend

  • Pengatur waktu: setTimeout(), setInterval()

Poin-poin ini memiliki satu kesamaan, yaitu semuanya asynchronous, artinya semua异步操作adalah faktor akar yang dapat menyebabkan perubahan data, jadi setiap kali beberapa operasi asynchronous dilakukan, status aplikasi kita dapat berubah. Saat ini, Anda perlu memperbarui tampilan

3. Cara memberitahukan deteksi perubahan perubahan status

Di Angular NgZone terhubung, yang memantau semua异步事件Angular akan menulis ulang (melalui Zone.js ) beberapa API browser yang mendasarinya saat startup (dengan kasar mencegat semua kejadian asinkron).

Ada dua cara umum untuk memicu deteksi perubahan. Salah satu metode didasarkan pada kaitan siklus hidup komponen.

 ngAfterViewChecked() {
console.log('cluster-master.component cd');
}

Metode lainnya adalah dengan mengaktifkan atau menonaktifkan deteksi perubahan secara manual dan memicunya secara manual

 konstruktor(cd pribadi: ChangeDetectorRef) {
cd.detach()
setInterval(() => {
ini.cd.deteksiPerubahan()
}, 5000)
}

3. Deteksi perubahan sudut

Inti dari Angular adalah komponenisasi. Pengumpulan komponen pada akhirnya akan membentuk组件树. Deteksi perubahan Angular dapat dibagi menjadi beberapa komponen. Setiap komponen memiliki变化检测器ChangeDetector yang sesuai. Dapat dibayangkan bahwa detektor perubahan ini juga akan membentuk pohon.
Di Angular, setiap komponen memiliki pendeteksi perubahannya sendiri, yang memungkinkan kita mengontrol bagaimana dan kapan deteksi perubahan dilakukan untuk setiap komponen.

4. Ubah strategi deteksi

Angular juga memberi pengembang kemampuan untuk menyesuaikan strategi deteksi perubahan.

  • default:每次deteksi perubahan akan menyebabkan deteksi perubahan pada komponen, termasuk perubahan status其他组件dan perubahan nilai atribut internal dari variabel referensi本组件

  • Onpush: Setiap deteksi perubahan akan melewati pemeriksaan perubahan komponen ini kecuali满足一些条件.

4.1 bawaan

Mekanisme deteksi perubahan default Angular adalah ChangeDetectionStrategy.Default . Setelah setiap panggilan balik peristiwa asinkron berakhir, NgZone akan memicu整个组件树untuk melakukan deteksi perubahan至上而下

4.2 onPush

Strategi OnPush, digunakan untuk跳过deteksi perubahan suatu komponen dan所有子组件di bawahnya

Faktanya, setelah menetapkan kebijakan OnPush , masih banyak cara untuk memicu deteksi perubahan;

  • 1)引用atribut @Input komponen berubah.

  • 2) Peristiwa DOM dalam komponen, termasuk peristiwa DOM subkomponennya, seperti click、submit、mouse down .

  • 3) Observable dalam komponen berlangganan acara tersebut dan menyetel Async pipe pada saat yang bersamaan.

  • 4) Gunakan metode ChangeDetectorRef.detectChanges()、ChangeDetectorRef.markForCheck()、ApplicationRef.tick() secara manual di komponen

5. Ubah referensi objek deteksi

  • markForCheck(): Digunakan untuk子组件该子组件到根组件, memberi tahu detektor sudut一定memeriksa komponen di jalur ini selama deteksi perubahan berikutnya, meskipun strategi deteksi perubahan disetel ke onPush

  • detectorChanges(): Memulai deteksi perubahan secara manual dari该组件到各个子组件

  • detach():脱离detektor komponen dari jumlah detektor dan tidak lagi dikontrol oleh mekanisme deteksi kecuali dipasang kembali.

  • reattach():重新链接detektor yang terlepas ke pohon detektor

Artikel Terkait