You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: src/content/learn/understanding-your-ui-as-a-tree.md
+6-6Lines changed: 6 additions & 6 deletions
Original file line number
Diff line number
Diff line change
@@ -129,13 +129,13 @@ React создает *дерево рендеринга* и UI-дерево, с
129
129
130
130
Дерево состоит из узлов, каждый из них представляет компонент. `App`, `FancyText`, `Copyright` и многие другие — это узлы нашего дерева.
131
131
132
-
Корневой узел в дереве рендеринга React является [корневым компонентом](/learn/importing-and-exporting-components#the-root-component-file) приложения. В нашем случае корневой компонент предстовлен`App`, и React рендерит его первым. Каждое ответление в дереве идёт от родительского компонента к дочернему.
132
+
Корневой узел в дереве рендеринга React является [корневым компонентом](/learn/importing-and-exporting-components#the-root-component-file) приложения. В нашем случае корневой компонент представлен`App`, и React рендерит его первым. Каждое ответление в дереве идёт от родительского компонента к дочернему.
133
133
134
134
<DeepDive>
135
135
136
136
#### Где же находятся HTML-теги в дереве рендеринга? {/*where-are-the-html-elements-in-the-render-tree*/}
137
137
138
-
Возможно, вы уже заметили, что в приведенном выше дереве рендеринга нет упоминания о HTML-тегах, которые отображает каждый компонент. Это происходит потому, что дерево рендеринга состоит только из [компонентов](learn/your-first-component#components-ui-building-blocks) React.
138
+
Возможно, вы уже заметили, что в приведенном выше дереве рендеринга нет упоминания о HTML-тегах, которые отображает каждый компонент. Это происходит, потому что дерево рендеринга состоит только из [компонентов](learn/your-first-component#components-ui-building-blocks) React.
139
139
140
140
Как 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).
141
141
@@ -145,7 +145,7 @@ React создает *дерево рендеринга* и UI-дерево, с
145
145
146
146
Дерево рендеринга представляет собой одиночный рендеринг приложения React. При [условном рендеринге](/learn/conditional-rendering) родительский компонент может рендерить разные дочерние компоненты в зависимости от переданных данных.
147
147
148
-
Мы можем обновить наше приложение, чтобы оно по условию отоброжало либо вдохновляющую цитату, либо цвет.
148
+
Мы можем обновить наше приложение, чтобы оно по условию отображало либо вдохновляющую цитату, либо цвет.
149
149
150
150
<Sandpack>
151
151
@@ -279,17 +279,17 @@ export default [
279
279
* Модули которые не являются компонентами, такие как `inspirations.js`, также представлены в этом дереве. А дерево рендеринга инкапсулирует только компоненты.
280
280
*`Copyright.js` появляется под `App.js`. Но в дереве рендеринга `Copyright` отображается как дочерний элемент `InspirationGenerator`. Это связано с тем, что `Inspiration Generator` принимает JSX в качестве [дочерних пропсов](/learn/passing-props-to-a-component#passing-jsx-as-children), поэтому он отображает `Copyright` как дочерний компонент, но он не импортирует его.
281
281
282
-
Дерево зависимостей помогает определить какие модули необходимы для запуска вашего Reactприложения. При создании приложения для продакшена есть этап сборки, на котором весь необходимый JavaScript будет отправлен клиенту. На этом этапе [сборщик пакетов](https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview#the_modern_tooling_ecosystem) использует дерево зависимостей для того, чтобы определить какие модули содержит проект.
282
+
Дерево зависимостей помогает определить какие модули необходимы для запуска вашего React-приложения. При создании приложения для продакшена есть этап сборки, на котором весь необходимый JavaScript будет отправлен клиенту. На этом этапе [сборщик пакетов](https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview#the_modern_tooling_ecosystem) использует дерево зависимостей для того, чтобы определить какие модули содержит проект.
283
283
284
284
По мере роста вашего приложения часто увеличивается и размер сборщика. При больших размерах требуется больше затрат для загрузки и запуска клиента, а так же это может задерживать прорисовку вашего UI. Понимание же дерева зависимостей вашего приложения может помочь в отладке и устранении этих проблем.
285
285
286
286
[comment]: <>(perhaps we should also deep dive on conditional imports)
287
287
288
288
<Recap>
289
289
290
-
* Деревья — это распространенный способ показать отношения между сущностями. Они очень частно используются для построения UI.
290
+
* Деревья — это распространенный способ показать отношения между сущностями. Они очень часто используются для построения UI.
291
291
* Деревья рендеринга представляют собой отношения между вложенными компонентами React в рамках одной отрисовки.
292
-
* С отрисоквой по условию, дерево рендеринга может меняться при разных запусках. В зависимости от пропсов, компоненты могут отображать разные дочерние компоненты.
292
+
* С отрисовкой по условию, дерево рендеринга может меняться при разных запусках. В зависимости от пропсов, компоненты могут отображать разные дочерние компоненты.
293
293
* Деревья рендеринга помогают определить, что такое компоненты верхнего уровня и конечные компоненты. Компоненты верхнего уровня влияют на производительность отрисовки всех компонентов, находящихся под ними, а конечные компоненты часто перерисовываются повторно. Их выявление поможет вам для понимания и отладки производительности рендеринга.
294
294
* Дерево зависимостей — это зависимость модулей в приложении React.
295
295
* Деревья зависимостей пользуются инструментами сборки для объединения необходимого кода для отправки приложения.
0 commit comments