Sanal DOM nedir?

Son zamanlarda Facebook'un React çerçevesine baktım . Gerçekten anlamadığım "Sanal DOM" kavramını kullanıyor.

Sanal DOM nedir? Avantajları nelerdir?

React, DOM'un bir bölümünü temsil eden özel nesneler ağacı oluşturur. Örneğin, bir UL öğesi içeren gerçek bir DIV öğesi oluşturmak yerine, bir React.ul nesnesi içeren bir React.div nesnesi oluşturur. Gerçekten gerçek DOM dokunmadan veya DOM API geçmeden bu nesneleri çok hızlı bir şekilde manipüle edebilir. Daha sonra, bir bileşeni oluşturduğunda, bu sanal DOM'u kullanarak iki ağacın eşleşmesini sağlamak için gerçek DOM ile ne yapması gerektiğini anlar.

Sanal DOM'u bir plan gibi düşünebilirsiniz. DOM'u oluşturmak için gereken tüm ayrıntıları içerir, ancak gerçek bir DOM'a giren tüm ağır kısımları gerektirmediğinden, daha kolay oluşturulabilir ve değiştirilebilir.

Bir örnek alalım - çok naif bir tane olsa da: Evinizdeki bir odada dağınık bir şey varsa ve onu temizlemeniz gerekiyorsa, ilk adımınız ne olacak? Dağınık odanızı mı yoksa tüm evi mi temizleyeceksiniz? Cevap kesinlikle sadece temizlik gerektiren oda temizliği olacaktır. Sanal DOM bunu yapar.

Sıradan JS, yalnızca değişiklik gerektiren kısmı oluşturmak yerine DOM'un tamamını geçer veya oluşturur.

Bu nedenle <div>, DOM'nize başka bir tane eklemek istediğinizde olduğu gibi, değişiklik yaptığınızda, gerçek DOM'da herhangi bir değişiklik yapmayan sanal DOM oluşturulur. Şimdi bu sanal DOM ile, bu ve mevcut DOM'niz arasındaki farkı kontrol edeceksiniz. Ve <div>tüm DOM'u yeniden oluşturmak yerine yalnızca farklı olan kısım (bu durumda yeni ) eklenir.

Sanal DOM nedir?

Sanal DOM, sayfada herhangi bir değişiklik yapılmadan önce React bileşenleri tarafından oluşturulan gerçek DOM öğelerinin bellek içi temsilidir.

Bu, çağrılan render işlevi ile öğelerin ekranda görüntülenmesi arasında gerçekleşen bir adımdır.

Bir bileşenin oluşturma yöntemi bir miktar biçimlendirme döndürür, ancak henüz nihai HTML değildir. Gerçek unsurların ne olacağının bellek içi temsilidir (bu adım 1'dir). Daha sonra bu çıktı, tarayıcıda görüntülenen gerçek HTML'ye dönüştürülecektir (Bu adım 2'dir).

Peki neden sanal bir DOM oluşturmak için tüm bunları gözden geçirelim? Basit cevap - Reaksiyonun hızlı olmasına izin veren şey budur. Bunu sanal DOM farklılığı ile yapar. Eski ve yeni iki sanal ağacı karşılaştırmak ve gerçek DOM'da sadece gerekli değişiklikleri yapmak.

Girişten Kaynak Tepki # 2

A virtual DOM: (VDOM) yeni bir kavram değildir https://github.com/Matt-Esch/virtual-dom .

VDOM stratejik olarak DOM'u tek bir sayfa uygulamasındaki tüm düğümleri yeniden çizmeden güncellemektedir. Bir ağaç yapısında bir düğüm bulmak kolaydır, ancak bir SPA uygulaması için DOM ağacı çok büyük olabilir. Bir olay durumunda bir düğüm / düğüm bulmak ve güncellemek zaman tasarrufu sağlamaz.

VDOM, gerçek dom'un yüksek bir etiket soyutlamasını oluşturarak bu sorunu çözer. VDOM, gerçek DOM'un yüksek düzeyde hafif bir bellek içi ağaç temsilidir.

Örneğin, DOM'a bir düğüm eklemeyi düşünün; tepki VDOM bir kopyasını bellekte tutmak

1. Yeni bir durumla bir VDOM oluşturun
2. Farklı kullanarak eski VDOM ile karşılaştırın.
3. Gerçek DOM'daki yalnızca farklı düğümleri güncelleyin.
4. Eski bir VDOM olarak yeni VDOM atayın.

Bu, ReactJS ile birlikte sık sık bahsedilen Sanal DOM'un kısa bir açıklaması ve yinelemesidir.

DOM (Belge Nesne Modeli), yapılandırılmış metnin bir soyutlamasıdır; bu, HTML kodu ve css'den yapıldığı anlamına gelir. Bu HTML öğeleri DOM'da düğüm haline gelir. DOM'yi işlemek için önceki yöntemlerde sınırlamalar vardır. Sanal DOM, React oluşturulmadan veya kullanılmadan önce oluşturulmuş gerçek HTML DOM'un bir soyutlamasıdır, ancak bizim amaçlarımız için bunu ReactJS ile birlikte kullanacağız. Sanal DOM hafiftir ve tarayıcıdaki DOM uygulamasından ayrılmıştır. Sanal DOM, belirli bir zamanda DOM'nin ekran görüntüsüdür (veya kopyasıdır). Geliştiricilerin bakış açısından bakmanın bir yolu DOM, üretim ortamı ve Sanal DOM ise yerel (dev) ortamdır. Bir React uygulamasındaki veriler her değiştiğinde, kullanıcı arayüzünün yeni bir Sanal DOM temsili oluşturulur.

ReactJS'de statik bir bileşen oluşturmak için gereken en temel yöntem şunlardır:

Kodu render yönteminden döndürmelisiniz. JavaScript'te sınıf ayrılmış sözcük olduğu için her sınıfı className'e dönüştürmelisiniz. Daha büyük değişikliklerin yanı sıra, sanal DOM'da görünen ancak HTML DOM'da olmayan üç özellik (anahtar, ref ve tehlikeli olarak SetSnerInnerHTML) dahil olmak üzere iki DOM arasında küçük farklılıklar vardır.

Sanal DOM ile çalışırken anlaşılması gereken önemli bir nokta ReactElement ve ReactComponent arasındaki farktır.

ReactElement

• ReactElement, bir DOM Öğesinin hafif, vatansız, değişmez, sanal bir temsilidir.
• ReactElement - React içindeki birincil türdür ve Sanal DOM'da bulunur.

• ReactElements HTML DOM'ye dönüştürülebilir

  var root = React.createElement('div'); ReactDOM.render(root, document.getElementById('example'));

• JSX, HTML etiketlerini ReactElements içinde derler

  var root = <div/>; ReactDOM.render(root, document.getElementById('example'));

ReactComponent

• ReactComponent - ReactComponent'ler durum bilgisi olan bileşenlerdir.
• React.createClass bir ReactComponent olarak kabul edilir.
• Durum her değiştiğinde, bileşen yeniden gönderilir.

Bir ReactComponent'in durum değişikliği olduğunda, HTML DOM'de mümkün olduğunca az değişiklik yapmak istiyoruz, böylece ReactComponent, daha sonra Sanal DOM'a eklenebilen, karşılaştırılan ve hızlı ve kolay bir şekilde güncellenebilen ReactElement öğesine dönüştürülür.

React farkını bildiğinde - DOM'da yürütülen düşük düzeyli (HTML DOM) koduna dönüştürülür.

Düzgün bir konsept: DOM'u doğrudan manipüle etmek yerine, hataya eğilimli ve değişebilir duruma dayanan, bunun yerine Sanal DOM adı verilen bir değer çıkarırsınız. Daha sonra Sanal DOM , mevcut DOM'nin yeni durumu gibi görünmesini sağlayacak DOM işlemlerinin bir listesini oluşturan DOM'un mevcut durumundan farklıdır . Bu işlemler toplu olarak hızlı bir şekilde uygulanır.

Buradan alındı .

Sanal DOM, HTML DOM'un durum değişikliklerine bağlı olarak düğüm alt ağaçlarını seçici olarak işleyen bir soyutlamasıdır. Bileşenlerinizi güncel tutmak için mümkün olan en az miktarda DOM manipülasyonu yapar.

Sanal Dom , Dom'un bir kopyası oluşturulur. Sanal dom , dom ile karşılaştırılır ve sanal dom, yalnızca dom'daki değişen bölümü günceller. tüm dom'u oluşturmuyor, sadece dom'daki güncellenmiş kısmı değiştirildi. Çok zaman alıcı ve bu işlevsellikten, uygulamamız hızlı çalışıyor.

Tüm cevaplar harika. Muhtemelen gerçek dünya metaforu verebilecek bir benzetme buldum.

Gerçek DOM odanıza benzer, düğümler odanızdaki mobilyalardır. Sanal DOM, şu anki odanın bir taslağını çiziyormuşuz gibi.

Hepimiz mobilya taşıma deneyimine sahibiz, çok yorucu (Bilgisayarlardaki görünümleri güncellemekle aynı kavram). Bu nedenle, pozisyonu değiştirmek / mobilya (düğümler) eklemek istediğimizde, sadece çok gerekli değişikliği yapmak istiyoruz.

Blueprint kurtarmaya ulaşmak için geldi. Yeni bir plan çiziyoruz ve farkı orijinal olanla karşılaştırıyoruz. Bu, hangi parçanın değiştirildiğini ve hangi parçanın aynı kaldığını bilmemizi sağlar. Daha sonra gerçek odada gerekli değişikliği yaparız (değiştirilen düğümleri gerçek DOM'da güncelleyin). Yaşasın.

(Bazıları, neden sanal olana güvenmemiz ve gerçek DOM'u doğrudan karşılaştırmamamız gerektiğini düşünebilir? Çok pahalı.)

bu konuda düzen ve anlam verelim. React (veya başka bir kütüphane) javascript üzerindeki bir "katman" dır.

Sanal dom diye bir şey yoktur, eklenmemiş dom yoktur.

basit bir javascript ile açıklayayım:

 let vDom = {};     // this is a object that will be used to hold the elements

 let d = document.createElement('div');
 d.innerHTML = 'hi, i am a new div';

 vDom['newDiv'] = d;

bu noktada dom'da gösterilmeyen bir Div yarattık, çünkü

ancak ona erişebilir, nitelikler, değerler ekleyebilir, değiştirebilir vb.

aradığımızda: (örneğin, vücuda ekleyin)

    document.body.appendChild(vDom['newDiv'])

o zaman göreceğiz;

 for one how saw javascript libs come and go , i suggest to any one 
 to do one simple thing : master JAVAscript, not layers :)