From 91b890ff17b1ad2f86bcd83461b484c20a0f4aa5 Mon Sep 17 00:00:00 2001 From: zhongwj Date: Tue, 20 Jan 2026 11:10:34 +0800 Subject: [PATCH] git commit -m "docs(zh-hans): translate Activity API reference" --- src/content/reference/react/Activity.md | 176 ++++++++++++------------ 1 file changed, 88 insertions(+), 88 deletions(-) diff --git a/src/content/reference/react/Activity.md b/src/content/reference/react/Activity.md index b53064c2b9..0082091f7f 100644 --- a/src/content/reference/react/Activity.md +++ b/src/content/reference/react/Activity.md @@ -4,7 +4,7 @@ title: -`` lets you hide and restore the UI and internal state of its children. +`` 允许你隐藏并恢复其子组件的 UI 以及内部状态。 ```js @@ -18,11 +18,11 @@ title: --- -## Reference {/*reference*/} +## 参考 {/*reference*/} ### `` {/*activity*/} -You can use Activity to hide part of your application: +你可以使用 Activity 来隐藏应用中的部分内容 ```js [[1, 1, "\\"hidden\\""], [2, 2, ""], [3, 1, "\\"visible\\""]] @@ -30,33 +30,33 @@ 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. +当 Activity 边界被 隐藏 时，React 会使用 CSS 属性 `display: "none"` 从视觉上隐藏 其子组件。同时，React 还会销毁它们的 Effect，并清理所有活跃的订阅。 -While hidden, children still re-render in response to new props, albeit at a lower priority than the rest of the content. +在隐藏期间，子组件仍会响应新 Props 的变化而进行重新渲染，但其优先级会低于页面上的其他内容。 -When the boundary becomes visible again, React will reveal the children with their previous state restored, and re-create their Effects. +当边界再次变为 可见 时，React 会将子组件重新显示，并恢复它们之前的状态，同时重新创建它们的 Effect。 -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. +通过这种方式，`Activity` 可以被视为一种渲染“后台活动”的机制。与其完全丢弃那些可能再次显示的内容，不如使用 `Activity` 来保持并恢复这些内容的 UI 和内部状态，同时确保隐藏的内容不会产生多余的副作用。 -[See more examples below.](#usage) +[请参阅下方的更多示例。](#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`： 你想要显示或隐藏的 UI。 +* `mode`： 字符串值，取值为 `'visible'` 或 `'hidden'`。如果省略，默认值为 `'visible'`。 #### Caveats {/*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. -- An Activity that just renders text will not render anything rather than rendering hidden text, because there’s no corresponding DOM element to apply visibility changes to. For example, `` will not produce any output in the DOM for `const ComponentThatJustReturnsText = () => "Hello, World!"`. +- 如果 Activity 被渲染在 [ViewTransition](/reference/react/ViewTransition) 内部，并且由于 [startTransition](/reference/react/startTransition) 触发的更新而变为可见，它将触发 ViewTransition 的 `enter` 动画。如果它变为隐藏，则会触发其 `exit` 动画。 +- 仅渲染文本的 `Activity` 不会渲染出任何内容，而不是渲染出“隐藏的文本”，因为没有相应的 DOM 元素可以应用可见性变化。例如，对于 `const ComponentThatJustReturnsText = () => "Hello, World!"`，执行 `` 在 DOM 中不会产生任何输出。 --- -## Usage {/*usage*/} +## 用法 {/*usage*/} -### Restoring the state of hidden components {/*restoring-the-state-of-hidden-components*/} +### 恢复隐藏组件的状态 {/*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: +在 React 中，当你想要根据某个条件来显示或隐藏一个组件时，通常会基于该条件对其进行挂载或卸载： ```jsx {isShowingSidebar && ( @@ -64,9 +64,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. +但卸载一个组件会销毁其内部状态，而这并不总是你想要的效果。 -When you hide a component using an Activity boundary instead, React will "save" its state for later: +相比之下，当你使用 `Activity` 边界来隐藏组件时，React 会将其状态“保存”起来以便后续使用： ```jsx @@ -74,11 +74,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. +这使得隐藏组件并随后将其恢复到之前的状态成为可能。 -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. +下方的示例包含一个带有可展开部分的侧边栏。你可以点击“Overview”来展开下方的三个子项。应用主区域还有一个可以隐藏或显示侧边栏的按钮。 -Try expanding the Overview section, and then toggling the sidebar closed then open: +试着展开“Overview”部分，然后将侧边栏切换为关闭，再重新打开： @@ -167,11 +167,11 @@ h1 { -The Overview section always starts out collapsed. Because we unmount the sidebar when `isShowingSidebar` flips to `false`, all its internal state is lost. +Overview部分最初总是处于折叠状态。因为当 `isShowingSidebar` 切换为 `false` 时，我们会卸载侧边栏，这导致其所有的内部状态都丢失了 -This is a perfect use case for Activity. We can preserve the internal state of our sidebar, even when visually hiding it. +这是 `Activity` 的一个完美用例。即使在视觉上隐藏侧边栏时，我们也可以保留其内部状态。 -Let's replace the conditional rendering of our sidebar with an Activity boundary: +让我们用 `Activity` 边界来替换侧边栏的条件渲染： ```jsx {7,9} // Before @@ -185,7 +185,7 @@ Let's replace the conditional rendering of our sidebar with an Activity boundary ``` -and check out the new behavior: +然后看看新的行为表现： @@ -275,15 +275,15 @@ h1 { -Our sidebar's internal state is now restored, without any changes to its implementation. +现在，侧边栏的内部状态可以被成功恢复，且无需对其实现逻辑做任何修改。 --- -### Restoring the DOM of hidden components {/*restoring-the-dom-of-hidden-components*/} +### 恢复隐藏组件的 DOM {/*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. +由于 `Activity` 边界使用 `display: none` 来隐藏其子组件，因此这些子组件的 DOM 在隐藏时也会被保留。这使得它们非常适合用于维护 UI 中那些用户可能会再次交互的部分的瞬时状态。 -In this example, the Contact tab has a `