Представление вашего пользовательского интерфейса в виде дерева

Ваше React-приложение обретает форму с множеством компонентов, вложенных друг в друга. Как React отслеживает структуру компонентов вашего приложения?

React и многие другие библиотеки пользовательского интерфейса представляют UI в виде дерева. Рассмотрение вашего приложения как дерева полезно для понимания взаимосвязей между компонентами. Это понимание поможет вам в дальнейшем разбираться с такими концепциями, как производительность и управление состоянием.

Ваш пользовательский интерфейс как дерево

Деревья — это модель отношений между элементами. Пользовательский интерфейс часто представляется с помощью древовидных структур. Например, браузеры используют древовидные структуры для моделирования HTML (DOM) и CSS (CSSOM). Мобильные платформы также используют деревья для представления своей иерархии представлений.

React создает дерево пользовательского интерфейса из ваших компонентов. В этом примере дерево UI затем используется для рендеринга в DOM.

Как и браузеры с мобильными платформами, React также использует древовидные структуры для управления и моделирования отношений между компонентами в React-приложении. Эти деревья — полезные инструменты для понимания того, как данные передаются через React-приложение, а также для оптимизации рендеринга и размера приложения.

Дерево рендеринга

Ключевая особенность компонентов — возможность композиции компонентов из других компонентов. Когда мывкладываем компоненты, у нас появляется концепция родительских и дочерних компонентов, где каждый родительский компонент сам может быть дочерним для другого компонента.

Когда мы рендерим React-приложение, мы можем смоделировать эти отношения в виде дерева, известного как дерево рендеринга.

Вот React-приложение, которое отображает вдохновляющие цитаты.

React создаетдерево рендеринга, дерево пользовательского интерфейса, состоящее из отрендеренных компонентов.

Из примера приложения мы можем построить приведенное выше дерево рендеринга.

Дерево состоит из узлов, каждый из которых представляет компонент.App,FancyText,Copyright, и другие — все это узлы в нашем дереве.

Корневым узлом в дереве рендеринга React являетсякорневой компонентприложения. В данном случае корневой компонент — этоApp, и он является первым компонентом, который рендерит React. Каждая стрелка в дереве указывает от родительского компонента к дочернему.

Дерево рендеринга представляет собой один проход рендеринга React-приложения. Приусловном рендерингеродительский компонент может рендерить разных потомков в зависимости от переданных данных.

Мы можем обновить приложение, чтобы оно условно рендерило либо вдохновляющую цитату, либо цвет.

При условном рендеринге в разных рендерах дерево рендеринга может отображать разные компоненты.

В этом примере, в зависимости от того, чем являетсяinspiration.type, мы можем отрендерить<FancyText>или<Color>. Дерево рендеринга может быть разным для каждого прохода рендеринга.

Хотя деревья рендеринга могут различаться между проходами рендеринга, эти деревья, как правило, полезны для определения того, какие компоненты являютсяверхнеуровневыми, а какие —листовымив React-приложении. Верхнеуровневые компоненты — это компоненты, ближайшие к корневому компоненту, они влияют на производительность рендеринга всех компонентов под ними и часто содержат наибольшую сложность. Листовые компоненты находятся внизу дерева, у них нет дочерних компонентов, и они часто перерендериваются.

Определение этих категорий компонентов полезно для понимания потока данных и производительности вашего приложения.

Дерево зависимостей модулей

Другое отношение в React-приложении, которое можно смоделировать деревом, — это зависимости модулей приложения. Когда мыразделяем наши компонентыи логику на отдельные файлы, мы создаёмJS-модули, из которых можем экспортировать компоненты, функции или константы.

Каждый узел в дереве зависимостей модулей — это модуль, а каждая ветвь представляет собой операторimportв этом модуле.

Если взять предыдущее приложение Inspirations, мы можем построить дерево зависимостей модулей, или, сокращённо, дерево зависимостей.

Дерево зависимостей модулей для приложения Inspirations.

Корневой узел дерева — это корневой модуль, также известный как входной файл. Часто это модуль, содержащий корневой компонент.

По сравнению с деревом рендеринга того же приложения, структуры схожи, но есть некоторые заметные различия:

• Узлы, составляющие дерево, представляют модули, а не компоненты.
• Некомпонентные модули, такие какinspirations.js, также представлены в этом дереве. Дерево рендеринга включает только компоненты.
• Copyright.jsпоявляется подApp.js, но в дереве рендеринга компонентCopyrightотображается как дочерний дляInspirationGenerator. Это происходит потому, чтоInspirationGeneratorпринимает JSX в качестведочерних пропсов, поэтому он рендеритCopyrightкак дочерний компонент, но не импортирует модуль.

Деревья зависимостей полезны для определения того, какие модули необходимы для запуска вашего React-приложения. При сборке React-приложения для продакшена обычно есть этап сборки, который объединяет весь необходимый JavaScript для отправки клиенту. Инструмент, отвечающий за это, называетсясборщиком, и сборщики используют дерево зависимостей, чтобы определить, какие модули должны быть включены.

По мере роста вашего приложения часто растёт и размер сборки. Большой размер сборки обходится клиенту дорого с точки зрения загрузки и выполнения. Большой размер сборки может задержать отрисовку пользовательского интерфейса. Понимание дерева зависимостей вашего приложения может помочь в отладке этих проблем.

Резюме

• Деревья — это распространённый способ представления отношений между сущностями. Они часто используются для моделирования пользовательского интерфейса.
• Дерево рендеринга представляет вложенные отношения между React-компонентами в рамках одного рендера.
• При условном рендеринге дерево рендеринга может меняться между разными рендерами. При разных значениях пропсов компоненты могут рендерить разные дочерние компоненты.
• Дерево рендеринга помогает определить, какие компоненты являются верхнеуровневыми и листовыми. Верхнеуровневые компоненты влияют на производительность рендеринга всех компонентов под ними, а листовые компоненты часто перерисовываются наиболее часто. Их идентификация полезна для понимания и отладки производительности рендеринга.
• Дерево зависимостей представляет зависимости модулей в React-приложении.
• Дерево зависимостей используется инструментами сборки для объединения необходимого кода для поставки приложения.
• Дерево зависимостей полезно для отладки больших размеров сборки, которые замедляют время отрисовки, и выявления возможностей для оптимизации того, какой код включается в сборку.