Apakah pengesanan perubahan? Mari kita bincangkan tentang mekanisme perubahan sudut

Apakah pengesanan perubahan? Artikel berikut akan membincangkan tentang mekanisme pengesanan perubahan dalam Angular, dan memperkenalkan cara perubahan status memberitahu pengesanan perubahan dan strategi pengesanan perubahan sudut saya harap ia akan membantu semua orang.

1. Apakah itu pengesanan perubahan

• Ringkasan: Perubahan 检测机制 digunakan untuk melintasi pokok komponen , semak perubahan setiap komponen, dan cetuskan kemas kini DOM apabila sifat komponen berubah. [Tutorial berkaitan yang disyorkan: "tutorial sudut"]
• Tugas asas pengesanan perubahan: Dapatkan dalaman program 状态 dan sediakannya dalam antara muka pengguna 可见. Keadaan ini boleh menjadi sebarang objek, tatasusunan atau jenis data asas.

2. Apakah yang menyebabkan perubahan itu

Berdasarkan peristiwa, sumbernya merangkumi tiga kategori berikut:

• Acara : Klik halaman, serahkan, tetikus ke bawah...
• XHR: Dapatkan data daripada pelayan bahagian belakang
• Pemasa: setTimeout(), setInterval()

Beberapa titik ini mempunyai satu persamaan, iaitu, semuanya tidak segerak, iaitu semua 异步操作 ialah faktor punca yang boleh menyebabkan perubahan data, jadi apabila beberapa operasi tak segerak dilakukan, aplikasi kami keadaan mungkin berubah, Pada masa ini, anda perlu mengemas kini paparan

3. Bagaimana untuk memberitahu pengesanan perubahan perubahan status

Dalam Angular, NgZone disambungkan, dan ia datang Mendengar semua 异步事件 Angular, Angular akan menulis semula (melalui Zone.js) beberapa API penyemak imbas asas semasa permulaan (memintas dengan ganas semua acara tak segerak).

Terdapat dua cara biasa untuk mencetuskan pengesanan perubahan Satu kaedah adalah berdasarkan cangkuk kitaran hayat komponen

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

Kaedah lain adalah dengan mengawal pembukaan atau penutupan pengesanan perubahan secara manual mencetuskan secara manual

constructor(private cd: ChangeDetectorRef) {
  cd.detach()
  setInterval(() => {
    this.cd.detectChanges()
  }, 5000)
}

3. Pengesanan perubahan sudut

Inti Sudut ialah pengkomponenan, dan penyusunan komponen akhirnya akan membentuk pepohon 组件树. Pengesanan perubahan sudut boleh dibahagikan kepada komponen Setiap komponen mempunyai 变化检测器 ChangeDetector yang sepadan dengan pengesan perubahan ini juga akan membentuk pokok.
Dalam Angular, setiap komponen mempunyai pengesan perubahan sendiri, yang membolehkan kita mengawal cara dan bila pengesanan perubahan dilakukan untuk setiap komponen.

4. Perubahan strategi pengesanan

Angular juga memberi pembangun keupayaan untuk menyesuaikan strategi pengesanan perubahan.

• lalai: 每次Pengesanan perubahan akan menyebabkan pengesanan perubahan komponen, termasuk 其他组件 perubahan status dan 本组件perubahan nilai atribut dalaman pembolehubah rujukan
• Onpush: Setiap pengesanan perubahan akan melangkau semakan perubahan komponen ini, melainkan 满足一些条件

4.1 lalai

Perubahan lalai sudut Mekanisme pengesanan ialah ChangeDetectionStrategy.Default. Selepas setiap panggilan balik acara tak segerak tamat, NgZone akan mencetuskan 整个组件树 至上而下 untuk melakukan pengesanan perubahan

4.2 <span style="font-size: 18px;">onPush</span>onPush

跳过Strategi OnPush, digunakan untuk 所有子组件 komponen dan pengesanan perubahan

di bawahnya

OnPush sebenarnya menetapkan strategi

Pada masa hadapan, terdapat masih banyak cara untuk mencetuskan pengesanan perubahan;

• @Input1) 引用 atribut
perubahan komponen.
• DOM2) click、submit、mouse down peristiwa dalam komponen, termasuk peristiwa DOM sub-komponennya, seperti
.
• Observable3) Async pipe dalam komponen melanggan acara dan menetapkan
pada masa yang sama.
• ChangeDetectorRef.detectChanges()、ChangeDetectorRef.markForCheck()、ApplicationRef.tick()4) Gunakan kaedah
secara manual dalam komponen

5. Tukar rujukan objek pengesanan

• 子组件markForCheck( ): Digunakan dalam 该子组件到根组件, tandakan laluan antara 一定 dan maklumkan pengesan sudut untuk onPush menyemak komponen pada laluan ini semasa pengesanan perubahan seterusnya, walaupun jika strategi pengesanan perubahan ditetapkan kepada
• 该组件到各个子组件detectChanges(): Mulakan
pengesanan tukar secara manual
• 脱离detach(): Keluarkan pengesan komponen daripada bilangan pengesan
dan tidak lagi dikawal oleh mekanisme pengesanan melainkan disambungkan semula
• 重新链接reattach(): Letakkan pengesan tertanggal
ke dalam pepohon pengesan

Untuk lebih banyak pengetahuan berkaitan pengaturcaraan, sila lawati: Video Pengaturcaraan

! !

Atas ialah kandungan terperinci Apakah pengesanan perubahan? Mari kita bincangkan tentang mekanisme perubahan sudut. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!