e
sv

React'te sanal DOM nedir?

avatar

Yazılım Method

  • e 0

    Mutlu

  • e 0

    Eğlenmiş

  • e 0

    Şaşırmış

  • e 0

    Kızgın

  • e 0

    Üzgün

Sanal DOM, temel bir React konseptidir. Son birkaç yılda React kodu yazdıysanız muhtemelen duymuşsunuzdur. Ancak nasıl çalıştığını ve React'in neden kullandığını anlamayabilirsiniz.

Bu makale, sanal bir DOM'nin ne olduğunu, React'teki faydalarını ve bu kavramı açıklamaya yardımcı olacak pratik örnek kodu ele alacaktır.

Bu makalede:

Konsept incelemesi: DOM nedir?

Sanal DOM'yi anlamak ve React'in bunu neden uyguladığını öğrenmek için gerçek tarayıcı DOM'u hakkındaki bilgilerimizi tazeleyelim.

Tarayıcıya HTML gibi bir web belgesi yüklendiğinde, ağaç benzeri bir yapıda belgenin öğelerinin nesne tabanlı bir temsili oluşturulur. Bu nesne temsili, DOM olarak da bilinen Belge Nesne Modeli olarak adlandırılır.

JavaScript ve diğer komut dosyası dilleri, nesne tabanlı yapısı nedeniyle DOM'yi anlar ve belge içeriğini etkileşime sokabilir ve değiştirebilir. Örneğin, DOM ile geliştiriciler öğeler ekleyebilir veya kaldırabilir, görünümlerini değiştirebilir ve web öğelerinde kullanıcının eylemlerini gerçekleştirebilir.

DOM sorgulama ve güncelleme gibi DOM işlemleri daha hafiftir ve bu nedenle çok hızlıdır. Ancak güncellemenin web sayfasına yansıması için sayfanın yeniden oluşturulması gerekecek.

Yeniden oluşturma performansı nasıl etkiler?

Sayfayı DOM güncellemelerini yansıtacak şekilde yeniden oluşturmak maliyetlidir ve tarayıcının CSS'yi yeniden hesaplaması, görünen her öğe için düzeni yeniden çalıştırması ve web sayfasını yeniden boyaması gerektiğinden performans eksikliklerine yol açabilir.

Aşağıdaki JavaScript koduyla yeniden oluşturma sayfasını simüle edelim:

 const güncelleme = () => {
 const eleman = `
  <h3>JavaScript:</h3>
  <form>
   <input type="metin"/>
  </form>
  <span>Saat: ${new Date().toLocaleTimeString()}</span>
 `;

 document.getElementById("root1").innerHTML = eleman;
};

setInterval(güncelleme, 1000);

Kodun tamamını CodeSandbox'ta görebilirsiniz .

Belgeyi temsil eden DOM ağacı şöyle görünür:

Başlık, Form Girişi, Zaman Aralığı için Düğümlerle Örnek Javascript Belgesini Temsil Eden Dom Ağacı

Kodda bir setInterval() geri çağrısı kullanarak, kullanıcı arayüzünün durumunu her saniye oluşturuyoruz. Aşağıdaki GIF'de görebileceğimiz gibi, belirtilen aralıktan sonra tarayıcı, diğer işlemlerin yanı sıra yeniden oluşturur, düzeni çalıştırır ve web sayfasını yeniden boyar.

Tarayıcı DOM'nin, neyin değiştiğini karşılaştırmak ve karşılaştırmak ve yalnızca o DOM düğümünü yeniden boyamak için bir mekanizması yoktur (bu durumda, oluşturulan süre):

Dom Time Metin Girişini Değiştirdikten Sonra Tam Sayfa Yeniden Oluşturulduktan Sonra Tüm Düğümlerin Aydınlanmasının Gösterimi

Bu yeniden oluşturma, metin girişinde belirgindir. Gördüğümüz gibi, giriş alanı her zaman ayarlanan aralıktan sonra temizlenir. DOM manipülasyonlarından sonra tarayıcıdaki bu yeniden oluşturma işlemi, performans eksikliklerine yol açan şeydir.

React'te yeniden oluşturma: Neden sanal DOM kullanılıyor?

Bildiğimiz gibi React, bileşen tabanlı bir kitaplıktır . Bir React bileşeni, durum veya destek değişiklikleri varsa veya ana bileşeni yeniden oluşturulursa, doğal olarak yeniden oluşturulacaktır.

React, her yeniden oluşturma işleminden sonra tüm DOM düğümlerini yeniden boyamanın maliyetini karşılayamaz. Bu zorluğun üstesinden gelmek için React, sanal DOM kavramını uyguladı.

React, her yeniden oluşturma veya DOM güncellemesinden sonra tarayıcının tüm sayfa öğelerini yeniden çizmesine izin vermek yerine, gerçek DOM'yi dahil etmeden tam olarak neyin değiştiğini bulmak için sanal DOM kavramını kullanır ve ardından gerçek DOM'nin yalnızca gerekli öğeleri yeniden boyamasını sağlar. veri.

Bu konsept, React'in performansı optimize etmesine yardımcı olur.

React'te Sanal DOM

React'teki Sanal DOM, gerçek DOM'nin "sanal" bir temsilidir. Gerçek DOM'yi çoğaltmak için oluşturulmuş bir nesneden başka bir şey değildir.

Gerçek DOM'den farklı olarak, sanal DOM ekrana yazmadığı için oluşturulması ucuzdur. Yalnızca yeniden oluşturma sırasında gereksiz sayfa öğelerinin yeniden çizilmesini önlemek için bir strateji olarak kullanılabilir.

Önceki JavaScript örneğinin React sürümünü temsil eden aşağıdaki oluşturma koduna bir göz atın:

 // ...
const güncelleme = () => {
 const eleman = (
  <>
   <h3>Tepki:</h3>
   <form>
    <input type="metin" />
   </form>
   <span>Saat: {new Date().toLocaleTimeString()}</span>
  </>
 );
 root.render(eleman);
};

Kısaca, kodun bir kısmını kaldırdık. Kodun tamamını CodeSandbox'ta görebilirsiniz .

JSX kodunu da düz React'te şöyle yazabiliriz:

 const öğesi = React.createElement(
 React.Fragment,
 hükümsüz,
 React.createElement("h3", null, "React:"),
 React.createElement(
  "biçim",
  hükümsüz,
  React.createElement("girdi", {
   Metin yaz"
  })
 ),
 React.createElement("span", null, "Time: ", new Date().toLocaleTimeString())
);

JSX öğelerini bir babel repl düzenleyicisine yapıştırarak JSX kodunun React kodu eşdeğerini alabileceğinizi unutmayın.

Şimdi, React öğesini konsola kaydedersek:

 const eleman = (
  <>
   <h3>Tepki:</h3>
   <form>
    <input type="metin" />
   </form>
   <span>Saat: {new Date().toLocaleTimeString()}</span>
  </>
 );
 konsol.log(eleman)

Bunun gibi bir şeye sahip olacağız:

Konsolda React Öğesini Günlüğe Kaydettikten Sonra Önceki Javascript Örneğinin React Versiyonunu Temsil Eden Sanal Dom Örneği

Nesne, yukarıda görüldüğü gibi sanal DOM'dir.

React sanal DOM'yi nasıl uygular?

Kullanıcı arayüzünü render ettiğimizde, o render için sanal bir DOM oluşturulur ve hafızada tutulur. Oluşturmada bir güncelleme meydana gelirse, React otomatik olarak güncelleme için yeni bir sanal DOM ağacı oluşturur.

Bunu daha fazla açıklamaya yardımcı olmak için sanal DOM'yi şu şekilde görsel olarak temsil edelim:

Pembe Başlıkla Etiketlenmiş Sanal Dom Sanal Temsili. Solda Gösterilen İlk Sanal Dom, Sağda Gösterilen Güncellenmiş Sanal Dom

Ancak, sanal DOM'nin yalnızca kullanıcı arayüzünü temsil eden basit bir nesne olduğunu unutmayın. Ekrana hiçbir şey çizilmez ve bu nedenle oluşturulması kolaydır.

React, yeni sanal DOM ağacını oluşturduktan sonra, hangi değişikliklerin gerekli olduğunu bulmak için farklı bir algoritma kullanarak önceki anlık görüntüyle karşılaştırır.

Ardından, gerçek DOM'nin yalnızca güncellenen düğümü veya düğümleri alıp yeniden boyamasını sağlamak için ReactDOM adlı bir kitaplık kullanır. Bu işleme uzlaşma denir .

Solda Yığınlanmış Olarak Gösterilen İlk Sanal Dom ve Güncellenmiş Sanal Dom ile Uzlaşma Sürecinin Görsel Temsili ve Sağda Gösterilen Gerçek Dom

React farklılaştırma algoritmasını uyguladığında, her iki anlık görüntünün de aynı kök öğeye sahip olup olmadığını karşılaştırarak başlar.

Aynı öğeye sahiplerse, React devam eder ve öznitelikler ve ardından DOM düğümünün çocukları üzerinde yinelenir. Kök öğeler farklı türlerdeyse – ki bu çoğu güncellemede nadirdir – React eski DOM düğümlerini yok edecek ve yeni bir DOM ağacı oluşturacaktır.

React render'ımızı incelersek , aşağıdaki davranışı alırız:

React Render'ın İncelenmesi Yalnızca Güncellenen Bir Düğümün Yeniden Oluşturulduğunda Yeniden Boyanırken Yandığını Gösteriyor

Her oluşturmada, React, hangi düğüm içeriğinin güncellendiğini belirlemek ve güncellenen düğümün gerçek DOM ile eşleşmesini sağlamak için önceki sürümle karşılaştırdığı sanal bir DOM ağacına sahiptir.

Yukarıdaki GIF'de, her yeniden oluşturmada yalnızca durumu değişen işlenmiş zamanın yeniden boyandığını görebiliriz.

Aşağıdaki başka bir örnekte, bir düğmeye tıklandıktan sonra bileşen durumunu güncelleyen basit bir React bileşeni oluşturuyoruz:

 "tepki" den { useState } içe aktar;

const Uygulama = () => {
 const [open, setOpen] = useState(false);

 dönüş (
  <div className="Uygulama">
   <button onClick={() => setOpen((prev) => !prev)}>geçiş</button>
   <div className={aç ? "aç" : "kapat"}>
    Açığım ? "açık": "kapalı"}
   </div>
  </div>
 );
};
varsayılan Uygulamayı dışa aktar;

Daha önce belirtildiği gibi, bir bileşen durumunu güncellemek, bileşeni yeniden oluşturur. Ancak aşağıda görüldüğü gibi, her yeniden oluşturmada React yalnızca sınıf adını ve değişen metni güncellemeyi bilir.

Her Re-Render'da Dom Sınıf Adı Gösteren Ve Değişen Metin Güncellenen Bir Bileşen Durumunu Güncellemenin Sonucu

CodeSandbox'taki koda ve demoya bakın.

Sanal DOM'nin özeti ve neden React'te kullanıldığı

React'te sanal DOM öğelerini her manipüle ettiğimizde, gerçek DOM'yi doğrudan manipüle ettiğimizde dahil olan işlem dizisini atlarız.

Bu mümkündür çünkü sanal DOM ile ekranda hiçbir şey çizilmez. Ek olarak, farklılaştırma algoritması ile React, hangi güncellemenin gerekli olduğunu sonlandırabilir ve yalnızca gerçek DOM üzerindeki nesneyi güncelleyebilir.

React'teki sanal DOM kavramı, kuşkusuz web sayfasını yeniden oluşturmanın performans maliyetini düşürmeye yardımcı olur ve böylece ekranı yeniden boyamak için gereken süreyi en aza indirir.

İşte sanal DOM bilgimizi daha da sağlamlaştırmak için basit bir benzetme: Sanal DOM'yi, gerçek yapıyı yeniden oluşturmak yerine yapısal bir tasarımı veya planı düzenlemek olarak kullanmayı düşünün.

Bir planı bir güncelleme içerecek şekilde düzenlemek, her güncelleme gerçekleştiğinde yapıyı yeniden oluşturmaya kıyasla çok ucuzdur. Plan revize edildiğinde ve sonlandırıldığında, yalnızca gerçek yapıdaki güncellemeyi dahil edebiliriz.

Çözüm

Sanal DOM, React'in bir uygulamanın performansını optimize etmek için kullandığı bir stratejiden başka bir şey değildir. Tam olarak neyin değiştiğini bilmek için iki işleme ağacını karşılaştıran ve yalnızca gerçek DOM'de gerekli olanı güncelleyen bir mekanizma sağlar.

React gibi, Vue ve diğer bazı çerçeveler de bu stratejiyi kullanır . Ancak Svelte çerçevesi, bir uygulamanın optimize edilmesini sağlamak için başka bir yaklaşım önerir . Bunun yerine, tüm bileşenleri bağımsız ve küçük JavaScript modüllerinde derleyerek, komut dosyasının çok hafif ve hızlı çalışmasını sağlar.

Umarım bu makaleyi okumaktan zevk almışsınızdır. Sorularınız veya katkılarınız varsa yorum bölümünde düşüncelerinizi paylaşın.

Yazı React'te sanal DOM nedir? LogRocket Blog'da ilk ortaya çıktı.

etiketlerETİKETLER
Üzgünüm, bu içerik için hiç etiket bulunmuyor.

Sıradaki içerik:

React'te sanal DOM nedir?