English 中文 العربية 日本語 Português

Rendering Model Modelo de renderização

Última atualização: 2026-11-03

Rendering Model Modelo de renderização

O React atualiza em duas etapas: primeiro roda a sua função de componente para produzir o novo JSX (render), depois aplica no DOM real as diferenças em relação ao resultado anterior (commit). Os gatilhos incluem atualizações de estado, mudanças em um Context observado e a re-renderização de um componente pai. Entender esse modelo de duas fases responde à maioria das perguntas sobre re-renderização e explica por que um render pode não tocar no DOM.

GrupoConceitos Básicos
TipoPadrão
DesdePrimeiras 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

Dispare uma atualização (setState / props alteradas / re-render do pai)
  → Render: rode a função do componente para obter o novo JSX (DOM virtual)
  → Commit: aplique no DOM real as diferenças em relação ao resultado anterior
  // Observação: render ≠ tocar no DOM; a fase de render nunca lê nem escreve na página

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：

A página mostra a contagem do pai e o texto do filho; cada clique no botão aumenta os dois números, e o console imprime os logs de render do pai e do filho — o modelo de duas etapas de "rodar a função e depois aplicar o diff".
▶ Experimente

💡 Pontos-chave

ℹ️ Informação "Renderizar" significa rodar de novo a função do componente, não que a página mudou: depois de um render sem diferenças, nem um byte do DOM se move.
⚠️ Aviso As funções de componente devem ser puras: sem requisições, sem mutação de variáveis externas e sem escrita no DOM durante a fase de render — coloque esses efeitos colaterais no useEffect.
💡 Dica O painel Profiler do DevTools mostra quais componentes renderizaram em cada commit e quanto tempo isso levou.
virtual-dom state-updates component react-memo
Mais casos em breve.

📚 Tutoriais Relacionados

Noções básicas sobre estado: useState
Lição 6: o laço mínimo em que uma atualização de estado dispara um render.

❓ Perguntas Frequentes

P Quando o React re-renderiza um componente?
R Quando o próprio estado muda, quando um Context observado muda, quando as props mudam e quando o pai re-renderiza — por padrão, um render do pai faz todos os filhos renderizarem também.
P Um filho sempre renderiza quando o pai atualiza?
R A função dele roda por padrão, mas um filho envolvido em memo pula esse render quando as referências das props continuam iguais.
P Qual a diferença entre render e commit?
R Render é a fase em que sua função de componente roda e calcula o novo JSX; ela pode ser interrompida e rodar de novo. Commit é a fase em que as diferenças são escritas no DOM, e é ali que a página de fato muda.
Web-Tutorial.com

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.

100%