Component Tree Árvore de componentes
Última atualização: 2026-11-03
Component Tree Árvore de componentes
Um aplicativo React é uma árvore de componentes aninhados: o componente raiz fica no topo e os filhos descem. Os dados percorrem essa árvore em uma única direção, via props, e entender o formato da árvore ajuda a planejar até que ponto dividir os componentes e onde o estado deve morar. A árvore também é o mapa que você consulta quando um valor precisa ser compartilhado por vários componentes.
| 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
<App> ← componente raiz
<Header /> ← componente filho
<TodoList>
<TodoItem /> ← um nível mais abaixo; os dados descem via props
</TodoList>
</App>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：
O título do componente raiz aparece no topo, seguido de dois painéis com borda (Today / Tomorrow), cada um listando suas tarefas como linhas — exatamente os três níveis raiz → painel → linha.💡 Pontos-chave
ℹ️ Informação A árvore de componentes descreve relações de composição, enquanto a árvore do DOM descreve os elementos da página; as duas parecem semelhantes, mas não são a mesma coisa.
💡 Dica Quando vários componentes compartilham o mesmo dado, eleve o estado para o pai comum mais próximo e distribua por props.
⚠️ Aviso Hierarquias profundas tornam o perfuração de props longo e ruidoso; use Context ou uma biblioteca de estado quando os dados tiverem de atravessar vários níveis.
🏷️ Mais Conceitos Básicos
💡 Casos Relacionados
Mais casos em breve.
📚 Tutoriais Relacionados
❓ Perguntas Frequentes
P A árvore de componentes do React é a mesma coisa que a árvore do DOM?
R Não. A árvore de componentes é a estrutura de composição do seu JSX, enquanto a árvore do DOM guarda os nós reais no navegador; um componente pode renderizar zero, um ou vários nós do DOM.
P Em que nível da árvore de componentes o estado deve ficar?
R No pai comum mais próximo dos componentes que precisam dele, e mantenha dentro do componente os detalhes que pertencem só a ele, para não elevar demais.
P Como impeço que a árvore de componentes fique funda demais?
R Prefira composição (children) a camadas e mais camadas de wrappers, use Context para dados que ficam fixos em muitos níveis e deixe as otimizações de render para o memo, em vez de ajustar a hierarquia à mão.
