Entendendo Sua UI como uma Árvore

Sua UI como uma árvore

Árvores são um modelo de relacionamento entre itens e a UI é frequentemente representada usando estruturas de árvore. Por exemplo, os navegadores usam estruturas de árvore para modelar HTML (DOM) e CSS (CSSOM). Plataformas móveis também usam árvores para representar sua hierarquia de visualização.

Assim como navegadores e plataformas móveis, o React também utiliza estruturas de árvore para gerenciar e modelar a relação entre componentes em um aplicativo React. Essas árvores são ferramentas úteis para entender como os dados fluem através de um aplicativo React e como otimizar a renderização e o tamanho do aplicativo.

A Árvore de Renderização

Uma característica principal dos componentes é a capacidade de compor componentes de outros componentes. Ao aninharmos componentes, temos o conceito de componentes pai e filho, onde cada componente pai pode ser também um filho de outro componente.

Quando renderizamos um aplicativo React, podemos modelar essa relação em uma árvore, conhecida como árvore de renderização.

Aqui está um aplicativo React que renderiza citações inspiradoras.

import FancyText from './FancyText';
import InspirationGenerator from './InspirationGenerator';
import Copyright from './Copyright';

export default function App() {
  return (
    <>
      <FancyText title text="Get Inspired App" />
      <InspirationGenerator>
        <Copyright year={2004} />
      </InspirationGenerator>
    </>
  );
}

A partir do exemplo de aplicativo, podemos construir a árvore de renderização acima.

A árvore é composta por nós, cada um dos quais representa um componente. App, FancyText, Copyright, para citar alguns, são todos nós em nossa árvore.

O nó raiz em uma árvore de renderização React é o componente raiz do aplicativo. Neste caso, o componente raiz é App e ele é o primeiro componente que o React renderiza. Cada seta na árvore aponta de um componente pai para um componente filho.

Deep Dive

Onde estão as tags HTML na árvore de renderização?

Show Details

Você notará que na árvore de renderização acima, não há menção das tags HTML que cada componente renderiza. Isso ocorre porque a árvore de renderização é composta apenas por componentes React.

O React, como um framework de UI, é agnóstico em relação à plataforma. No react.dev, mostramos exemplos que são renderizados para a web, que utiliza marcação HTML como seus primitivos de UI. Mas um aplicativo React poderia muito bem ser renderizado para uma plataforma móvel ou desktop, que pode usar primitivos de UI diferentes como UIView ou FrameworkElement.

Esses primitivos de UI de plataforma não são parte do React. As árvores de renderização React podem fornecer insights sobre nosso aplicativo React, independentemente da plataforma para a qual seu aplicativo é renderizado.

Uma árvore de renderização representa uma única passagem de renderização de uma aplicação React. Com renderização condicional, um componente pai pode renderizar crianças diferentes dependendo dos dados passados.

Podemos atualizar o aplicativo para renderizar condicionalmente uma citação inspiradora ou uma cor.

import FancyText from './FancyText';
import InspirationGenerator from './InspirationGenerator';
import Copyright from './Copyright';

export default function App() {
  return (
    <>
      <FancyText title text="Get Inspired App" />
      <InspirationGenerator>
        <Copyright year={2004} />
      </InspirationGenerator>
    </>
  );
}

Neste exemplo, dependendo do que inspiration.type é, podemos renderizar <FancyText> ou <Color>. A árvore de renderização pode ser diferente para cada passagem de renderização.

Embora as árvores de renderização possam diferir entre as passagens de renderização, essas árvores são geralmente úteis para identificar quais são os componentes de nível superior e componentes folha em um aplicativo React. Componentes de nível superior são os componentes mais próximos do componente raiz e afetam o desempenho de renderização de todos os componentes abaixo deles, frequentemente contendo a maior complexidade. Componentes folha estão perto do fundo da árvore e não têm componentes filhos, sendo frequentemente re-renderizados.

Identificar essas categorias de componentes é útil para entender o fluxo de dados e o desempenho do seu aplicativo.

A Árvore de Dependência de Módulos

Outra relação em um aplicativo React que pode ser modelada com uma árvore são as dependências de módulos do aplicativo. À medida que dividimos nossos componentes e lógica em arquivos separados, criamos módulos JS onde podemos exportar componentes, funções ou constantes.

Cada nó em uma árvore de dependência de módulos é um módulo e cada ramo representa uma declaração import nesse módulo.

Se pegarmos o aplicativo de Inspirações anterior, podemos construir uma árvore de dependência de módulos, ou árvore de dependência para abreviar.

O nó raiz da árvore é o módulo raiz, também conhecido como o arquivo de entrada. Ele geralmente é o módulo que contém o componente raiz.

Comparando com a árvore de renderização do mesmo aplicativo, há estruturas semelhantes, mas algumas diferenças notáveis:

• Os nós que compõem a árvore representam módulos, não componentes.
• Módulos não-componentes, como inspirations.js, também são representados nesta árvore. A árvore de renderização encapsula apenas componentes.
• Copyright.js aparece sob App.js, mas na árvore de renderização, Copyright, o componente, aparece como um filho de InspirationGenerator. Isso porque InspirationGenerator aceita JSX como props filhos, então renderiza Copyright como um componente filho, mas não importa o módulo.

As árvores de dependência são úteis para determinar quais módulos são necessários para executar seu aplicativo React. Ao construir um aplicativo React para produção, geralmente há uma etapa de construção que agrupa todo o JavaScript necessário para ser enviado ao cliente. A ferramenta responsável por isso é chamada de bundler, e os bundlers usarão a árvore de dependência para determinar quais módulos devem ser incluídos.

À medida que seu aplicativo cresce, muitas vezes o tamanho do bundle também cresce. Tamanhos de bundle grandes são caros para um cliente baixar e executar. Tamanhos de bundle grandes podem atrasar o tempo que leva para sua UI ser desenhada. Ter uma noção da árvore de dependência do seu aplicativo pode ajudar na depuração desses problemas.

Recap

• Árvores são uma maneira comum de representar a relação entre entidades. Elas são frequentemente usadas para modelar a interface do usuário.
• Árvores de renderização representam a relação aninhada entre componentes React em uma única renderização.
• Com a renderização condicional, a árvore de renderização pode mudar em diferentes renderizações. Com diferentes valores de prop, os componentes podem renderizar diferentes componentes filhos.
• Árvores de renderização ajudam a identificar quais são os componentes de nível superior e folha. Componentes de nível superior afetam o desempenho de renderização de todos os componentes abaixo deles e os componentes folha são frequentemente re-renderizados. Identificá-los é útil para entender e depurar o desempenho de renderização.
• Árvores de dependência representam as dependências de módulo em um aplicativo React.
• Árvores de dependência são usadas por ferramentas de construção para agrupar o código necessário para enviar um aplicativo.
• Árvores de dependência são úteis para depurar tamanhos de bundle grandes que atrasam o tempo de renderização e expõem oportunidades para otimizar qual código é agrupado.