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

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

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

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

Дерево отрисовки

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

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

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

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>
    </>
  );
}

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

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

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

Дерево отрисовки представляет собой один проход отрисовки приложения React. С помощью условной отрисовки родительский компонент может отрисовать разные дочерние элементы в зависимости от передаваемых данных.

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

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>
    </>
  );
}

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

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

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

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

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

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

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

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

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

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

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

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