React: Sanal DOM (Virtual DOM)

Günümüzün modern ve etkileşimli web uygulamalarında DOM manipülasyonu büyük bir rol oynar. Ancak, bu süreç oldukça yavaş olabilir ve genellikle gereğinden fazla işlem yapılır. React’in Sanal DOM (Virtual DOM) konsepti, bu sorunu çözmek için geliştirilen yenilikçi bir yaklaşımdır.

Zaten React’in alametifarikası da DOM güncellemelerini optimize etme yeteneğidir. React’teki render() metodu, yalnızca değişen DOM elementlerini günceller. Bunu yapabilmek için React, Sanal DOM (Virtual DOM) adı verilen mekanizmayı kullanır. Sanal DOM, gerçek DOM’un birebir kopyası olup JavaScript içinde saklanır.

Bu yaklaşım önemlidir çünkü DOM manipülasyonu sırasında gereksiz işlemler yapılabilir. Örneğin, bir yapılacaklar listesinde 10 görev olduğunu düşünelim. Listenin üçüncü görevini tamamlandı olarak işaretlediğinizde, klasik JavaScript yöntemleri tüm listeyi yeniden oluşturur. Ancak, aslında sadece üçüncü görevin durumu değişmiştir ve diğer görevlerin yeniden işlenmesine gerek yoktur.

Bu gereksiz güncellemeler küçük projelerde fark edilmese de, büyük ve karmaşık uygulamalarda ciddi performans sorunlarına yol açar.

İşte tam bu noktada React, Sanal DOM konsepti ile çıkagelmiştir. Sanal DOM, gerçek DOM’un hafif bir kopyası gibidir. React, sanal DOM kullanarak yalnızca değişen kısmı günceller ve bu tür sorunların önüne geçer. Gerçek DOM’u güncellemek yerine, React önce Sanal DOM üzerinde işlemler yapar. Bu durum, Sanal DOM üzerinde yapılan manipülasyonların çok daha hızlı olmasını sağlar.

“Virtual DOM” Nasıl Çalışır?

React’in “Virtual DOM” mekanizması şu şekilde işler:

1. JSX Elementini Render Etmek:
   • Tüm Sanal DOM objeleri güncellenir.
   • Bu işlem hızlıdır ve tarayıcıda görünür bir değişikliğe neden olmaz.
2. Sanal DOM Karşılaştırması (Diffing):
   • React, güncellenen Sanal DOM ile önceki Sanal DOM’u karşılaştırır.
   • Sadece değişen objeleri tespit eder.
3. Gerçek DOM Güncellenmesi:
   • Sadece değişen objeler gerçek DOM’a uygulanır.
   • Örneğin, bir listede sadece işaretlenen madde güncellenir, diğerleri olduğu gibi kalır.
4. Ekran Güncellemesi:
   • Gerçek DOM’daki değişiklikler tarayıcı tarafından işlenir ve ekranda görünür hale gelir.