Virtual DOM Nedir?

Virtual DOM (Sanal DOM), React gibi JavaScript kütüphanelerinde veya framework’lerinde performans artışı ve daha etkili bir UI (Kullanıcı Arayüzü) güncelleme süreci sağlamak için kullanılan bir konsepttir. Bu konsept, sayfadaki gerçek DOM’a (Document Object Model) benzer bir yapı oluşturarak çalışır, ancak bu yapı tamamen bellekte sanal bir temsilidir.

React, bir bileşenin durumu değiştiğinde veya bir kullanıcı etkileşimine tepki olarak UI’yi güncellediğinde Virtual DOM kullanır. İşleyiş şu şekildedir:

Render ve Virtual DOM Oluşturma:

• Bir bileşenin durumu değiştiğinde veya başlangıçta render edildiğinde, React, bu bileşenin Virtual DOM temsilini oluşturur.
• Bu Virtual DOM, gerçek DOM’a tam olarak benzeyen bir ağaç yapısıdır ancak sadece bellekte bulunur.

Differences (Farklar) Tespiti:

• React, bir bileşenin durumu değiştiğinde yeni Virtual DOM’u oluşturur ve eski Virtual DOM ile karşılaştırır.
• Farklar (değişiklikler) tespit edilir.

Diffing (Farkları Bulma) ve Reconciliation (Uyuşma):

• React, Virtual DOM’daki farkları belirler ve sadece değişen kısımları gerçek DOM’a uygular.
• Bu işlem, tüm sayfanın tekrar çizilmesine gerek olmadan sadece değişikliklerin uygulanmasını sağlar.
• Bu süreç, “reconciliation” olarak adlandırılır.

Gerçek DOM Güncelleme:

• React, farkları belirledikten sonra sadece değişen kısımları gerçek DOM’a uygular.
• Bu, sayfanın genel performansını artırır çünkü sadece değişen kısımlar güncellenir, diğer kısımlar tekrar çizilmez.

Virtual DOM’un bu süreçleri kullanması, sayfa üzerindeki DOM manipülasyonlarını minimize ederek uygulamanın daha hızlı ve verimli çalışmasına olanak tanır. React, bu sayede UI güncellemelerini daha etkili bir şekilde yönetir ve geliştiricilere daha performanslı bir deneyim sunar.

Linkedin: https://www.linkedin.com/in/haktantekin/