diff --git a/src/content/learn/understanding-your-ui-as-a-tree.md b/src/content/learn/understanding-your-ui-as-a-tree.md index d668bb6a1..6d4138d38 100644 --- a/src/content/learn/understanding-your-ui-as-a-tree.md +++ b/src/content/learn/understanding-your-ui-as-a-tree.md @@ -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 рендерит его первым. Каждое ответление в дереве идёт от родительского компонента к дочернему. #### Где же находятся 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). @@ -145,7 +145,7 @@ React создает *дерево рендеринга* и UI-дерево, с Дерево рендеринга представляет собой одиночный рендеринг приложения React. При [условном рендеринге](/learn/conditional-rendering) родительский компонент может рендерить разные дочерние компоненты в зависимости от переданных данных. -Мы можем обновить наше приложение, чтобы оно по условию отоброжало либо вдохновляющую цитату, либо цвет. +Мы можем обновить наше приложение, чтобы оно по условию отображало либо вдохновляющую цитату, либо цвет. @@ -279,7 +279,7 @@ 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. Понимание же дерева зависимостей вашего приложения может помочь в отладке и устранении этих проблем. @@ -287,9 +287,9 @@ export default [ -* Деревья — это распространенный способ показать отношения между сущностями. Они очень частно используются для построения UI. +* Деревья — это распространенный способ показать отношения между сущностями. Они очень часто используются для построения UI. * Деревья рендеринга представляют собой отношения между вложенными компонентами React в рамках одной отрисовки. -* С отрисоквой по условию, дерево рендеринга может меняться при разных запусках. В зависимости от пропсов, компоненты могут отображать разные дочерние компоненты. +* С отрисовкой по условию, дерево рендеринга может меняться при разных запусках. В зависимости от пропсов, компоненты могут отображать разные дочерние компоненты. * Деревья рендеринга помогают определить, что такое компоненты верхнего уровня и конечные компоненты. Компоненты верхнего уровня влияют на производительность отрисовки всех компонентов, находящихся под ними, а конечные компоненты часто перерисовываются повторно. Их выявление поможет вам для понимания и отладки производительности рендеринга. * Дерево зависимостей — это зависимость модулей в приложении React. * Деревья зависимостей пользуются инструментами сборки для объединения необходимого кода для отправки приложения.