James Moro
Iniciei minha vida profissional como desenvolvedor web em 2008. Tenho um canal no Youtube onde publico vídeos sobre tecnologia.
O melhor da tecnologia está no nosso canal no WhatsApp
DOM é a representação dos compomentes na página. Você manipula o DOM a fim de manipular estes componentes (criar, recriar, alterar seu estado).
Virtual DOM é um framework para manipulação do DOM.
No React, uma cópia de todos os nodes do DOM são replicados em código JavaScript.
Ao invés de fazer alterações diretamente no DOM (que são lentas) elas são feitas no Virtual DOM (rápidas). E somente quando realmente necessário, essas alterações são repassadas para o DOM original.
Virtual DOM oferece três recursos:
1) Uma representação do DOM real na linguagem JavaScript. O DOM real é então gerado a partir desta representação.
2) Computação das diferenças entre o DOM real e a sua representação.
3) Aplicação de patch para atualizar o DOM real conforme o novo estado da sua representação.
Deste modo, utilizando Virtual DOM você:
1) Cria uma representação do DOM na linguagem do Virtual DOM;
2) Manda o Virtual DOM gerar o DOM real;
3) Quando houver alteração no model, em vez de atualizar a DOM real você simplesmente manda regerar toda a representação Virtual DOM passando o novo estado do model como parâmetro;
4) Então você usa o mecanismo de comparação para obter as diferenças entre a representação do Virtual DOM e o DOM real;
5) E usa o mecanismo de patch que vai atualizar o DOM real conforme as diferenças observadas.
Não necessariamente é mais rápido. Ele pode ser mais rápido se o teu código para verificar e manipular o DOM não for tão eficiente quanto o código dele.
Como DOM e Virtual DOM são duas coisas distintas, não há como compará-los.
O que pode ser comparado é o Virtual DOM com outro mecanismo para manipular o DOM (JavaScript puro, JQuery ou outros frameworks como BackboneJS e AngularJS).
Você diz ao React qual o state que você quer que a interface do usuário esteja, e ele garante que o DOM seja igual ao state. Isso abstrai a manipulação de atributos, manipulação de eventos e atualização manual do DOM que, caso ao contrário, você teria que usar para construir o seu app.
No React, sua propaganda é que o Virtual DOM possui uma vantagem principal que é a organização do código, que o deixa mais significativo, e a capacidade que ele te oferece de se focar em outras coisas que não a manipulação do DOM.
Iniciei minha vida profissional como desenvolvedor web em 2008. Tenho um canal no Youtube onde publico vídeos sobre tecnologia.