Skip to content

Commit 4234a53

Browse files
authored
Update understanding-your-ui-as-a-tree.md
Fix typo from a suggestion
1 parent 921f8c6 commit 4234a53

File tree

1 file changed

+6
-6
lines changed

1 file changed

+6
-6
lines changed

src/content/learn/understanding-your-ui-as-a-tree.md

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -129,13 +129,13 @@ React создает *дерево рендеринга* и UI-дерево, с
129129

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

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 рендерит его первым. Каждое ответление в дереве идёт от родительского компонента к дочернему.
133133

134134
<DeepDive>
135135

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

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

140140
Как 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).
141141

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

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

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

150150
<Sandpack>
151151

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

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) использует дерево зависимостей для того, чтобы определить какие модули содержит проект.
283283

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

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

288288
<Recap>
289289

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

0 commit comments

Comments
 (0)