Sanal DOM ve React

Reactjs.org'daki tanımla başlayalım

Sanal DOM (VDOM), bir UI'nin ideal veya "sanal" temsilinin bellekte tutulduğu ve ReactDOM gibi bir kitaplık tarafından "gerçek" DOM ​​ile eşitlendiği bir programlama konseptidir. Bu işleme uzlaşma denir.

Bu müthiş bir tanımdı, anlamaya çalışalım.

Sanal DOM, kütüphaneler tarafından tarayıcı API'sinin üzerine uygulanan bir kavramdır. Tarayıcıda bir değişiklik yapıldığında JS, yalnızca değişiklik gerektiren kısmı oluşturmak yerine tüm DOM'yi geçer. Hangisi zaman alıcı ve pahalıdır.

Sıradan bir deyişle, Diyelim ki arabanızın motorunun bir tamire ihtiyacı var, bu yüzden tüm arabanızı tamir etmek yerine motoru tamir ettireceksiniz. Aynısı sanal DOM'da da geçerlidir, tüm DOM'yi oluşturmak yerine, değişikliğin yapıldığı yerde yalnızca o öğe oluşturulur.

React, yeni ağaç ve en son ağaç arasındaki değişiklikleri karşılaştırmak için Diff Algoritmasını kullanır (Buradaki ağaç, yeni VDOM ve en son VDOM olan, yapılan değişikliklerden başka bir şey değildir). Bu karşılaştırma işlemine Mutabakat denir.

React, Genişlik öncelikli aramayı (BFS) kullanarak ağacı ayrıştırır.

Her zaman aklınızda bulundurun, Sanal DOM fiziksel olarak mevcut değildir, bu bir bellek içi temsili veya Gerçek DOM'nin bir planıdır.

Başka bir örnek verelim: İki girdi alanından oluşan bir form oluşturuyorsunuz. Şimdi başka bir giriş alanı eklemeniz gerekiyor, üçüncü giriş alanını eklediğinizde, yaptığınız değişikliklerle VDOM oluşturulur ve gerçek DOM etkilenmeden kalır. Artık VDOM ve gerçek DOM arasındaki karşılaştırma gerçekleşir ve değişiklikler yalnızca gerektiğinde div'de yapılır.

Neden sanal DOM? Basit, Hızlı tepki veren şey budur. Bunu sanal DOM farkıyla yapar. Eski ve yeni iki sanal ağacı karşılaştırarak, gerçek DOM'da yalnızca gerekli değişiklikleri yapın.

VDOM'nin React js tarafından geliştirildiği konusunda kafanız karışmasın, VDOM, React js tarafından kullanılan bir kavramdır. Sanal DOM, esasen belirli bir zamanda DOM'nin ekran görüntüsüdür. Her değişiklik yapıldığında, bileşen yeni bir VDOM oluşturacak şekilde yeniden oluşturulur.

Virtual DOM, uygulamanızı hızlandırdığı ve tüm sayfanın gereksiz şekilde oluşturulmasını ortadan kaldırdığı için popülerliğini kazanmıştır. Bu da hem zamandan hem de paradan tasarruf sağlar.

Umarım makaleyi beğenmişsinizdir ve faydalı bulmuşsunuzdur. Bir şeyi kaçırdıysam, lütfen yorum bölümünde bana bildirin.