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 árvores. Por exemplo, os navegadores usam estruturas de árvores para modelar HTML (DOM) e CSS (CSSOM). Plataformas móveis também usam árvores para representar sua hierarquia de visualização.

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

A Árvore de Renderização

Uma característica importante dos componentes é a capacidade de compor componentes de outros componentes. À medida que aninhamos componentes, temos o conceito de componentes pai e filho, onde cada componente pai pode ser ele mesmo 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>
    </>
  );
}

Do aplicativo de exemplo, 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 do React é o componente raiz do aplicativo. Neste caso, o componente raiz é App e é 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á na árvore de renderização acima que não há menção das tags HTML que cada componente renderiza. Isso ocorre porque a árvore de renderização é composta apenas de componentes React.

React, como uma biblioteca de UI, é agnóstico à plataforma. Em react.dev, mostramos exemplos que renderizam na web, que usa marcação HTML como seus primitivos de UI. Mas um aplicativo React poderia renderizar em uma plataforma móvel ou desktop, que pode usar diferentes primitivos de UI como UIView ou FrameworkElement.

Esses primitivos de UI da plataforma não fazem parte do React. As árvores de renderização do React podem fornecer informações sobre nosso aplicativo React, independentemente da plataforma em que seu aplicativo renderiza.

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

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

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 em diferentes passagens de renderização, essas árvores geralmente são úteis para identificar quais são os componentes de nível superior e folha em um aplicativo React. Os componentes de nível superior são os componentes mais próximos do componente raiz e afetam o desempenho da renderização de todos os componentes abaixo deles e geralmente contêm a maior complexidade. Os componentes folha estão próximos da parte inferior da árvore e não têm componentes filhos e costumam ser renderizados com frequência.

Identificar essas categorias de componentes é útil para entender o fluxo de dados e a performance 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 de um 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 ramificação representa uma declaração import nesse módulo.

Se pegarmos o aplicativo Inspirations 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 arquivo de ponto de entrada. É frequentemente o módulo que contém o componente raiz.

Comparando com a árvore de renderização do mesmo aplicativo, existem 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 em App.js, mas na árvore de renderização, Copyright, o componente, aparece como um filho de InspirationGenerator. Isso ocorre porque InspirationGenerator aceita JSX como children props, portanto, ele 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 compilação que irá empacotar todo o JavaScript necessário para enviar 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, o tamanho do pacote também. Tamanhos de pacote grandes são caros para um cliente baixar e executar. Tamanhos de pacote grandes podem atrasar o tempo para sua UI ser desenhada. Obter uma noção da árvore de dependência do seu aplicativo pode ajudar com a depuração desses problemas.

Recap

• Árvores são uma forma comum de representar a relação entre entidades. Elas são frequentemente usadas para modelar UI.
• Árvores de renderização representam a relação aninhada entre os componentes do 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.
• As árvores de renderização ajudam a identificar quais são os componentes de nível superior e folha. Os componentes de nível superior afetam o desempenho da renderização de todos os componentes abaixo deles e os componentes folha são frequentemente renderizados novamente. Identificá-los é útil para entender e depurar a performance de renderização.
• Árvores de dependência representam as dependências de módulos em um aplicativo React.
• As árvores de dependência são usadas por ferramentas de construção para empacotar o código necessário para enviar um aplicativo.
• As árvores de dependência são úteis para depurar tamanhos de pacote grandes que diminuem o tempo de pintura e expõem oportunidades para otimizar o código que é empacotado.