diff --git a/src/content/reference/react/Activity.md b/src/content/reference/react/Activity.md index 8b103938e5..b214d5e84f 100644 --- a/src/content/reference/react/Activity.md +++ b/src/content/reference/react/Activity.md @@ -2,24 +2,23 @@ title: version: experimental --- - -**This API is experimental and is not available in a stable version of React yet.** +**Этот API экспериментальный и еще недоступен в стабильной версии React.** -You can try it by upgrading React packages to the most recent experimental version: +Вы можете попробовать его, обновив пакеты React до последней экспериментальной версии: - `react@experimental` - `react-dom@experimental` - `eslint-plugin-react-hooks@experimental` -Experimental versions of React may contain bugs. Don't use them in production. +Экспериментальные версии React могут содержать ошибки. Не используйте их в продакшене. -`` lets you hide and show part of the UI. +`` позволяет скрывать и показывать часть пользовательского интерфейса. ```js @@ -34,11 +33,11 @@ Experimental versions of React may contain bugs. Don't use them in production. --- -## Reference {/*reference*/} +## Справочник {/*reference*/} ### `` {/*activity*/} -Wrap a part of the UI in `` to manage its visibility state: +Оберните часть пользовательского интерфейса в ``, чтобы управлять состоянием её видимости: ```js import {unstable_Activity as Activity} from 'react'; @@ -48,30 +47,30 @@ import {unstable_Activity as Activity} from 'react'; ``` -When "hidden", the `children` of `` are not visible on the page. If a new `` mounts as "hidden" then it pre-renders the content at lower priority without blocking the visible content on the page, but it does not mount by creating Effects. When a "visible" Activity switches to "hidden" it conceptually unmounts by destroying all the Effects, but saves its state. This allows fast switching between "visible" and "hidden" states without recreating the state for a "hidden" Activity. +В режиме "hidden" (`скрытый`) дочерние элементы `` не видны на странице. Если новый `` монтируется в режиме "hidden", то он предварительно рендерит контент с пониженным приоритетом, не блокируя видимый контент на странице, но не монтирует его, создавая эффекты. Когда видимый `` переключается в режим "hidden", он концептуально размонтируется, уничтожая все эффекты, но сохраняет своё состояние. Это позволяет быстро переключаться между состояниями "visible" и "hidden" без повторного создания состояния для скрытого ``. -In the future, "hidden" Activities may automatically destroy state based on resources like memory. +В будущем, скрытые `` могут автоматически уничтожать состояние на основе ресурсов, таких как память. #### Props {/*props*/} -* `children`: The actual UI you intend to render. -* **optional** `mode`: Either "visible" or "hidden". Defaults to "visible". When "hidden", updates to the children are deferred to lower priority. The component will not create Effects until the Activity is switched to "visible". If a "visible" Activity switches to "hidden", the Effects will be destroyed. +* `children`: Фактический UI, который вы хотите отобразить. +* **optional** `mode`: Либо "visible" (`видимый`), либо "hidden" (`скрытый`). По умолчанию "visible". В режиме "hidden" обновления дочерних элементов откладываются до более низкого приоритета. Компонент не будет создавать эффекты до тех пор, пока `` не будет переключен в режим "visible". Если видимый `` переключается в режим "hidden", эффекты будут уничтожены. -#### Caveats {/*caveats*/} +#### Особенности {/*caveats*/} -- While hidden, the `children` of `` are hidden on the page. -- `` will unmount all Effects when switching from "visible" to "hidden" without destroying React or DOM state. This means Effects that are expected to run only once on mount will run again when switching from "hidden" to "visible". Conceptually, "hidden" Activities are unmounted, but they are not destroyed either. We recommend using [``](/reference/react/StrictMode) to catch any unexpected side-effects from this behavior. -- When used with ``, hidden activities that reveal in a transition will activate an "enter" animation. Visible Activities hidden in a transition will activate an "exit" animation. -- Parts of the UI wrapped in `` are not included in the SSR response. -- Parts of the UI wrapped in `` will hydrate at a lower priority than other content. +- В режиме "hidden" дочерние элементы `` скрываются на странице. +- `` размонтирует все эффекты при переключении из режима "visible" в "hidden" без уничтожения состояния React или DOM. Это означает, что эффекты, которые должны запускаться только один раз при монтировании, будут запускаться снова при переключении из режима "hidden" в "visible". Концептуально, скрытые `` размонтируются, но не уничтожаются. Мы рекомендуем использовать [``](/reference/react/StrictMode) для отлова любых неожиданных побочных эффектов такого поведения. +- При использовании с ``, скрытые `` при появлении в переходе активируют анимацию "входа". Видимые ``, скрытые в переходе, активируют анимацию "выхода". +- Части UI, обернутые в ``, не включаются в SSR-ответ. +- Части UI, обернутые в ``, будут гидратироваться с более низким приоритетом, чем другой контент. --- -## Usage {/*usage*/} +## Использование {/*usage*/} -### Pre-render part of the UI {/*pre-render-part-of-the-ui*/} +### Предварительный рендеринг части UI {/*pre-render-part-of-the-ui*/} -You can pre-render part of the UI using ``: +Вы можете предварительно отрендерить часть UI, используя ``: ```js @@ -79,11 +78,11 @@ You can pre-render part of the UI using ``: ``` -When an Activity is rendered with `mode="hidden"`, the `children` are not visible on the page, but are rendered at lower priority than the visible content on the page. +Когда `` рендерится в режиме `mode="hidden"`, дочерние элементы не видны на странице, но рендерятся с более низким приоритетом, чем видимый контент на странице. -When the `mode` later switches to "visible", the pre-rendered children will mount and become visible. This can be used to prepare parts of the UI the user is likely to interact with next to reduce loading times. +Когда `mode` позже переключается на "visible", предварительно отрендеренные дочерние элементы будут смонтированы и станут видимыми. Это можно использовать для подготовки частей UI, с которыми пользователь, вероятно, будет взаимодействовать в дальнейшем, чтобы сократить время загрузки. -In the following example from [`useTransition`](/reference/react/useTransition#preventing-unwanted-loading-indicators), the `PostsTab` component fetches some data using `use`. When you click the “Posts” tab, the `PostsTab` component suspends, causing the button loading state to appear: +В следующем примере из [`useTransition`](/reference/react/useTransition#preventing-unwanted-loading-indicators) компонент `PostsTab` получает данные с помощью `use`. Когда вы нажимаете на вкладку "Posts", компонент `PostsTab` приостанавливается, вызывая появление индикатора загрузки кнопки: @@ -276,9 +275,9 @@ b { display: inline-block; margin-right: 10px; } -In this example, the user needs to wait for the posts to load when clicking on the "Posts" tab. +В этом примере пользователю нужно ждать загрузки постов при нажатии на вкладку "Posts". -We can reduce the delay for the "Posts" tab by pre-rendering the inactive Tabs with a hidden ``: +Мы можем сократить задержку для вкладки "Posts", предварительно отрендерив неактивные вкладки с помощью скрытого ``: @@ -470,10 +469,10 @@ b { display: inline-block; margin-right: 10px; } --- -### Keeping state for part of the UI {/*keeping-state-for-part-of-the-ui*/} +### Сохранение состояния части UI {/*keeping-state-for-part-of-the-ui*/} -You can keep state for parts of the UI by switching `` from "visible" to "hidden": +Вы можете сохранить состояние для частей UI, переключив `` из режима "visible" в "hidden": ```js @@ -481,11 +480,11 @@ You can keep state for parts of the UI by switching `` from "visible" ``` -When an Activity switches from `mode="visible"` to "hidden", the `children` will become hidden on the page, and unmount by destroying all Effects, but will keep their React and DOM state. +Когда `` переключается из `mode="visible"` в "hidden", дочерние элементы становятся невидимыми на странице и размонтируются с уничтожением всех эффектов, но сохраняют своё состояние React и DOM. -When the `mode` later switches to "visible", the saved state will be re-used when mounting the children by creating all the Effects. This can be used to keep state in parts of the UI the user is likely to interact with again to maintain DOM or React state. +Когда `mode` позже переключается на "visible", сохранённое состояние будет повторно использовано при монтировании дочерних элементов с созданием всех эффектов. Это можно использовать для сохранения состояния в частях UI, с которыми пользователь, вероятно, снова будет взаимодействовать, чтобы сохранить состояние DOM или React. -In the following example from [`useTransition`](/reference/react/useTransition#preventing-unwanted-loading-indicators), the `ContactTab` includes a `