v19.2Latest

Compreendendo Sua UI como uma Árvore

Seu aplicativo React está tomando forma com muitos componentes aninhados uns dentro dos outros. Como o React acompanha a estrutura de componentes do seu aplicativo?

React, e muitas outras bibliotecas de UI, modelam a UI como uma árvore. Pensar no seu aplicativo como uma árvore é útil para entender a relação entre os componentes. Essa compreensão ajudará você a depurar conceitos futuros como desempenho e gerenciamento de estado.

Você aprenderá
  • Como o React "vê" as estruturas de componentes
  • O que é uma árvore de renderização e para que ela serve
  • O que é uma árvore de dependência de módulos e para que ela serve

Sua UI como uma árvore

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

Diagrama com três seções dispostas horizontalmente. Na primeira seção, há três retângulos empilhados verticalmente, com os rótulos 'Componente A', 'Componente B' e 'Componente C'. A transição para o próximo painel é uma seta com o logo do React no topo, rotulada 'React'. A seção do meio contém uma árvore de componentes, com a raiz rotulada 'A' e dois filhos rotulados 'B' e 'C'. A próxima seção é novamente transicionada usando uma seta com o logo do React no topo, rotulada 'React DOM'. A terceira e última seção é um wireframe de um navegador, contendo uma árvore de 8 nós, da qual apenas um subconjunto está destacado (indicando a subárvore da seção do meio).Diagrama com três seções dispostas horizontalmente. Na primeira seção, há três retângulos empilhados verticalmente, com os rótulos 'Componente A', 'Componente B' e 'Componente C'. A transição para o próximo painel é uma seta com o logo do React no topo, rotulada 'React'. A seção do meio contém uma árvore de componentes, com a raiz rotulada 'A' e dois filhos rotulados 'B' e 'C'. A próxima seção é novamente transicionada usando uma seta com o logo do React no topo, rotulada 'React DOM'. A terceira e última seção é um wireframe de um navegador, contendo uma árvore de 8 nós, da qual apenas um subconjunto está destacado (indicando a subárvore da seção do meio).

O React cria uma árvore de UI a partir de seus componentes. Neste exemplo, a árvore de UI é então usada para renderizar no DOM.

Assim como navegadores e plataformas móveis, o React também usa estruturas de árvore para gerenciar e modelar o relacionamento 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 a partir de outros componentes. Conformeaninhamos componentes, temos o conceito de componentes pai e filho, onde cada componente pai pode, por sua vez, ser um filho de outro componente.

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

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

Gráfico de árvore com cinco nós. Cada nó representa um componente. A raiz da árvore é App, com duas setas se estendendo dela para 'InspirationGenerator' e 'FancyText'. As setas são rotuladas com a palavra 'renderiza'. O nó 'InspirationGenerator' também tem duas setas apontando para os nós 'FancyText' e 'Copyright'.Gráfico de árvore com cinco nós. Cada nó representa um componente. A raiz da árvore é App, com duas setas se estendendo dela para 'InspirationGenerator' e 'FancyText'. As setas são rotuladas com a palavra 'renderiza'. O nó 'InspirationGenerator' também tem duas setas apontando para os nós 'FancyText' e 'Copyright'.

O React cria umaárvore de renderização, uma árvore de UI, composta pelos componentes renderizados.

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

A árvore é composta por nós, cada um representando 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 é ocomponente raizdo aplicativo. Neste caso, o componente raiz éAppe é 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?

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

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

Gráfico de árvore com seis nós. O nó superior da árvore é rotulado 'App' com duas setas estendendo-se para nós rotulados 'InspirationGenerator' e 'FancyText'. As setas são linhas sólidas e rotuladas com a palavra 'renderiza'. O nó 'InspirationGenerator' também tem três setas. As setas para os nós 'FancyText' e 'Color' são tracejadas e rotuladas com 'renderiza?'. A última seta aponta para o nó rotulado 'Copyright' e é sólida e rotulada com 'renderiza'.Gráfico de árvore com seis nós. O nó superior da árvore é rotulado 'App' com duas setas estendendo-se para nós rotulados 'InspirationGenerator' e 'FancyText'. As setas são linhas sólidas e rotuladas com a palavra 'renderiza'. O nó 'InspirationGenerator' também tem três setas. As setas para os nós 'FancyText' e 'Color' são tracejadas e rotuladas com 'renderiza?'. A última seta aponta para o nó rotulado 'Copyright' e é sólida e rotulada com 'renderiza'.

Com a renderização condicional, em diferentes renderizações, a árvore de renderização pode renderizar componentes diferentes.

Neste exemplo, dependendo do queinspiration.typefor, 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 geralmente são úteis para identificar quais são oscomponentes de nível superiore oscomponentes folhaem 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 e geralmente contêm a maior complexidade. Componentes folha estão perto da parte inferior da árvore e não têm componentes filhos e são frequentemente re-renderizados com frequência.

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

Outro relacionamento em um aplicativo React que pode ser modelado com uma árvore são as dependências de módulos de um aplicativo. Conformedividimos nossos componentese lógica em arquivos separados, criamosmódulos JSonde 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 instruçãoimportnaquele 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.

Um gráfico de árvore com sete nós. Cada nó está rotulado com um nome de módulo. O nó de nível superior da árvore está rotulado como 'App.js'. Há três setas apontando para os módulos 'InspirationGenerator.js', 'FancyText.js' e 'Copyright.js' e as setas estão rotuladas com 'imports'. Do nó 'InspirationGenerator.js', há três setas que se estendem para três módulos: 'FancyText.js', 'Color.js' e 'inspirations.js'. As setas estão rotuladas com 'imports'.Um gráfico de árvore com sete nós. Cada nó está rotulado com um nome de módulo. O nó de nível superior da árvore está rotulado como 'App.js'. Há três setas apontando para os módulos 'InspirationGenerator.js', 'FancyText.js' e 'Copyright.js' e as setas estão rotuladas com 'imports'. Do nó 'InspirationGenerator.js', há três setas que se estendem para três módulos: 'FancyText.js', 'Color.js' e 'inspirations.js'. As setas estão rotuladas com 'imports'.

A árvore de dependência de módulos para o aplicativo Inspirations.

O nó raiz da árvore é o módulo raiz, também conhecido como arquivo de entrada. 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 que não são componentes, comoinspirations.js, também são representados nesta árvore. A árvore de renderização encapsula apenas componentes.
  • Copyright.jsaparece sobApp.js, mas na árvore de renderização,Copyright, o componente, aparece como um filho deInspirationGenerator. Isso ocorre porqueInspirationGeneratoraceita JSX comoprops children, então ele renderizaCopyrightcomo 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, normalmente há uma etapa de build que agrupará todo o JavaScript necessário para enviar ao cliente. A ferramenta responsável por isso é chamada debundler, 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 bundle geralmente também cresce. Bundles grandes são caros para o cliente baixar e executar. Bundles grandes podem atrasar o tempo para sua interface do usuário ser desenhada. Ter uma noção da árvore de dependência do seu aplicativo pode ajudar a depurar esses problemas.

Recapitulação

  • Árvores são uma forma 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 renderização condicional, a árvore de renderização pode mudar entre diferentes renderizações. Com diferentes valores de props, os componentes podem renderizar diferentes componentes filhos.
  • Árvores de renderização ajudam a identificar quais são os componentes de nível superior e os componentes folha. Componentes de nível superior afetam o desempenho de renderização de todos os componentes abaixo deles, e componentes folha são frequentemente re-renderizados com frequência. Identificá-los é útil para entender e depurar o desempenho de renderização.
  • Árvores de dependência representam as dependências de módulos em um aplicativo React.
  • Árvores de dependência são usadas por ferramentas de build para agrupar o código necessário para enviar um aplicativo.
  • Árvores de dependência são úteis para depurar tamanhos grandes de bundle que atrasam o tempo de pintura e expõem oportunidades para otimizar qual código é agrupado.
上一篇Mantendo Componentes Puros下一篇Adicionando Interatividade