Tarayıcının DOM'unu neden doğrudan kullanamıyoruz?

Modern frontend uygulamalarında, özellikle React gibi kütüphanelerde, tarayıcı DOM'unun doğrudan kullanımı birkaç nedenden dolayı önerilmez:

• Performans: Gerçek DOM ile çalışmak daha yavaştır, çünkü değişiklikler stil hesaplamalarını, yeniden çizimleri ve öğelerin sayfa üzerindeki yeniden konumlandırılmasını tetikler.
• Durum yönetiminin karmaşıklığı: DOM'u doğrudan değiştirmek, UI'nin mevcut durumunu takip etmeyi ve uygulama verileriyle senkronize etmeyi zorlaştırır.
• Optimizasyon eksikliği: React, gerçek DOM'un hafif bir kopyası olan Virtual DOM'u kullanır; bu, minimum değişiklikleri verimli bir şekilde hesaplamaya ve tek seferde uygulamaya olanak tanır, böylece gerçek DOM üzerindeki işlemlerin sayısını azaltır.

Bu nedenle, Virtual DOM, arayüz güncellemelerini optimize eden, performansı artıran ve geliştirmeyi kolaylaştıran bir ara katman görevi görür.

Örnek: Bir React bileşeninin durumu değiştiğinde, React önce Virtual DOM'u günceller, önceki sürümle karşılaştırır (diffing) ve ardından yalnızca gerekli değişiklikleri gerçek DOM'a uygular.