Evolusi Pengesanan Perubahan daripada Angular zone.js) kepada Angular (menyediakanExperimentalZonelessChangeDetection)

Pengesanan perubahan ialah aspek asas Sudut, bertanggungjawab untuk mengenal pasti dan mengemas kini bahagian DOM yang telah berubah sebagai tindak balas kepada pengubahsuaian data atau interaksi pengguna. Proses ini memastikan bahawa UI kekal konsisten dengan data asas, meningkatkan pengalaman pengguna dan prestasi aplikasi.

Peranan Zon.js

Secara sejarah, Angular telah bergantung pada Zone.js untuk mekanisme pengesanan perubahannya. Zone.js ialah perpustakaan JavaScript yang memintas operasi tak segerak, membenarkan Angular memantau perubahan dan mencetuskan kemas kini dengan sewajarnya. Walau bagaimanapun, kemasukan Zone.js boleh menambah overhed pada aplikasi, terutamanya dalam senario dengan aktiviti tak segerak yang kerap.

Strategi Pengesanan Perubahan

Angular menyediakan dua strategi pengesanan perubahan utama:

• Lalai: Pengesanan perubahan dicetuskan selepas setiap cangkuk kitaran hayat, seperti ngOnInit atau ngAfterViewInit. Strategi ini mudah tetapi boleh membawa kepada kemas kini DOM yang tidak diperlukan, terutamanya dalam aplikasi besar.

@Component({
  selector: 'app-my-component',
  template: `
    <p>{{ message }}</p>
  `
})
export class MyComponent {
  message = 'Hello, world!';
}

Strategi ini lebih mudah untuk dilaksanakan, kerana Angular mengendalikan kebanyakan logik pengesanan perubahan secara automatik.
Cabaran terbesar dengan strategi pengesanan perubahan ini ialah ia membawa kepada kemas kini DOM yang tidak diperlukan yang menjadi kritikal untuk aplikasi besar.

• OnPush: Pengesanan perubahan dicetuskan hanya apabila sifat input atau pemerhatian tak segerak berubah. Strategi ini lebih berprestasi untuk komponen kompleks dengan kemas kini data yang kerap tetapi memerlukan lebih banyak pengurusan manual.

@Component({
  selector: 'app-my-component',
  template: `
    <p>{{ message }}</p>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class MyComponent {
  message = 'Hello, world!';
} 

Walaupun strategi pengesanan perubahan onPush meminimumkan manipulasi DOM yang tidak perlu, cabaran terbesar dengan strategi perubahan onPush ialah pembangun perlu melakukan lebih banyak pengurusan manual dan mencetuskan perubahan secara manual. Mereka terpaksa mengendalikan pengesanan perubahan secara eksplisit dengan changeDetectorRef.detectChanges() dalam senario tertentu, seperti apabila data berubah secara tidak langsung atau apabila menggunakan objek boleh ubah.

Sudut 18 dan Pengesanan Perubahan Hibrid: Pendekatan Tanpa Zon

Untuk menangani cabaran yang berkaitan dengan Zone.js, Angular 18 memperkenalkan ciri percubaan yang dikenali sebagai Pengesanan Perubahan Hibrid. Pendekatan ini bertujuan untuk menghapuskan Zone.js sepenuhnya, menggunakan mekanisme pengesanan perubahan baharu untuk mengesan perubahan dan memanipulasi DOM.

Mendayakan Pengesanan Perubahan Hibrid:

Untuk mendayakan Pengesanan Perubahan Hibrid, anda boleh menggunakan kod berikut:

bootstrapApplication(RootCmp,
{ providers: [provideExperimentalZonelessChangeDetection()] 
}
);

Ini akan mencetuskan pengesanan perubahan dalam senario berikut:

• Isyarat dikemas kini.
• changeDetectorRef.markForCheck() dipanggil.
• Pemerhatian yang dilanggan dengan AsyncPipe menerima nilai baharu.
• Sesuatu komponen dipasang atau ditanggalkan.
• Input ditetapkan.

Setelah Pengesanan Perubahan Hibrid didayakan, anda boleh mengalih keluar Zone.js dengan selamat daripada polyfill aplikasi anda.

 "polyfills": [
              "zone.js" //remove this line
            ],

Faedah Pengesanan Perubahan Hibrid

• Prestasi yang dipertingkatkan: Menghapuskan Zone.js mengurangkan overhed, membawa kepada prestasi yang lebih baik, terutamanya dalam aplikasi dengan banyak operasi tak segerak.

• Pengalaman pembangun dipertingkat: Pengalihan keluar pengesanan perubahan manual memudahkan pembangunan dan mengurangkan kemungkinan ralat.

• Saiz aplikasi yang lebih kecil: Zone.js biasanya menambah sekitar 13KB pada saiz aplikasi. Mengalih keluarnya boleh membawa kepada berkas yang lebih kecil.

Atas ialah kandungan terperinci Evolusi Pengesanan Perubahan daripada Angular zone.js) kepada Angular (menyediakanExperimentalZonelessChangeDetection). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!