Skip to content

Commit

Permalink
Update understanding-your-ui-as-a-tree.md
Browse files Browse the repository at this point in the history
Fix typo from a suggestion
  • Loading branch information
titovmx authored Mar 22, 2024
1 parent 921f8c6 commit 4234a53
Showing 1 changed file with 6 additions and 6 deletions.
12 changes: 6 additions & 6 deletions src/content/learn/understanding-your-ui-as-a-tree.md
Original file line number Diff line number Diff line change
Expand Up @@ -129,13 +129,13 @@ React создает *дерево рендеринга* и UI-дерево, с

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

Корневой узел в дереве рендеринга React является [корневым компонентом](/learn/importing-and-exporting-components#the-root-component-file) приложения. В нашем случае корневой компонент предстовлен `App`, и React рендерит его первым. Каждое ответление в дереве идёт от родительского компонента к дочернему.
Корневой узел в дереве рендеринга React является [корневым компонентом](/learn/importing-and-exporting-components#the-root-component-file) приложения. В нашем случае корневой компонент представлен `App`, и React рендерит его первым. Каждое ответление в дереве идёт от родительского компонента к дочернему.

<DeepDive>

#### Где же находятся HTML-теги в дереве рендеринга? {/*where-are-the-html-elements-in-the-render-tree*/}

Возможно, вы уже заметили, что в приведенном выше дереве рендеринга нет упоминания о HTML-тегах, которые отображает каждый компонент. Это происходит потому, что дерево рендеринга состоит только из [компонентов](learn/your-first-component#components-ui-building-blocks) React.
Возможно, вы уже заметили, что в приведенном выше дереве рендеринга нет упоминания о HTML-тегах, которые отображает каждый компонент. Это происходит, потому что дерево рендеринга состоит только из [компонентов](learn/your-first-component#components-ui-building-blocks) React.

Как UI-фреймворк, React является платформонезависимым. В документации мы демонстрируем примеры рендеринга в web, где в качестве примитивов UI используется разметка HTML. Но приложение React так же может запускаться на мобильных или десктоп платформах, которые используют другие UI-примитивы, такие как: [UIView](https://developer.apple.com/documentation/uikit/uiview) или [FrameworkElement](https://learn.microsoft.com/en-us/dotnet/api/system.windows.frameworkelement?view=windowsdesktop-7.0).

Expand All @@ -145,7 +145,7 @@ React создает *дерево рендеринга* и UI-дерево, с

Дерево рендеринга представляет собой одиночный рендеринг приложения React. При [условном рендеринге](/learn/conditional-rendering) родительский компонент может рендерить разные дочерние компоненты в зависимости от переданных данных.

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

<Sandpack>

Expand Down Expand Up @@ -279,17 +279,17 @@ export default [
* Модули которые не являются компонентами, такие как `inspirations.js`, также представлены в этом дереве. А дерево рендеринга инкапсулирует только компоненты.
* `Copyright.js` появляется под `App.js`. Но в дереве рендеринга `Copyright` отображается как дочерний элемент `InspirationGenerator`. Это связано с тем, что `Inspiration Generator` принимает JSX в качестве [дочерних пропсов](/learn/passing-props-to-a-component#passing-jsx-as-children), поэтому он отображает `Copyright` как дочерний компонент, но он не импортирует его.

Дерево зависимостей помогает определить какие модули необходимы для запуска вашего React приложения. При создании приложения для продакшена есть этап сборки, на котором весь необходимый JavaScript будет отправлен клиенту. На этом этапе [сборщик пакетов](https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview#the_modern_tooling_ecosystem) использует дерево зависимостей для того, чтобы определить какие модули содержит проект.
Дерево зависимостей помогает определить какие модули необходимы для запуска вашего React-приложения. При создании приложения для продакшена есть этап сборки, на котором весь необходимый JavaScript будет отправлен клиенту. На этом этапе [сборщик пакетов](https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview#the_modern_tooling_ecosystem) использует дерево зависимостей для того, чтобы определить какие модули содержит проект.

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

[comment]: <> (perhaps we should also deep dive on conditional imports)

<Recap>

* Деревья — это распространенный способ показать отношения между сущностями. Они очень частно используются для построения UI.
* Деревья — это распространенный способ показать отношения между сущностями. Они очень часто используются для построения UI.
* Деревья рендеринга представляют собой отношения между вложенными компонентами React в рамках одной отрисовки.
* С отрисоквой по условию, дерево рендеринга может меняться при разных запусках. В зависимости от пропсов, компоненты могут отображать разные дочерние компоненты.
* С отрисовкой по условию, дерево рендеринга может меняться при разных запусках. В зависимости от пропсов, компоненты могут отображать разные дочерние компоненты.
* Деревья рендеринга помогают определить, что такое компоненты верхнего уровня и конечные компоненты. Компоненты верхнего уровня влияют на производительность отрисовки всех компонентов, находящихся под ними, а конечные компоненты часто перерисовываются повторно. Их выявление поможет вам для понимания и отладки производительности рендеринга.
* Дерево зависимостей — это зависимость модулей в приложении React.
* Деревья зависимостей пользуются инструментами сборки для объединения необходимого кода для отправки приложения.
Expand Down

0 comments on commit 4234a53

Please sign in to comment.