O que é o Virtual DOM?

Recentemente, olhei para o framework React do Facebook . Ele usa um conceito chamado "o DOM virtual", que eu realmente não entendi.

O que é o DOM virtual? Quais são as vantagens?

React cria uma árvore de objetos personalizados que representam uma parte do DOM. Por exemplo, em vez de criar um elemento DIV real que contém um elemento UL, ele cria um objeto React.div que contém um objeto React.ul. Ele pode manipular esses objetos muito rapidamente, sem realmente tocar no DOM real ou passar pela API do DOM. Então, quando renderiza um componente, ele usa esse DOM virtual para descobrir o que ele precisa fazer com o DOM real para obter as duas árvores correspondentes.

Você pode pensar no DOM virtual como um modelo. Ele contém todos os detalhes necessários para construir o DOM, mas como não requer todas as partes pesadas que entram em um DOM real, ele pode ser criado e alterado com muito mais facilidade.

Vamos dar um exemplo - embora muito ingênuo: se você tem alguma coisa bagunçada em um quarto da sua casa e precisa limpá-lo, qual será o seu primeiro passo? Você vai limpar seu quarto que está bagunçado ou toda a casa? A resposta é definitivamente que você estará limpando apenas a sala que requer a limpeza. É isso que o DOM virtual faz.

O JS comum percorre ou renderiza todo o DOM em vez de renderizar apenas a parte que requer alterações.

Portanto, sempre que houver alterações, como você deseja adicionar outro <div>ao seu DOM, será criado o DOM virtual que, na verdade, não faz nenhuma alteração no DOM real. Agora, com este DOM virtual, você verificará a diferença entre este e o seu DOM atual. E apenas a parte que é diferente (neste caso, a nova <div>) será adicionada em vez de renderizar novamente o DOM inteiro.

Qual é o DOM virtual?

O DOM virtual é uma representação na memória dos elementos DOM reais gerados pelos componentes do React antes que sejam feitas alterações na página.

É uma etapa que ocorre entre a função de renderização que está sendo chamada e a exibição de elementos na tela.

O método de renderização de um componente retorna alguma marcação, mas ainda não é o HTML final. É a representação na memória do que se tornará elementos reais (este é o passo 1). Em seguida, essa saída será transformada em HTML real, que é o que é exibido no navegador (esta é a etapa 2).

Então, por que passar por tudo isso para gerar um DOM virtual? Resposta simples - é isso que permite que o reagir seja rápido. Faz isso por meio da difusão DOM virtual. Comparando duas árvores virtuais - antigas e novas - e faça apenas as alterações necessárias no DOM real.

Fonte da introdução para reagir # 2

A virtual DOM(VDOM) não é um conceito novo: https://github.com/Matt-Esch/virtual-dom .

O VDOM é estrategicamente atualizado para atualizar o DOM sem redesenhar todos os nós em um aplicativo de página única. Encontrar um nó em uma estrutura em árvore é fácil, mas a árvore DOM para um aplicativo SPA pode ser drasticamente enorme. Encontrar e atualizar um nó / nós no caso de um evento não economiza tempo.

O VDOM resolve esse problema criando uma abstração de rótulo alto do domínio real. O VDOM é uma representação em árvore leve e de alto nível na memória do DOM real.

Por exemplo, considere adicionar um nó no DOM; reagir mantenha uma cópia do VDOM na memória

1. Crie um VDOM com um novo estado
2. Compare-o com o VDOM mais antigo usando diffing.
3. Atualize apenas nós diferentes no DOM real.
4. Atribua um novo VDOM como um VDOM mais antigo.

Esta é uma breve descrição e reiteração do DOM Virtual, frequentemente mencionado ao lado do ReactJS.

O DOM (Document Object Model) é uma abstração de texto estruturado, o que significa que é feito de código HTML e css. Esses elementos HTML se tornam nós no DOM. Existem limitações para os métodos anteriores de manipulação do DOM. O DOM virtual é uma abstração do DOM literal em HTML criado bem antes de o React ser criado ou usado, mas para nossos propósitos, o usaremos em conjunto com o ReactJS. O DOM virtual é leve e desanexado da implementação do DOM no navegador. O DOM virtual é essencialmente uma captura de tela (ou cópia) do DOM em um determinado momento. Uma maneira de ver isso da perspectiva dos desenvolvedores é o DOM é o ambiente de produção e o Virtual DOM é o ambiente local (dev). Cada vez que os dados são alterados em um aplicativo React, uma nova representação DOM virtual da interface do usuário é criada.

O método mais básico necessário para criar um componente estático no ReactJS são:

Você deve retornar o código do método render. Você deve converter todas as classes em className, pois classe é uma palavra reservada em JavaScript. Além das alterações mais importantes, existem pequenas diferenças entre os dois DOMs, incluindo três atributos que aparecem no DOM Virtual, mas não no HTML DOM (chave, ref e DangerouslySetInnerHTML).

Uma coisa importante a entender ao trabalhar com o DOM virtual é a diferença entre ReactElement e ReactComponent.

ReactElement

• Um ReactElement é uma representação virtual leve, sem estado, imutável e imutável de um Elemento DOM.
• ReactElement - este é o tipo principal em React e reside no DOM virtual.

• ReactElements pode ser renderizado no HTML DOM

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

• JSX compila tags HTML em ReactElements

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

ReactComponent

• ReactComponent - ReactComponent são componentes com estado.
• React.createClass é considerado um ReactComponent.
• Sempre que o estado muda, o componente é renderizado novamente.

Sempre que um ReactComponent tiver uma alteração de estado, queremos o mínimo de alteração possível no DOM HTML, para que o ReactComponent seja convertido no ReactElement, que pode ser inserido no DOM Virtual, comparado e atualizado com rapidez e facilidade.

Quando o React conhece o diff, ele é convertido no código de nível inferior (HTML DOM), que é executado no DOM.

É um conceito interessante: em vez de manipular o DOM diretamente, que é propenso a erros e depende de um estado mutável, você gera um valor chamado DOM virtual. O DOM virtual é então diferido com o estado atual do DOM, o que gera uma lista de operações do DOM que tornariam o DOM atual parecido com o novo. Essas operações são aplicadas rapidamente em um lote.

Retirado daqui.

O DOM virtual é uma abstração do DOM em HTML que processa seletivamente subárvores de nós com base em alterações de estado. Faz a menor quantidade possível de manipulação de DOM para manter seus componentes atualizados.

Dom Virtual é criada uma cópia do Dom. O dom virtual é comparado ao dom, e o dom virtual atualiza apenas a parte do dom que mudou. não está renderizando o dom inteiro; apenas mudou a parte atualizada do dom in dom. Consome muito tempo e, dessa funcionalidade, nosso aplicativo funciona rápido.

Todas as respostas são ótimas. Acabei de criar uma analogia que provavelmente pode dar uma metáfora do mundo real.

O DOM real é como o seu quarto, os nós são os móveis do seu quarto. O DOM virtual é como desenhamos um plano dessa sala atual.

Todos nós temos a experiência de mover móveis, é muito cansativo (o mesmo conceito que atualizar visualizações em computadores). Portanto, sempre que queremos alterar a posição / adicionar móveis (nós), queremos fazer apenas as alterações necessárias.

Blueprint veio para o resgate para alcançá-lo. Desenhamos um novo modelo e comparamos a diferença com o original. Isso nos permite saber qual parte foi alterada e qual parte permanece a mesma. Em seguida, fazemos a alteração necessária na sala real (atualizamos os nós alterados no DOM real). Hurrah.

(Alguns podem pensar: por que precisamos confiar no virtual e não comparar diretamente o DOM real? Bem, na analogia, comparar o DOM real significa que você precisa criar outra sala real e compará-la com a original. É muito caro.)

vamos fazer ordem e sentido nesse assunto. React (ou qualquer outra biblioteca) é uma "camada" em javascript.

Não existe dom virtual, há dom desapegado.

deixe-me explicar em javascript simples:

 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;

neste ponto, criamos um Div que não é mostrado no dom, porque não anexou

mas podemos acessá-lo, adicionar atributos, valores, alterar etc.

quando chamamos: (por exemplo, adicione-o ao corpo)

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

então vamos ver;

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