O DOM virtual é uma árvore leve de objetos JavaScript comuns que o React mantém na memória para descrever a interface real. Quando o estado muda, o React primeiro calcula uma nova árvore, a compara com a antiga e só então aplica no DOM real as diferenças encontradas, de modo que a tela seja atualizada com o menor custo possível. Esse fluxo em duas etapas é o coração do modelo de renderização do React.
Grupo
Conceitos Básicos
Tipo
Padrão
Desde
Primeiras versões do React
ℹ️ Informação O editor transpila JSX para JavaScript e renderiza a UI real na sandbox; os componentes são montados automaticamente — sem render manual.
📝 Sintaxe
O estado muda
→ A função do componente roda de novo e produz uma nova árvore de DOM virtual
→ Diff: as árvores antiga e nova são comparadas nível a nível para encontrar as diferenças
→ Commit: apenas essas diferenças são aplicadas no DOM real
Retorna：Sem valor de retorno — uma convenção de código e um modelo mental.
▶ Exemplo
O exemplo roda direto: renderiza automaticamente ao expandir e edições valem na hora.
Saída：
Duas linhas centralizadas — "Number" e "re-rendered N times" — mais um botão. Cada clique aumenta os dois números enquanto o resto da página fica parado, o que mostra que "a função roda de novo, o DOM só atualiza o diff".
ℹ️ Informação O DOM virtual é um meio de implementar UI declarativa, não uma bala de prata de performance; o diff também segue heurísticas, como comparar irmãos no mesmo nível.
💡 Dica Chaves estáveis afetam diretamente a qualidade do diff: uma chave estável permite que o React reaproveite nós existentes e evite trabalho desnecessário.
⚠️ Aviso Nunca manipule o DOM real manualmente dentro de uma função de render — isso contorna o mecanismo de atualização do DOM virtual e deixa o estado e a interface fora de sincronia.
P O DOM virtual é sempre mais rápido do que manipular o DOM diretamente?
R Nem sempre. Uma única operação de DOM ajustada à mão pode ser mais rápida; o valor do DOM virtual está em manter rápidas e manuteníveis muitas atualizações frequentes, com uma carga mental muito menor.
P Como funciona o algoritmo de diff do React?
R Ele usa heurísticas: elementos de tipos diferentes são reconstruídos, elementos do mesmo tipo têm apenas os atributos alterados atualizados e listas de irmãos são casadas por key para decidir se um nó deve ser reaproveitado, movido ou removido.
P O que a key tem a ver com o DOM virtual?
R Ao diferenciar uma lista, o React usa a key para parear nós antigos e novos um a um; uma chave estável reaproveita os nós corretamente, enquanto usar o índice pode atualizar o item errado.
Equipe Técnica Web-Tutorial
Uma plataforma de tutoriais mantida por diversos desenvolvedores. Cada tutorial é escrito e revisado por profissionais da área correspondente. Trabalhamos para manter nosso conteúdo preciso e confiável — se encontrar algum problema, avise-nos.
