Açısal Değişiklik Algılama Stratejisi: OnPush ve Varsayılan Stratejiler

Değişiklik algılama, mevcut durumu yeni duruma göre kontrol eden mekanizma olarak adlandırılır. İki durum arasındaki herhangi bir fark, güncellenmesi gereken değişiklikler olduğunu gösterir. Bu, görünümün verilerdeki değişiklikle güncellenmesi gerektiği anlamına gelir.

Uygulamadaki bir değişiklik sırasında bileşenlerde meydana gelen herhangi bir değişiklik, Angular 2+ aracılığıyla algılanır. Bir model değiştirildiğinde, ilişkili değişiklikler açısal olarak algılanır ve görünümler hemen güncellenir. Bu değişiklik, açısal olarak değişiklik tespiti olarak adlandırılır.

Değişiklik, ağ isteklerinden alınan verilerin sonucu olabilir veya bir kullanıcı olayı aracılığıyla meydana gelebilir. Uygulamanın artan boyutuyla, değişiklik algılama yöntemiyle daha fazla çalışma yapılması gerekiyor. Temeldeki görünümler ve ilgili modeller arasında senkronize tutmak için açısal algılama gereklidir.

Açısal modeldeki değişiklik aşağıdakilerden herhangi biri nedeniyle olabilir:

• DOM olayları (tıklayın, üzerine gelin vb.)
• AJAX istekleri
• Zamanlayıcılar (setTimer(), setInterval())

Önkoşullar

Bu makaleyi elde etmek için açısal bileşenler kavramlarına aşina olmanız gerekebilir. Ayrıca, değer türleri ve referans türleri kavramları makaleyi anlamada yardımcı olabilir.

Angular'da Değişim Algılama

Açısal olarak değişiklik tespiti , ilki geliştirici aracılığıyla uygulama modelinin güncellenmesi olmak üzere iki adımda yapılır. Ya bir olay yayarak ya da bir bileşenin özelliğindeki değişiklik yoluyla öncelenebilir. İkinci adım, yani açısalın modeli yansıtma işi. Bileşene herhangi bir yeni verinin açıkça aktarılıp aktarılmadığını algılar. Bu, zaman uyumsuz borunun kullanılmasına abone olunan bir bileşen veya bir Gözlenebilir aracılığıyla yapılabilir.

Bu nedenle, iki adım:

• Uygulama modelini güncelleyin (geliştirici);
• Modelin durumunu görünümde yansıtın (Açısal).

Açısal olarak değişiklik algılama, fare tıklamaları, HTTP istekleri ve diğer olay türleri gibi yaygın tarayıcı olaylarındaki değişiklikleri algılar. Değişiklik tespit edildikten sonra, görünümün güncellenmesinin gerekli olup olmadığına karar verilir.

Algılama Stratejilerini Değiştirin

Varsayılan ve onPush olan iki açısal değişiklik algılama stratejisi mevcuttur.

Varsayılan strateji

• Modeldeki tüm değişikliklerin yakalandığından emin olmak için bir modeldeki değişiklikler açısal olarak izlenir. Yeni ve önceki durum arasındaki farklar açısal olarak kontrol edilir.
• Bir görünümün güncellenmesi için, açısalın daha sonra eski değerle karşılaştırılan yeni değere erişimi olmalıdır. Buna dayanarak, görünümün güncellenip güncellenmeyeceğine karar verilir.
• Bu nedenle, varsayılan bir stratejide açısal, değerde herhangi bir değişiklik olup olmadığı sorusu etrafında döner.
• Bileşenlerin nereye bağlı olduğuna dair bir varsayım yoktur. İlişkili bir değişiklik olduğunda her zaman kontrol edecek muhafazakar bir stratejidir. Kontroller, herhangi bir tarayıcı olayı, zaman, vaat ve XHR'ler üzerinde gerçekleştirilecektir.
• Büyük uygulamalar birçok bileşenle birlikte düşünüldüğünde strateji sorunlu olabilir.
• Varsayılan olarak ChangeDetectionStrategy.Default stratejisini kullanır.

Tarayıcının varsayılan mekanizmalarını geçersiz kılmak

• Birkaç düşük seviyeli API, başlangıç ​​zamanında açısal olarak düzeltilecektir. Bu API'ler addEventListener olabilir; tarama olaylarını kaydetmek için kullanılan bir tarayıcı işlevi.
• addEventListener , önceki sürüm gibi performans gösteren daha yeni bir sürümle angular ile değiştirilecektir.
• addEventListener yeni sürümüyle olay işleyicisine daha fazla işlevsellik eklendi . UI, performans kontrolünü açısal olarak çalıştırdıktan sonra güncellenir.

Çalışma

Zone.js ile birlikte gelen bir kitaplık, tarayıcı API'sinin düşük seviyeli yamasını yapar.

• Bölge, birden çok JVM yürütme dönüşü altındaki yürütme içeriği olarak tanımlanır. Bu mekanizma aracılığıyla bir tarayıcıya ekstra işlevsellik eklenebilir. Bölgeler, herhangi bir değişikliği algılamak ve algılamayı tetiklemek için açısal olarak dahili olarak kullanılır.
• Bir bölgede normalde üç aşama vardır, yani başlangıçta kararlıdır, bölgede herhangi bir görev çalışırsa kararsız hale gelir ve görev tamamlandığında kararlı hale gelir.
• Değişiklikte algılamayı desteklemek için yamalanan tarayıcı mekanizmaları şunlardır:

1. tıklama vb. gibi tarayıcı olayları
2. setInterval() ve setTimeout()
3. Ajax HTTP İstekleri

• Açısal olarak değişiklik algılamayı tetiklemek için Zone.js, Websockets gibi başka bir tarayıcının birkaç API'sini yamalamak için kullanılır.
• Bu yöntemin bir sınırlaması şudur: Zone.js tarayıcı API'sini desteklemiyorsa, değişiklik tespiti sırasında tetikleyici olmayacaktır.

Değişiklik algılama tetiklendiğinde açısal değişiklik algılama nasıl çalışır?

Tetiklenen değişiklikler, bir değişiklik detektörü aracılığıyla algılanır. Bu değişiklik algılayıcı, uygulamanın başlangıç ​​zamanı sırasında oluşturulur. TodoItem bileşeninin bir örneği düşünülebilir. Yapılacak işin durumu değiştirilirse, bileşen tarafından bir Yapılacaklar nesnesi alındığında bir olay yayınlanacaktır. Açısal projelerin nasıl çalıştırılacağı hakkında daha fazla bilgi edinin.

Varsayılan değişiklik algılama mekanizmasının çalışması

Değişiklik algılama mekanizması basittir. Her ifadede, özelliğe geçerli olan değer, o özelliğin ifadedeki önceki durumdaki değeriyle karşılaştırılır.

• Özelliğin değerinde bir fark olması, değeri isChanged için true olarak ayarlar .

2. OnPush stratejisi

• onPush stratejisini kullanırken, açısalın kontrolün ne zaman yapılması gerektiğine dair herhangi bir tahmin yapmasına gerek yoktur.
• Giriş referansındaki değişikliğe veya bileşenlerin kendileri tarafından tetiklenen olaylara bağlı olarak, açısal değişiklik kontrolünü gerçekleştirir.
• Ayrıca, açısaldan açıkça değişiklik kontrolü yapması istenebilir. Bu, componentRef.markForCheck() yöntemiyle yapılır.
• Bu strateji sırasındaki bileşenler yalnızca girdilerine bağlı olacaktır. Değişiklik algılama stratejisi yalnızca şu durumlarda gerçekleştirilecektir:

• Giriş referansında bir değişiklik var.
• Modelin bileşenlerinde veya herhangi bir alt öğesinde ilişkili değişiklikler vardır.
• Açık değişiklik tespiti yapılması gerektiğinde.
• Görünümde bir zaman uyumsuz boru kullanıldığında.

• Varsayılan stratejiyle karşılaştırıldığında, onpush stratejisi esas olarak iki soru etrafında döner:

• Referans türünde herhangi bir değişiklik var mı?
• Referans tipinin referansında değişiklikler varsa, o zaman yığın belleğinin değerlerinde herhangi bir değişiklik var mı?

• Bileşenler ve ayrıca alt bileşenler üzerinde gereksiz kontrolleri önler.

Bir Bileşen için onPush Stratejisini Uygulama

Yalnızca @Input() değeri olarak yeni bir referans iletildiğinde , değişiklik algılamayı tetikler. Değerler, sayılar, booleanlar, dize ve boş gibi ilkel türler olabilir. Diziler ve nesneler de kullanılabilir. Değiştirilen nesneler veya diziler, onlar için yeni bir referans oluşturulmadığı için bir onPush bileşeninde değişiklik algılamayı tetiklemek için kullanılamaz . Bu nedenle, değişikliği algılayan dedektörü tetiklemek için yeni bir nesne veya dizi referansı iletilmelidir.

Değişiklik algılama yöntemlerindeki hataları önlemek için uygulama, değişmez nesneler ve listeler kullanılarak her yerde onPush değişiklik algılama kullanılarak oluşturulabilir. Değişmez nesnelerin modifikasyonu, yeni bir nesne referansı yaratılarak yapılabilir ve bu nedenle:

• Her değişiklik için onPush değişiklik algılama tetiklenir.
• Hataların nedenini önleyen her zaman yeni bir nesne referansı oluşturulur.

Bu gibi durumlarda, nesneler (Harita) ve listeler (Liste) için değişmez veri yapıları içerdiğinden Immutable.js kullanılabilir.

• Bileşen açıklamasına changeDetection parametresinin eklenmesi, onPush stratejisini uygulayacaktır. Her seferinde yeni referanslar iletmek yerine, ChangeDetectorRef tam kontrol için de kullanılabilir.

ChangeDetectorRef.detectChanges()

• Değişiklik algılama yöntemi , changeDetectorRef'teki ayırma ve yeniden takma yöntemleriyle manuel olarak eklenebilir veya çıkarılabilir.

ChangeDetectorRef.detach() ve Immutable.js

Değişiklik tespiti için onPush stratejisini kullanırken, değişmezliğin zorunlu kılınması her zaman iyi bir fikirdir. Bu gibi durumlarda Immutable.js kullanılır.

immutable.js, JavaScript'te değişmezliği Liste, Yığın ve Harita gibi değişmez veri yapılarıyla birleştirmek için oluşturulmuş bir kitaplıktır.

Projelere Immutable.js eklemek için terminalde aşağıdaki komut kullanılmalıdır. Açısal projeler hakkında daha fazla bilgi edinin.

$ npm değişmez kurulum – kaydet

Veri yapılarını Immutable.js'den içe aktarmak için aşağıdaki komut kullanılmalıdır. Komut, bu durumda yalnızca Liste ve Harita veri yapılarının içe aktarılmasını gösterir.

{Harita, Liste}'yi 'immutable'dan içe aktarın Bir dizi de kullanılabilir.

Ayrıca Immutable.js kullanılıyorsa, bununla ilişkili birkaç dezavantaj vardır.

• API kullanmak biraz zahmetlidir.
• Imutable.js kitaplığı herhangi bir arabirimi desteklemediğinden arabirimler veri modeline uygulanamaz.

Dünyanın En İyi Üniversitelerinden Online Yazılım Kursları Öğrenin . Kariyerinizi hızlandırmak için Yönetici PG Programları, Gelişmiş Sertifika Programları veya Yüksek Lisans Programları kazanın.

Özet

Makale sizi değişiklik algılama mekanizması ve stratejileriyle tanıştırdı. Angular, varsayılan olarak tüm bileşenler üzerinde değişiklik tespiti gerçekleştirir. Ayrıca, veriler mutasyona uğradığında yeni referanslardaki değişiklikleri algılamak için ChangeDetectorRef uygulanabilir. Açısal geliştirme talebi artmaya devam ediyor ve bu da Hindistan'da açısal geliştirici maaşıyla sonuçlanıyor.

Yazılım teknolojisi, gelişimi ve arkasındaki mekanizma hakkında daha fazla bilgi edinmek istiyorsanız, upGrad tarafından sunulan Yazılım Geliştirmede Yönetici PG Programı – Tam Yığın Geliştirmede Uzmanlaşma kursunu inceleyebilirsiniz. Uzmanlık kursu, pratik becerilerinizi geliştirmek için bilginizi ve mevcut araçları ve programlama dilini artırmak için 300'den fazla vaka çalışması sunan 23 haftalık bir çevrimiçi programdır. Kursla ilgili başka sorularınız varsa, bize bir mesaj bırakın. Ekibimiz sizinle iletişime geçecektir.