Declarative UI UI declarativa
Última atualização: 2026-11-03
Declarative UI UI declarativa
UI declarativa significa descrever apenas como a interface deve ficar em determinado estado, em vez de escrever operações de DOM passo a passo; quando o estado muda, o React leva a tela ao estado correspondente. Comparado ao estilo imperativo do jQuery, o código fica mais previsível e muito mais fácil de manter, porque existe uma única fonte de verdade: o estado.
| 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
// Imperativo (o jeito antigo): altere o DOM passo a passo
document.getElementById('tip').textContent = 'Submitted'
// Declarativo (o jeito do React): descreva o mapeamento do estado para a interface
{submitted ? <p>Submitted</p> : <p>Not submitted yet</p>}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：
Um rótulo grande com o status da lâmpada (acesa ou apagada) e um botão no centro da tela; clicar no botão troca os dois instantaneamente, e nenhuma operação de DOM é feita manualmente.💡 Pontos-chave
💡 Dica Antes de escrever um componente, decida quais estados existem e como cada um é — o código declarativo se escreve sozinho a partir daí.
ℹ️ Informação Para quem vem do jQuery, a maior mudança é substituir uma sequência de operações por uma declaração do resultado.
⚠️ Aviso Evite código meio declarativo, meio imperativo: renderizar de forma declarativa e ao mesmo tempo reescrever o texto por uma ref deixa duas fontes de verdade em conflito.
🏷️ Mais Conceitos Básicos
💡 Casos Relacionados
Mais casos em breve.
📚 Tutoriais Relacionados
❓ Perguntas Frequentes
P Qual é a diferença entre UI declarativa e imperativa?
R O código imperativo descreve como fazer algo (uma sequência de operações de DOM); o código declarativo descreve o que é (qual interface corresponde a qual estado). O React só pede que você mude o estado e cuida do processo de atualização.
P Por que o React escolheu o modelo declarativo?
R O código de UI declarativa está fortemente atrelado ao estado, então é previsível, fácil de testar e fácil de manter em equipe; a lógica difícil de sincronização com o DOM é tratada de forma uniforme pelo framework, o que reduz a área onde os bugs se escondem.
P Como faço animações com uma UI declarativa?
R Dirija nomes de classe do CSS a partir do estado, ou use uma biblioteca de animação declarativa como o framer-motion, para que as animações sejam descritas pelo estado em vez de tweens escritos à mão.
