v19.2Latest

Comprender tu interfaz de usuario como un árbol

Tu aplicación de React está tomando forma con muchos componentes anidados entre sí. ¿Cómo hace React para seguir la estructura de componentes de tu aplicación?

React, y muchas otras bibliotecas de interfaz de usuario, modelan la UI como un árbol. Pensar en tu aplicación como un árbol es útil para comprender la relación entre componentes. Esta comprensión te ayudará a depurar conceptos futuros como el rendimiento y la gestión del estado.

Aprenderás
  • Cómo React "ve" las estructuras de componentes
  • Qué es un árbol de renderizado y para qué sirve
  • Qué es un árbol de dependencias de módulos y para qué sirve

Tu interfaz de usuario como un árbol

Los árboles son un modelo de relación entre elementos. La interfaz de usuario a menudo se representa utilizando estructuras de árbol. Por ejemplo, los navegadores utilizan estructuras de árbol para modelar HTML (DOM) y CSS (CSSOM). Las plataformas móviles también utilizan árboles para representar su jerarquía de vistas.

Diagrama con tres secciones dispuestas horizontalmente. En la primera sección, hay tres rectángulos apilados verticalmente, con las etiquetas 'Componente A', 'Componente B' y 'Componente C'. La transición al siguiente panel es una flecha con el logotipo de React en la parte superior etiquetada 'React'. La sección central contiene un árbol de componentes, con la raíz etiquetada 'A' y dos hijos etiquetados 'B' y 'C'. La siguiente sección se transiciona nuevamente usando una flecha con el logotipo de React en la parte superior etiquetada 'React DOM'. La tercera y última sección es un esquema de un navegador, que contiene un árbol de 8 nodos, de los cuales solo un subconjunto está resaltado (indicando el subárbol de la sección central).Diagrama con tres secciones dispuestas horizontalmente. En la primera sección, hay tres rectángulos apilados verticalmente, con las etiquetas 'Componente A', 'Componente B' y 'Componente C'. La transición al siguiente panel es una flecha con el logotipo de React en la parte superior etiquetada 'React'. La sección central contiene un árbol de componentes, con la raíz etiquetada 'A' y dos hijos etiquetados 'B' y 'C'. La siguiente sección se transiciona nuevamente usando una flecha con el logotipo de React en la parte superior etiquetada 'React DOM'. La tercera y última sección es un esquema de un navegador, que contiene un árbol de 8 nodos, de los cuales solo un subconjunto está resaltado (indicando el subárbol de la sección central).

React crea un árbol de interfaz de usuario a partir de tus componentes. En este ejemplo, el árbol de UI se utiliza luego para renderizar en el DOM.

Al igual que los navegadores y las plataformas móviles, React también utiliza estructuras de árbol para gestionar y modelar la relación entre componentes en una aplicación React. Estos árboles son herramientas útiles para comprender cómo fluyen los datos a través de una aplicación React y cómo optimizar el renderizado y el tamaño de la aplicación.

El árbol de renderizado

Una característica principal de los componentes es la capacidad de componer componentes a partir de otros componentes. A medida queanidamos componentes, tenemos el concepto de componentes padre e hijo, donde cada componente padre puede a su vez ser hijo de otro componente.

Cuando renderizamos una aplicación React, podemos modelar esta relación en un árbol, conocido como el árbol de renderizado.

Aquí hay una aplicación React que renderiza citas inspiradoras.

Gráfico de árbol con cinco nodos. Cada nodo representa un componente. La raíz del árbol es App, con dos flechas que se extienden desde ella hacia 'InspirationGenerator' y 'FancyText'. Las flechas están etiquetadas con la palabra 'renderiza'. El nodo 'InspirationGenerator' también tiene dos flechas que apuntan a los nodos 'FancyText' y 'Copyright'.Gráfico de árbol con cinco nodos. Cada nodo representa un componente. La raíz del árbol es App, con dos flechas que se extienden desde ella hacia 'InspirationGenerator' y 'FancyText'. Las flechas están etiquetadas con la palabra 'renderiza'. El nodo 'InspirationGenerator' también tiene dos flechas que apuntan a los nodos 'FancyText' y 'Copyright'.

React crea unárbol de renderizado, un árbol de interfaz de usuario, compuesto por los componentes renderizados.

A partir de la aplicación de ejemplo, podemos construir el árbol de renderizado anterior.

El árbol está compuesto por nodos, cada uno de los cuales representa un componente.App,FancyText,Copyright, por nombrar algunos, son todos nodos en nuestro árbol.

El nodo raíz en un árbol de renderizado de React es elcomponente raízde la aplicación. En este caso, el componente raíz esAppy es el primer componente que renderiza React. Cada flecha en el árbol apunta desde un componente padre a un componente hijo.

Deep Dive
¿Dónde están las etiquetas HTML en el árbol de renderizado?

Un árbol de renderizado representa un único pase de renderizado de una aplicación React. Con larenderización condicional, un componente padre puede renderizar hijos diferentes dependiendo de los datos que se le pasen.

Podemos actualizar la aplicación para renderizar condicionalmente una cita inspiradora o un color.

Gráfico de árbol con seis nodos. El nodo superior del árbol está etiquetado como 'App' con dos flechas que se extienden a nodos etiquetados 'InspirationGenerator' y 'FancyText'. Las flechas son líneas sólidas y están etiquetadas con la palabra 'renderiza'. El nodo 'InspirationGenerator' también tiene tres flechas. Las flechas a los nodos 'FancyText' y 'Color' son discontinuas y están etiquetadas con '¿renderiza?'. La última flecha apunta al nodo etiquetado 'Copyright' y es sólida y está etiquetada con 'renderiza'.Gráfico de árbol con seis nodos. El nodo superior del árbol está etiquetado como 'App' con dos flechas que se extienden a nodos etiquetados 'InspirationGenerator' y 'FancyText'. Las flechas son líneas sólidas y están etiquetadas con la palabra 'renderiza'. El nodo 'InspirationGenerator' también tiene tres flechas. Las flechas a los nodos 'FancyText' y 'Color' son discontinuas y están etiquetadas con '¿renderiza?'. La última flecha apunta al nodo etiquetado 'Copyright' y es sólida y está etiquetada con 'renderiza'.

Con la renderización condicional, a lo largo de diferentes renderizados, el árbol de renderizado puede renderizar componentes diferentes.

En este ejemplo, dependiendo de lo que seainspiration.type, podemos renderizar<FancyText> o <Color>. El árbol de renderizado puede ser diferente para cada pase de renderizado.

Aunque los árboles de renderizado pueden diferir entre pases de renderizado, estos árboles generalmente son útiles para identificar cuáles son loscomponentes de nivel superiory loscomponentes hojaen una aplicación React. Los componentes de nivel superior son los componentes más cercanos al componente raíz y afectan el rendimiento de renderizado de todos los componentes debajo de ellos y a menudo contienen la mayor complejidad. Los componentes hoja están cerca de la parte inferior del árbol y no tienen componentes hijos y a menudo se vuelven a renderizar con frecuencia.

Identificar estas categorías de componentes es útil para comprender el flujo de datos y el rendimiento de tu aplicación.

El árbol de dependencias de módulos

Otra relación en una aplicación React que se puede modelar con un árbol son las dependencias de módulos de una aplicación. A medida quedividimos nuestros componentesy lógica en archivos separados, creamosmódulos JSdonde podemos exportar componentes, funciones o constantes.

Cada nodo en un árbol de dependencias de módulos es un módulo y cada rama representa una declaraciónimporten ese módulo.

Si tomamos la aplicación Inspirations anterior, podemos construir un árbol de dependencias de módulos, o árbol de dependencias para abreviar.

Un gráfico de árbol con siete nodos. Cada nodo está etiquetado con un nombre de módulo. El nodo de nivel superior del árbol está etiquetado como 'App.js'. Hay tres flechas que apuntan a los módulos 'InspirationGenerator.js', 'FancyText.js' y 'Copyright.js' y las flechas están etiquetadas con 'imports'. Desde el nodo 'InspirationGenerator.js', hay tres flechas que se extienden a tres módulos: 'FancyText.js', 'Color.js' e 'inspirations.js'. Las flechas están etiquetadas con 'imports'.Un gráfico de árbol con siete nodos. Cada nodo está etiquetado con un nombre de módulo. El nodo de nivel superior del árbol está etiquetado como 'App.js'. Hay tres flechas que apuntan a los módulos 'InspirationGenerator.js', 'FancyText.js' y 'Copyright.js' y las flechas están etiquetadas con 'imports'. Desde el nodo 'InspirationGenerator.js', hay tres flechas que se extienden a tres módulos: 'FancyText.js', 'Color.js' e 'inspirations.js'. Las flechas están etiquetadas con 'imports'.

El árbol de dependencias de módulos para la aplicación Inspirations.

El nodo raíz del árbol es el módulo raíz, también conocido como el archivo de entrada. A menudo es el módulo que contiene el componente raíz.

En comparación con el árbol de renderizado de la misma aplicación, hay estructuras similares pero algunas diferencias notables:

  • Los nodos que componen el árbol representan módulos, no componentes.
  • Los módulos que no son componentes, comoinspirations.js, también están representados en este árbol. El árbol de renderizado solo encapsula componentes.
  • Copyright.jsaparece bajoApp.jspero en el árbol de renderizado,Copyright, el componente, aparece como un hijo deInspirationGenerator. Esto se debe a queInspirationGeneratoracepta JSX comoprops children, por lo que renderizaCopyrightcomo un componente hijo pero no importa el módulo.

Los árboles de dependencia son útiles para determinar qué módulos son necesarios para ejecutar tu aplicación React. Al construir una aplicación React para producción, normalmente hay un paso de compilación que agrupará todo el JavaScript necesario para enviarlo al cliente. La herramienta responsable de esto se llamabundler, y los bundlers usarán el árbol de dependencias para determinar qué módulos deben incluirse.

A medida que tu aplicación crece, a menudo el tamaño del bundle también lo hace. Los bundles grandes son costosos para que el cliente los descargue y ejecute. Los bundles grandes pueden retrasar el tiempo para que tu interfaz de usuario se dibuje. Tener una idea del árbol de dependencias de tu aplicación puede ayudar a depurar estos problemas.

Recapitulación

  • Los árboles son una forma común de representar la relación entre entidades. A menudo se usan para modelar la interfaz de usuario.
  • Los árboles de renderizado representan la relación anidada entre componentes React a lo largo de un único renderizado.
  • Con el renderizado condicional, el árbol de renderizado puede cambiar entre diferentes renderizados. Con diferentes valores de props, los componentes pueden renderizar diferentes componentes hijos.
  • Los árboles de renderizado ayudan a identificar cuáles son los componentes de nivel superior y los componentes hoja. Los componentes de nivel superior afectan el rendimiento de renderizado de todos los componentes debajo de ellos y los componentes hoja a menudo se vuelven a renderizar con frecuencia. Identificarlos es útil para comprender y depurar el rendimiento de renderizado.
  • Los árboles de dependencia representan las dependencias de módulos en una aplicación React.
  • Los árboles de dependencia son utilizados por las herramientas de compilación para agrupar el código necesario para enviar una aplicación.
  • Los árboles de dependencia son útiles para depurar tamaños de bundle grandes que ralentizan el tiempo de pintura y exponen oportunidades para optimizar qué código se agrupa.
上一篇Mantener los Componentes Puros下一篇Añadir Interactividad