Strategi Deteksi Perubahan Sudut: Strategi OnPush & Default

Deteksi perubahan disebut sebagai mekanisme yang memeriksa status saat ini ke status baru. Perbedaan antara kedua negara menunjukkan bahwa ada perubahan yang perlu diperbarui. Ini berarti bahwa tampilan harus diperbarui dengan perubahan data.

Setiap perubahan yang terjadi pada komponen selama perubahan dalam aplikasi dideteksi melalui Angular 2+. Setiap kali model diubah, perubahan terkait dideteksi oleh sudut dan tampilan segera diperbarui. Perubahan ini disebut sebagai deteksi perubahan dalam sudut.

Perubahan dapat merupakan hasil dari data yang diterima dari permintaan jaringan atau terjadi melalui peristiwa pengguna. Dengan meningkatnya ukuran aplikasi, lebih banyak pekerjaan yang harus dilakukan dengan metode deteksi perubahan. Deteksi sudut diperlukan untuk tetap sinkron antara tampilan yang mendasari dan model yang sesuai.

Perubahan model sudut mungkin disebabkan oleh salah satu dari berikut ini:

• Peristiwa DOM (klik, arahkan kursor, dll.)
• permintaan AJAX
• Timer (setTimer(), setInterval())

Prasyarat

Untuk memahami artikel ini, Anda mungkin harus terbiasa dengan konsep komponen sudut. Juga, konsep tipe nilai dan tipe referensi mungkin membantu dalam memahami artikel.

Ubah Deteksi di Angular

Deteksi perubahan dalam sudut dilakukan dalam dua langkah dengan yang pertama adalah pembaruan model aplikasi melalui pengembang. Itu dapat didahului dengan memancarkan suatu peristiwa atau melalui perubahan properti komponen. Langkah kedua yaitu pekerjaan sudut mencerminkan model. Ini mendeteksi jika ada data baru yang didorong ke dalam komponen secara eksplisit. Ini dapat dilakukan baik melalui komponen atau Observable yang berlangganan menggunakan pipa async.

Oleh karena itu, kedua langkah tersebut adalah:

• Perbarui model aplikasi (pengembang);
• Mencerminkan keadaan model dalam tampilan (Sudut).

Deteksi perubahan di sudut mendeteksi perubahan acara browser umum seperti klik mouse, permintaan HTTP, dan jenis acara lainnya. Setelah perubahan terdeteksi, maka diputuskan apakah pembaruan tampilan diperlukan atau tidak.

Ubah Strategi Deteksi

Dua strategi deteksi perubahan sudut hadir yang merupakan strategi default dan onPush.

Strategi default

• Perubahan pada model dipantau oleh sudut untuk memastikan bahwa semua perubahan dalam model ditangkap. Perbedaan antara keadaan baru dan keadaan sebelumnya diperiksa dengan sudut.
• Agar tampilan diperbarui, sudut harus memiliki akses ke nilai baru yang kemudian dibandingkan dengan nilai lama. Berdasarkan ini keputusan dibuat apakah akan memperbarui tampilan atau tidak.
• Oleh karena itu, dalam strategi default, sudut berkisar pada pertanyaan apakah ada perubahan nilai.
• Tidak ada asumsi di mana komponen bergantung. Ini adalah strategi konservatif yang akan memeriksa kapan saja ada perubahan terkait. Pemeriksaan akan dilakukan pada semua acara browser, waktu, janji, dan XHR.
• Strategi ini mungkin menjadi masalah ketika aplikasi besar harus dipertimbangkan dengan banyak komponen.
• Secara default, ini menggunakan strategi ChangeDetectionStrategy.Default .

Mengganti mekanisme default browser

• Beberapa API tingkat rendah akan ditambal dengan sudut pada saat startup. API ini mungkin addEventListener; fungsi browser yang digunakan untuk mendaftarkan acara penelusuran.
• addEventListener akan digantikan oleh angular dengan versi yang lebih baru yang berfungsi seperti versi sebelumnya.
• Lebih banyak fungsi ditambahkan ke event handler oleh addEventListener versi baru . UI diperbarui setelah menjalankan pemeriksaan kinerja dengan sudut.

Bekerja

Pustaka yang dikirimkan bersama Zone.js melakukan patching API browser tingkat rendah.

• Zona didefinisikan sebagai konten eksekusi di bawah beberapa putaran eksekusi JVM. Fungsionalitas ekstra dapat ditambahkan ke browser melalui mekanisme ini. Zona digunakan secara internal oleh sudut untuk mendeteksi perubahan apa pun dan memicu deteksi.
• Biasanya ada tiga fase dalam zona, yaitu stabil di awal, menjadi tidak stabil jika ada tugas yang berjalan di zona, dan menjadi stabil setelah tugas selesai.
• Mekanisme browser yang ditambal untuk mendukung pendeteksian perubahan adalah:

1. acara browser seperti klik, dll.
2. setInterval() dan setTimeout()
3. Permintaan HTTP Ajax

• Untuk memicu deteksi perubahan di sudut, Zone.js digunakan untuk menambal beberapa API dari browser lain seperti Websockets.
• Batasan metode ini adalah: jika Zone.js tidak mendukung API browser, maka tidak akan ada pemicu selama deteksi perubahan.

Bagaimana cara kerja deteksi perubahan sudut saat deteksi perubahan dipicu?

Perubahan yang dipicu dideteksi melalui detektor perubahan. Detektor perubahan ini dibuat selama waktu startup aplikasi. Contoh komponen TodoItem dapat dipertimbangkan. Suatu peristiwa akan dipancarkan saat menerima objek Todo oleh komponen jika status todo di-toggle. Pelajari lebih lanjut tentang cara menjalankan proyek sudut.

Bekerja dari mekanisme deteksi perubahan default

Mekanisme deteksi perubahan sederhana. Di setiap ekspresi, nilai yang ada saat ini ke properti dibandingkan dengan nilai properti itu di status sebelumnya dalam ekspresi.

• Memiliki perbedaan dalam nilai properti akan menetapkan nilai menjadi true dari isChanged .

2. Strategi OnPush

• Saat menggunakan strategi onPush , sudut tidak perlu menebak kapan pemeriksaan harus dilakukan.
• Berdasarkan perubahan referensi input, atau peristiwa yang dipicu oleh komponen itu sendiri, sudut akan melakukan pemeriksaan perubahan.
• Juga, sudut dapat secara eksplisit diminta untuk melakukan pemeriksaan perubahan. Ini dilakukan melalui metode componentRef.markForCheck().
• Komponen selama strategi ini hanya akan bergantung pada inputnya. Strategi deteksi perubahan akan dilakukan hanya jika:

• Ada perubahan dalam referensi input.
• Ada perubahan terkait dalam komponen model atau anak-anaknya.
• Ketika deteksi perubahan eksplisit harus dilakukan.
• Saat pipa asinkron dalam tampilan digunakan.

• Dibandingkan dengan strategi default, strategi onpush terutama berkisar pada dua pertanyaan yaitu:

• Apakah ada perubahan pada tipe referensi?
• Jika ada perubahan pada referensi tipe referensi, apakah ada perubahan pada nilai memori heap?

• Ini mencegah pemeriksaan yang tidak perlu atas komponen dan juga atas komponen anak.

Menerapkan Strategi onPush untuk Komponen

Hanya ketika referensi baru diteruskan sebagai nilai @Input() , itu memicu deteksi perubahan. Nilai mungkin tipe primitif seperti angka, boolean, string, dan null. Array dan objek juga dapat digunakan. Objek atau larik yang dimodifikasi tidak dapat digunakan untuk memicu deteksi perubahan pada komponen onPush karena referensi baru tidak dibuat untuk objek atau larik tersebut. Oleh karena itu, objek baru atau referensi array harus diteruskan untuk memicu detektor mendeteksi perubahan.

Untuk menghindari bug dalam metode metode deteksi perubahan, aplikasi dapat dibangun menggunakan deteksi perubahan onPush di mana-mana melalui penggunaan objek dan daftar yang tidak dapat diubah. Modifikasi objek yang tidak dapat diubah dapat dilakukan melalui pembuatan referensi objek baru dan karenanya:

• Untuk setiap perubahan, deteksi perubahan onPush dipicu.
• Referensi objek baru selalu dibuat yang mencegah penyebab bug.

Dalam kasus seperti itu, Immutable.js dapat digunakan karena berisi struktur data yang tidak dapat diubah untuk objek (Peta) dan daftar (Daftar).

• Menambahkan parameter changeDetection dalam anotasi komponen akan mengimplementasikan strategi onPush. Alih-alih meneruskan referensi baru setiap saat, ChangeDetectorRef juga dapat digunakan untuk kontrol penuh.

ChangeDetectorRef.detectChanges()

• Metode deteksi perubahan dapat dilampirkan atau dilepas secara manual dengan metode detach dan reattach di changeDetectorRef.

ChangeDetectorRef.detach() dan tidak berubah.js

Saat menggunakan strategi onPush untuk deteksi perubahan , itu selalu merupakan ide yang baik jika kekekalan diterapkan. Dalam kasus seperti itu, Immutable.js digunakan.

immutable.js adalah library yang dibuat untuk menggabungkan kekekalan dalam JavaScript bersama dengan struktur data yang tidak dapat diubah seperti List, Stack, dan Map.

Untuk menambahkan Immutable.js dalam proyek, perintah berikut harus digunakan di terminal. Pelajari lebih lanjut tentang proyek sudut.

$npm instal tidak dapat diubah –simpan

Untuk mengimpor struktur data dari Immutable.js, perintah berikut harus digunakan. Perintah menunjukkan mengimpor hanya Daftar, dan struktur data Peta dalam kasus ini.

import {Peta, Daftar} dari 'tidak dapat diubah' Array juga dapat digunakan.

Juga jika Immutable.js digunakan, beberapa kelemahan terkait dengannya.

• Menggunakan API agak rumit.
• Antarmuka tidak dapat diimplementasikan ke model data karena pustaka Imutable.js tidak mendukung antarmuka apa pun.

Pelajari Kursus Perangkat Lunak online dari Universitas top dunia. Dapatkan Program PG Eksekutif, Program Sertifikat Tingkat Lanjut, atau Program Magister untuk mempercepat karier Anda.

Ringkasan

Artikel tersebut memperkenalkan Anda pada mekanisme deteksi perubahan dan strateginya. Angular akan melakukan deteksi perubahan atas semua komponen secara default. Juga, ChangeDetectorRef dapat diterapkan untuk mendeteksi perubahan dalam referensi baru saat data dimutasi. Permintaan untuk pengembangan sudut terus meningkat yang menghasilkan gaji pengembang sudut di India.

Jika Anda ingin mempelajari lebih lanjut tentang teknologi perangkat lunak, perkembangannya, dan mekanisme di baliknya, Anda dapat melihat kursus Program PG Eksekutif dalam Pengembangan Perangkat Lunak – Spesialisasi dalam Pengembangan Full Stack yang ditawarkan oleh upGrad. Kursus spesialisasi adalah program online 23 minggu yang menawarkan lebih dari 300+ studi kasus untuk meningkatkan pengetahuan Anda dan alat yang tersedia serta bahasa pemrograman untuk meningkatkan keterampilan praktis Anda. Jika Anda memiliki pertanyaan lain terkait kursus, kirimkan pesan kepada kami. Tim kami akan menghubungi Anda.