Tukar Pengesanan Dalam Angular: Semua yang Anda Perlu Tahu

Analisis mendalam mengenai mekanisme pengesanan perubahan sudut

Artikel ini akan meneroka mekanisme pengesanan perubahan Angular secara mendalam, mendedahkan prinsip operasi asasnya, dan memberikan strategi pengoptimuman. Terdapat sedikit maklumat mengenai topik ini di Internet.

Konsep teras: Lihat (Lihat)

Aplikasi sudut tidak terdiri daripada komponen sahaja, tetapi melihat pokok. Setiap komponen sepadan dengan pandangan, iaitu unit asas dalam seni bina UI sudut, dan bertanggungjawab untuk mengendalikan semua pemeriksaan harta dan kemas kini DOM. Keterangan pandangan dalam kod sumber adalah seperti berikut:

Lihat adalah blok bangunan asas ui aplikasi. Ia adalah kumpulan terkecil unsur -unsur yang dicipta dan dimusnahkan bersama.

Ciri -ciri unsur -unsur dalam pandangan boleh diubah, tetapi struktur (nombor dan perintah) unsur -unsur dalam pandangan tidak dapat diubah. Menukar struktur elemen hanya boleh dilakukan dengan memasukkan, bergerak, atau memadam pandangan bersarang menggunakan ViewContainerRef. Setiap paparan boleh mengandungi pelbagai bekas pandangan.

Dalam artikel ini, kami menggunakan pandangan komponen dan konsep komponen secara bergantian. Harus diingat bahawa banyak artikel web dan jawapan limpahan stack merujuk kepada pandangan yang diterangkan di sini sebagai "objek pengesanan perubahan" atau "ChangeTetectorRef". Malah, tidak ada objek pengesanan perubahan berasingan dalam sudut, perubahan pengesanan secara langsung bertindak pada pandangan.

Setiap paparan dikaitkan dengan subviewnya melalui harta

, yang membolehkan tindakan dilakukan pada subview. nodes

Lihat status (ViewState) Pandangan mempunyai menyatakan, yang memainkan peranan penting dalam menentukan sama ada untuk menjalankan pengesanan perubahan untuk pandangan dan semua subviewnya. Negeri -negeri penting termasuk:

: Menunjukkan sama ada pandangan adalah pemeriksaan pertama.
1. FirstCheck
: Menunjukkan sama ada untuk membolehkan perubahan pengesanan pandangan.
2. ChecksEnabled
: Menunjukkan sama ada ralat berlaku dalam pandangan.
3. Errored
: Menunjukkan sama ada pandangan telah dimusnahkan.
4. Destroyed
Jika

adalah

, atau pandangannya berada di dalam ChecksEnabled atau false, pengesanan perubahan pandangan dan subviewnya dilangkau. Secara lalai, semua pandangan dimulakan dengan Errored kecuali Destroyed digunakan. ChangeDetectionStrategy.OnPush ChecksEnabled Angular menyediakan konsep canggih untuk memanipulasi pandangan, seperti

, yang merangkumi pandangan komponen yang mendasari dan mempunyai kaedah

. Apabila peristiwa tak segerak berlaku, sudut mencetuskan pengesanan perubahan tahap tertinggi ViewRef, yang secara rekursif mengesan subview selepas pengesanan perubahannya sendiri. detectChanges ViewRef ViewRef boleh disuntik ke dalam pembina komponen melalui token

:

ChangeDetectorRef ViewRef

Perubahan Operasi Pengesanan

export class AppComponent {
  constructor(cd: ChangeDetectorRef) { ... }
}

Fungsi adalah logik utama yang bertanggungjawab untuk menjalankan pengesanan perubahan pandangan. Fungsi ini memanggilnya secara rekursif, bermula dari komponen tuan rumah, memeriksa setiap komponen dan subkomponennya pula. checkAndUpdateView

Apabila fungsi dipecat, ia menjalankan operasi mengikut urutan berikut:

set
1. . ViewState.firstCheck
Semak dan kemas kini sifat input subkomponen/contoh arahan.
Kemas kini status pengesanan perubahan subview (sebahagian daripada pelaksanaan strategi pengesanan perubahan).
Jalankan pengesanan perubahan pandangan tertanam (ulangi langkah -langkah di atas).
Jika perubahan yang mengikat, cangkuk kitaran
5. komponen kanak -kanak dipanggil. OnChanges
Panggilan
6. dan OnInit cangkuk kitaran subkomponen (ngDoCheck dipanggil hanya pada cek pertama). OnInit
Kemas kini senarai pertanyaan
7. Komponen Komponen Subview. ContentChildren
Panggil
8. dan AfterContentInit cangkuk kitaran hayat contoh subkomponen (AfterContentChecked dipanggil hanya pada cek pertama). AfterContentInit
Jika sifat -sifat perubahan komponen paparan semasa, kemas kini interpolasi DOM dari paparan semasa.
Jalankan pengesanan perubahan subview (ulangi langkah -langkah di atas).
Kemas kini senarai pertanyaan
11. untuk contoh komponen paparan semasa. ViewChildren
Panggil
12. dan AfterViewInit cangkuk kitaran hayat contoh subkomponen (AfterViewChecked dipanggil hanya pada cek pertama). AfterViewInit
Lumpuhkan pemeriksaan pandangan semasa (sebahagian daripada pelaksanaan dasar pengesanan perubahan).

perubahan strategi pengesanan dan pencetus manual Dasar ini dapat mengurangkan overhead prestasi dengan ketara kerana ia hanya melakukan pengesanan perubahan apabila perubahan data sebenar, seperti perubahan atribut input atau pelancaran peristiwa yang jelas.

ChangeDetectionStrategy.OnPush menyediakan kaedah seperti

,

dan ChangeDetectorRef untuk membolehkan lebih banyak kawalan pengesanan perubahan, terutamanya dalam aplikasi yang besar dan kompleks. detectChanges() markForCheck() detach() (berikut akan memperkenalkan secara terperinci kaedah penggunaan

dan strategi pengoptimuman untuk pengesanan perubahan, termasuk senario aplikasi tertentu dan kod sampel

, , ChangeDetectorRef dan detach() kaedah reattach() markForCheck() (seluruh artikel akan terus meneroka cara menggunakan kaedah ini untuk mengoptimumkan prestasi, dan menyediakan beberapa senario aplikasi praktikal dan contoh kod.) detectChanges()

(Akhirnya, artikel itu akan meringkaskan soalan -soalan yang sering ditanya mengenai pengesanan perubahan sudut, yang meliputi strategi OnPush, teknik pengoptimuman pengesanan perubahan, peranan zon, dan kaedah untuk pengesanan perubahan debug.)

Atas ialah kandungan terperinci Tukar Pengesanan Dalam Angular: Semua yang Anda Perlu Tahu. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!