diff --git a/src/content/reference/react/Activity.md b/src/content/reference/react/Activity.md index c7d513afc..e5e5b5f0c 100644 --- a/src/content/reference/react/Activity.md +++ b/src/content/reference/react/Activity.md @@ -5,15 +5,15 @@ version: canary -**The `` API is currently only available in React’s Canary and Experimental channels.** +**A API `` está atualmente disponível apenas nos canais Canary e Experimental do React.** -[Learn more about React’s release channels here.](/community/versioning-policy#all-release-channels) +[Saiba mais sobre os canais de lançamento do React aqui.](/community/versioning-policy#all-release-channels) -`` lets you hide and restore the UI and internal state of its children. +`` permite ocultar e restaurar a UI e o estado interno de seus filhos. ```js @@ -27,11 +27,11 @@ version: canary --- -## Reference {/*reference*/} +## Referência {/*reference*/} ### `` {/*activity*/} -You can use Activity to hide part of your application: +Você pode usar Activity para ocultar parte de sua aplicação: ```js [[1, 1, "\\"hidden\\""], [2, 2, ""], [3, 1, "\\"visible\\""]] @@ -39,32 +39,32 @@ You can use Activity to hide part of your application: ``` -When an Activity boundary is hidden, React will visually hide its children using the `display: "none"` CSS property. It will also destroy their Effects, cleaning up any active subscriptions. +Quando um limite de Activity é oculto, o React ocultará visualmente seus filhos usando a propriedade CSS `display: "none"`. Ele também destruirá seus Effects, limpando quaisquer assinaturas ativas. -While hidden, children still re-render in response to new props, albeit at a lower priority than the rest of the content. +Enquanto ocultos, os filhos ainda são renderizados em resposta a novas props, embora com uma prioridade menor do que o restante do conteúdo. -When the boundary becomes visible again, React will reveal the children with their previous state restored, and re-create their Effects. +Quando o limite se torna visível novamente, o React revelará os filhos com seu estado anterior restaurado e recriará seus Effects. -In this way, Activity can be thought of as a mechanism for rendering "background activity". Rather than completely discarding content that's likely to become visible again, you can use Activity to maintain and restore that content's UI and internal state, while ensuring that your hidden content has no unwanted side effects. +Dessa forma, Activity pode ser considerado um mecanismo para renderizar "atividade em segundo plano". Em vez de descartar completamente o conteúdo que provavelmente se tornará visível novamente, você pode usar Activity para manter e restaurar a UI e o estado interno desse conteúdo, garantindo que seu conteúdo oculto não tenha efeitos colaterais indesejados. -[See more examples below.](#usage) +[Veja mais exemplos abaixo.](#usage) #### Props {/*props*/} -* `children`: The UI you intend to show and hide. -* `mode`: A string value of either `'visible'` or `'hidden'`. If omitted, defaults to `'visible'`. +* `children`: A UI que você pretende mostrar e ocultar. +* `mode`: Um valor de string `'visible'` ou `'hidden'`. Se omitido, o padrão é `'visible'`. -#### Caveats {/*caveats*/} +#### Ressalvas {/*caveats*/} -- If an Activity is rendered inside of a [ViewTransition](/reference/react/ViewTransition), and it becomes visible as a result of an update caused by [startTransition](/reference/react/startTransition), it will activate the ViewTransition's `enter` animation. If it becomes hidden, it will activate its `exit` animation. +- Se um Activity for renderizado dentro de uma [ViewTransition](/reference/react/ViewTransition), e se tornar visível como resultado de uma atualização causada por [startTransition](/reference/react/startTransition), ele ativará a animação `enter` da ViewTransition. Se se tornar oculto, ativará sua animação `exit`. --- -## Usage {/*usage*/} +## Uso {/*usage*/} -### Restoring the state of hidden components {/*restoring-the-state-of-hidden-components*/} +### Restaurando o estado de componentes ocultos {/*restoring-the-state-of-hidden-components*/} -In React, when you want to conditionally show or hide a component, you typically mount or unmount it based on that condition: +No React, quando você quer mostrar ou ocultar um componente condicionalmente, você normalmente o monta ou desmonta com base nessa condição: ```jsx {isShowingSidebar && ( @@ -72,9 +72,9 @@ In React, when you want to conditionally show or hide a component, you typically )} ``` -But unmounting a component destroys its internal state, which is not always what you want. +Mas desmontar um componente destrói seu estado interno, o que nem sempre é o desejado. -When you hide a component using an Activity boundary instead, React will "save" its state for later: +Quando você oculta um componente usando um limite de `Activity` em vez disso, o React "salvará" seu estado para mais tarde: ```jsx @@ -82,11 +82,11 @@ When you hide a component using an Activity boundary instead, React will "save" ``` -This makes it possible to hide and then later restore components in the state they were previously in. +Isso possibilita ocultar e, posteriormente, restaurar componentes no estado em que estavam anteriormente. -The following example has a sidebar with an expandable section. You can press "Overview" to reveal the three subitems below it. The main app area also has a button that hides and shows the sidebar. +O exemplo a seguir tem uma barra lateral com uma seção expansível. Você pode pressionar "Overview" para revelar os três subitens abaixo dela. A área principal do aplicativo também tem um botão que oculta e mostra a barra lateral. -Try expanding the Overview section, and then toggling the sidebar closed then open: +Tente expandir a seção Overview e, em seguida, feche e abra a barra lateral: @@ -192,25 +192,25 @@ h1 { -The Overview section always starts out collapsed. Because we unmount the sidebar when `isShowingSidebar` flips to `false`, all its internal state is lost. +A seção Overview sempre começa recolhida. Como desmontamos a barra lateral quando `isShowingSidebar` muda para `false`, todo o seu estado interno é perdido. -This is a perfect use case for Activity. We can preserve the internal state of our sidebar, even when visually hiding it. +Este é um caso de uso perfeito para `Activity`. Podemos preservar o estado interno de nossa barra lateral, mesmo ao ocultá-la visualmente. -Let's replace the conditional rendering of our sidebar with an Activity boundary: +Vamos substituir a renderização condicional de nossa barra lateral por um limite de `Activity`: ```jsx {7,9} -// Before +// Antes {isShowingSidebar && ( )} -// After +// Depois ``` -and check out the new behavior: +e conferir o novo comportamento: @@ -316,15 +316,15 @@ h1 { -Our sidebar's internal state is now restored, without any changes to its implementation. +O estado interno da nossa barra lateral agora é restaurado, sem nenhuma alteração em sua implementação. --- -### Restoring the DOM of hidden components {/*restoring-the-dom-of-hidden-components*/} +### Restaurando o DOM de componentes ocultos {/*restoring-the-dom-of-hidden-components*/} -Since Activity boundaries hide their children using `display: none`, their children's DOM is also preserved when hidden. This makes them great for maintaining ephemeral state in parts of the UI that the user is likely to interact with again. +Como os limites de `Activity` ocultam seus filhos usando `display: none`, o DOM de seus filhos também é preservado quando oculto. Isso os torna ótimos para manter o estado efêmero em partes da UI com as quais o usuário provavelmente interagirá novamente. -In this example, the Contact tab has a `