React ve Sanal DOM

Öncelikle, Etki Alanı-Nesne Modeli (DOM), bir belgenin yapısı ve içeriğinden oluşan tarayıcı tarafından ayrıştırılan bir temsildir. Programların belge stilini, içeriğini ve yapısını değiştirmesine izin veren HTML veya XML belgeleri için bir programlama arabirimidir. DOM, canlı bir veri yapısı gibi davranır ve değiştirildiğinde bu değişikliği ekrana yansıtır.

Web sayfası, HTML kaynağı olarak veya bir tarayıcı penceresinde görüntülenebilen bir belgedir - farklı görünseler de - aynı belgedir. DOM, bu belgeyi tarayıcıda nesneler ve düğümler olarak temsil eder ve programlama dillerinin bu nesnelere ve düğümlere erişmesine izin vererek gerçek zamanlı manipülasyona izin verir. DOM olmadan, JavaScript'in web sayfaları ve öğeleri hakkında hiçbir gösterimi olmazdı ve bu nedenle bir web sayfasına erişme ve bunları değiştirme yolu olmazdı.

DOM'nin manipülasyonu, modern, etkileşimli web'in merkezinde yer alır. Ancak, yavaştır. Çoğu JavaScript çerçevesinde DOM, gerekenden çok daha sık güncellenir. Şimdi sanal DOM'dan bahsedelim. Sanal DOM, React'i (bir JavaScript kitaplığı) oluşturan kişiler tarafından popüler hale getirildi ve React'i bu kadar harika yapan temel kavramlardan biri.

Çok derine inmeden React, web ve mobil kullanıcı arayüzleri oluşturmak için kullanılan bir ön uç JavaScript kitaplığıdır. Geliştiricilerin yeniden kullanılabilir UI bileşenleri oluşturmasına olanak tanır - bunlar JavaScript işlevleri veya girdi kabul edebilen sınıflar (diğer bir deyişle özellikler veya aksesuarlar) ve kullanıcı arabiriminin bir bölümünün nasıl görüneceğini açıklayan React öğelerini döndürür. Bir React bileşeni, tarayıcıdaki kullanıcı etkileşimi nedeniyle dahili durum değiştiğinde (ör. kullanıcı bir giriş alanına yazarsa) veya props alırsa (ör. bir ana bileşenin geçirilmiş bir durum güncellemesine sahip olması) yeniden oluşturulur. bir alt bileşene destek olarak aşağı).

React'te her DOM nesnesine karşılık gelen bir sanal DOM nesnesi vardır. Sanal DOM nesneleri, gerçek DOM'daki nesnelerle aynı özelliklere sahiptir, ancak ekranda olanı değiştiremez ve onu çok daha hafif hale getirir. Fiziksel yapıdan ziyade DOM şemaları gibi. Sanal DOM, gerçek DOM'nin bir temsilidir . Sanal DOM, kullanıcı arabirimine (UI) yeni öğeler eklendiğinde oluşturulur.

Bu sanal DOM'nin amacı, tarayıcıdaki bir öğe tetikleyicisinde yapılan bir değişiklik bir bileşenin yeniden oluşturulması olduğunda, tüm sanal DOM'nin güncellenmesidir - bu, gerçek DOM'da yapmaktan çok daha hızlıdır, çünkü gerçekte hiçbir şey temsil edilmez. -ekran bu noktada. Güncellenen sanal DOM ile güncelleme öncesi sanal DOM arasındaki farklar (veya farklılıklar) karşılaştırılır ve yalnızca farklılıkları olan sanal DOM nesneleri gerçek DOM'de güncellenir ve tarayıcıda gösterilir. Bu, tüm web sayfasının her değişiklik gerçekleştiğinde yeniden oluşturulması gerekmediği anlamına gelir ve bu da süreci çok daha hızlı hale getirir.

Diyelim ki React, sanal DOM'nin işlevselliğini dahil etmedi - bir olay tetiklendiğinde veya herhangi bir bileşenin durumu veya destekleri değiştirildiğinde, tüm DOM güncellenir. Bu, tüm verilerin yeniden getirildiği (yavaş) ve ardından her değişiklikte tüm web sayfasının yeniden oluşturulduğu (yavaş) anlamına gelir. Sanal DOM web ve yerel uygulama sayesinde, kullanıcıların tarayıcıda her değişiklik gerçekleştiğinde tüm DOM ağacının güncellenmesini beklemek zorunda kalmazlar.