React'in DOM Soyutlaması Nasıl Çalışır?

JavaScript'te DOM'u değiştirmek zaten mümkündü. Peki neden React'e ihtiyaç duydum? Çünkü React, DOM işlemlerini doğrudan yapmak yerine onları soyutlayarak daha yüksek seviye bir düşünme şekli sunuyor.

React'in temel soyutlaması şu: Uygulamanın durumuna (state) bağlı olarak UI'yi deklaratif bir şekilde tanımlarsın, bunu bileşenlere (components) bölersin ve React, bu tanım ile gerçek DOM arasındaki senkronizasyonu kendisi halleder. Arka planda karmaşık DOM işlemleri olsa da, sen sadece "bu state için şu UI göster" diyorsun.

Dönem öncesinde DOM ile çalışmak düşük seviye bir iş idi. DOM node'larını, özelliklerini, metodlarını ve event'lerini doğrudan yönetmen gerekiyordu. Örneğin bir butona tıklanınca listeye eleman eklemek için önce DOM'da o butonu bulman, event listener eklemen, sonra yeni bir element oluşturup DOM'a eklemen lazımdı. Her değişiklik için bu adımları tekrar tekrar yapardın.

React bunu değiştirdi. Artık Component adı verilen yeniden kullanılabilir parçalar oluşturursun. Her component kendi state'ini ve render mantığını içerir. State değiştiğinde, React otomatik olarak hangi DOM parçalarının güncellenmesi gerektiğini bulur ve sadece onları değiştirir. Sen DOM'u doğrudan dokunmuyorsun; React'e "bu state'le şu UI'yi göster" diyorsun.

Bu soyutlama, kodu daha okunabilir ve bakımı daha kolay hale getiriyor. Ayrıca React, Virtual DOM sayesinde gereksiz DOM güncellemelerini önleyerek performansı optimize ediyor. Neel Vekariya'nın yazısında bu soyutlamanın detayları daha derinlemesine açıklanıyor.

Kısacası React, DOM manipülasyonunun karmaşıklığını gizleyerek sana UI geliştirmeye odaklanma fırsatı veriyor.