DOM: DOM significa 'Document Object Model'. Em termos simples, é uma representação estruturada dos elementos HTML que estão presentes em uma página da web ou aplicativo da web. DOM representa toda a IU do seu aplicativo. O DOM é representado como uma estrutura de dados em árvore. Ele contém um nó para cada elemento da IU presente no documento da web. É muito útil, pois permite que desenvolvedores web modifiquem o conteúdo através de JavaScript, além de estar em formato estruturado ajuda muito, pois podemos escolher alvos específicos e todo o código fica muito mais fácil de trabalhar. Se você quiser saber mais sobre o DOM, visite este link.
Atualizando DOM:Se você conhece um pouco sobre JavaScript, deve ter visto pessoas usando o método 'getElementById()' ou 'getElementByClass()' para modificar o conteúdo do DOM. Sempre que houver uma mudança no estado do seu aplicativo, o DOM é atualizado para refletir essa mudança na IU. Embora fazer coisas como essa não seja um problema e funcione bem, considere um caso em que temos um DOM que contém nós em um grande número, e também todos esses elementos da web têm estilos e atributos diferentes. Como o DOM é representado como uma árvore, atualizar a árvore aqui não é uma operação cara, na verdade, temos muitos algoritmos nas árvores para fazer as atualizações mais rápidas. O que está provando ser caro é que toda vez que o DOM é atualizado, o elemento atualizado e seus filhos precisam ser renderizados novamente para atualizar a IU de nossa página.
Exemplo: 

// Simple getElementById() method
document.getElementById('some-id').innerValue = 'updated value';

Ao escrever o código acima no console ou no arquivo JavaScript, estas coisas acontecem: 

  • O navegador analisa o HTML para encontrar o nó com este id.
  • Ele remove o elemento filho deste elemento específico.
  • Atualiza o elemento (DOM) com o 'valor atualizado'.
  • Recalcula o CSS para os nós pai e filho.
  • Atualize o layout.
  • Finalmente, atravesse a árvore e pinte-a na tela (navegador).

Então, como sabemos agora que atualizar o DOM não envolve apenas alterar o conteúdo, tem muito mais coisas anexadas a ele. Além disso, recalcular o CSS e alterar os layouts envolve algoritmos complexos e afetam o desempenho. Portanto, o React tem uma abordagem diferente para lidar com isso, pois faz uso de algo conhecido como Virtual DOM.
 

Virtual DOM: o React usa o Virtual DOM existente, que é como uma cópia leve do DOM real (uma representação virtual do DOM). Portanto, para cada objeto que existe no DOM original, há um objeto para isso no React Virtual DOM. É exatamente o mesmo, mas não tem o poder de alterar diretamente o layout do documento. A manipulação do DOM é lenta, mas a manipulação do Virtual DOM é rápida, pois nada é desenhado na tela. Portanto, cada vez que há uma mudança no estado de nosso aplicativo, o DOM virtual é atualizado primeiro, em vez do DOM real. Você ainda pode se perguntar: “Não estamos fazendo a mesma coisa de novo e dobrando nosso trabalho? Como isso pode ser mais rápido? ” Leia abaixo para entender como as coisas ficarão mais rápidas usando o DOM virtual.

Como o DOM virtual realmente torna as coisas mais rápidas: Quando qualquer coisa nova é adicionada ao aplicativo, um DOM virtual é criado e é representado como uma árvore. Cada elemento do aplicativo é um nó nesta árvore. Assim, sempre que houver uma mudança no estado de algum elemento, uma nova árvore Virtual DOM é criada. Essa nova árvore do Virtual DOM é então comparada com a árvore do Virtual DOM anterior e faz uma anotação das alterações. Depois disso, ele encontra as melhores maneiras possíveis de fazer essas alterações no DOM real. Agora, apenas os elementos atualizados serão renderizados na página novamente.

Como o Virtual DOM ajuda a reagir: Na reação, tudo é tratado como um componente, seja ele um componente funcional ou um componente de classe. Um componente pode conter um estado. Cada vez que alteramos algo em nosso arquivo JSX ou vamos colocá-lo em termos simples, sempre que o estado de qualquer componente é alterado reage atualiza sua árvore Virtual DOM. Embora possa parecer ineficaz, o custo não é muito significativo, pois atualizar o DOM virtual não leva muito tempo. O React mantém dois DOM virtuais de cada vez, um contém o DOM virtual atualizado e outro que é apenas a versão de pré-atualização deste DOM virtual atualizado. Agora ele compara a versão pré-atualização com o Virtual DOM atualizado e descobre o que exatamente mudou no DOM, como quais componentes foram alterados. Este processo de comparação da árvore DOM Virtual atual com a anterior é conhecido como'diffing' . Depois que o React descobre o que exatamente mudou, ele atualiza apenas esses objetos, no DOM real. O React usa algo chamado de atualizações em lote para atualizar o DOM real. Significa apenas que as alterações no DOM real são enviadas em lotes, em vez de enviar qualquer atualização para uma única alteração no estado de um componente. Vimos que a nova renderização da IU é a parte mais cara e o React consegue fazer isso de maneira mais eficiente, garantindo que o Real DOM receba atualizações em lote para renderizar novamente a IU. Todo esse processo de transformar as alterações no DOM real é chamado de Reconciliação

Isso melhora significativamente o desempenho e é a principal razão pela qual React e seu Virtual DOM são muito amados por desenvolvedores de todo o mundo.