Skip to content

docs: complete Chinese translation for Activity component #1882

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
OpenKakaLucas wants to merge 2 commits into
base: main
Choose a base branch
from
Open

docs: complete Chinese translation for Activity component #1882

OpenKakaLucas wants to merge 2 commits into from

Conversation

@OpenKakaLucas
Copy link

@OpenKakaLucas OpenKakaLucas commented Jan 20, 2026 •
edited
Loading

摘要 (Summary)

完成了 <Activity> 组件文档的完整简体中文翻译。
Completed the full Simplified Chinese translation for the <Activity> component documentation.

改动类型 (Type of Change)

  • 教育/文档内容翻译 (Translation of educational/docs content)

改动内容 (Key Changes)

我已将 <Activity> 组件的所有相关页面翻译完毕，主要包括：

  1. API 参考 (API Reference)：详细翻译了 mode 属性（visible 和 hidden）的行为说明。
  2. 基本用法 (Usage)：翻译了如何使用 <Activity> 来保留离屏组件状态的示例。
  3. 疑难解答 (Troubleshooting)：完成了关于 Effect 清理函数、视频播放状态以及离屏渲染逻辑的深度翻译。

翻译细节说明 (Translation Details)

在翻译过程中，我严格遵循了 React 中文术语表，重点处理了以下核心概念：

  • State Preservation -> 状态保留：强调组件在 mode="hidden" 时，状态会被保留在内存中。
  • Offscreen Rendering -> 离屏渲染：确保描述符合 React 渲染引擎的专业语境。
  • Effect Cleanup -> Effect 清理函数：准确描述了在隐藏模式下，Effect 如何停止运行但状态不丢失。

示例代码核对 (Code Snippet Check)

翻译后的代码注释已同步更新，确保中文开发者能清晰理解逻辑：

// 示例：当 mode 为 "hidden" 时，React 会保留此处的 state
<Activity mode="hidden">
  <MyComponent />
</Activity>

@vercel
Copy link

vercel bot commented Jan 20, 2026 •
edited
Loading

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Review Updated (UTC)
zh-hans-react-dev Ready Ready Preview, Comment Jan 20, 2026 3:21am

Request Review

@github-actions
Copy link

github-actions bot commented Jan 20, 2026 •
edited
Loading

Size changes

Details

📦 Next.js Bundle Analysis for react-dev

This analysis was generated by the Next.js Bundle Analysis action. 🤖

This PR introduced no changes to the JavaScript bundle! 🙌

loveloki
loveloki reviewed Jan 26, 2026
View reviewed changes
src/content/reference/react/Activity.md
通过这种方式，`Activity` 可以被视为一种渲染“后台活动”的机制。与其完全丢弃那些可能再次显示的内容，不如使用 `Activity` 来保持并恢复这些内容的 UI 和内部状态，同时确保隐藏的内容不会产生多余的副作用。

[See more examples below.](#usage)
[请参阅下方的更多示例。](#usage)
Copy link
Collaborator

@loveloki loveloki Jan 26, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

标点移动到链接外面

src/content/reference/react/Activity.md
</Sandpack>

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` 时，我们会卸载侧边栏，这导致其所有的内部状态都丢失了
Copy link
Collaborator

@loveloki loveloki Jan 26, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

中文和英文之间添加空格，阅读起来更好一点。上面的 Overview 也可以考虑去掉引号改为空格

src/content/reference/react/Activity.md
由于 `Activity` 边界使用 `display: none` 来隐藏其子组件，因此这些子组件的 DOM 在隐藏时也会被保留。这使得它们非常适合用于维护 UI 中那些用户可能会再次交互的部分的瞬时状态。

In this example, the Contact tab has a `<textarea>` where the user can enter a message. If you enter some text, change to the Home tab, then change back to the Contact tab, the draft message is lost:
在此示例中，`Contact`组件包含一个 `<textarea>`，用户可以在其中输入消息。如果你输入了一些文本，切换到`Home`组件，然后再切回`Contact`组件，那么草稿消息将会丢失：
Copy link
Collaborator

@loveloki loveloki Jan 26, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

这里也没有添加空格，补充上。

src/content/reference/react/Activity.md
</Sandpack>

This is because we're fully unmounting `Contact` in `App`. When the Contact tab unmounts, the `<textarea>` element's internal DOM state is lost.
这是因为我们在 `App` 组件中完全卸载了 `Contact` 组件。当`Contact`组件被卸载时，`<textarea>` 元素的内部 DOM 状态也就丢失了。
Copy link
Collaborator

@loveloki loveloki Jan 26, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

这里也缺了空格，检查下其他地方是否也有缺失

src/content/reference/react/Activity.md
这是因为我们在 `App` 组件中完全卸载了 `Contact` 组件。当`Contact`组件被卸载时，`<textarea>` 元素的内部 DOM 状态也就丢失了。

If we switch to using an Activity boundary to show and hide the active tab, we can preserve the state of each tab's DOM. Try entering text and switching tabs again, and you'll see the draft message is no longer reset:
如果我们改用 `Activity` 边界来显示和隐藏当前活跃的组件，我们就能保留每个组件的 DOM 状态。试着再次输入文本并切换组件，你会发现草稿消息不再被重置：
Copy link
Collaborator

@loveloki loveloki Jan 26, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

原文是激活的 tab，这里直接翻译为组件不知道是否合适。是不是按照原文明确一下比较好？

src/content/reference/react/Activity.md
到目前为止，我们已经了解了 `Activity` 是如何在隐藏用户交互过的内容的同时，而不丢弃这些内容的瞬时状态（ephemeral state）的。

But Activity boundaries can also be used to _prepare_ content that the user has yet to see for the first time:
不仅如此，`Activity` 边界还可以用来预先准备那些用户尚未初次看到的内容：
Copy link
Collaborator

@loveloki loveloki Jan 26, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

原文的 prepare 的斜体是为了表示强调引起注意的，翻译的时候需要改成加粗来强调。

src/content/reference/react/Activity.md
```

When an Activity boundary is <CodeStep step={1}>hidden</CodeStep> during its initial render, its children won't be visible on the page — but they will _still be rendered_, albeit at a lower priority than the visible content, and without mounting their Effects.
当 `Activity` 边界在初次渲染时处于 <CodeStep step={1}>隐藏</CodeStep> 状态，其子组件虽然不会在页面上显示，但它们仍会被渲染。不过，它们的渲染优先级会低于可见内容，且不会挂载它们的 Effect。
Copy link
Collaborator

@loveloki loveloki Jan 26, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

这里也要保留原文的强调。尽量按照原文的内容来翻译，尤其是强调的地方，一般是需要重点关注的。实在不行再调整

src/content/reference/react/Activity.md
当 `Activity` 边界在初次渲染时处于 <CodeStep step={1}>隐藏</CodeStep> 状态，其子组件虽然不会在页面上显示，但它们仍会被渲染。不过，它们的渲染优先级会低于可见内容，且不会挂载它们的 Effect。

This _pre-rendering_ allows the children to load any code or data they need ahead of time, so that later, when the Activity boundary becomes visible, the children can appear faster with reduced loading times.
这种“预渲染”允许子组件提前加载所需的任何代码或数据。这样一来，当随后 `Activity` 边界变为可见时，子组件就能以更短的加载时间实现更快的呈现。
Copy link
Collaborator

@loveloki loveloki Jan 26, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

这里也是要强调的。检查下其他地方还有没有同样的问题（没有改成加粗）

src/content/reference/react/Activity.md
### 加快页面加载过程中的交互速度 {/*speeding-up-interactions-during-page-load*/}

React includes an under-the-hood performance optimization called Selective Hydration. It works by hydrating your app's initial HTML _in chunks_, enabling some components to become interactive even if other components on the page haven't loaded their code or data yet.
React 包含一项名为“选择性注水”的底层性能优化。它的工作原理是 _分块_ 注水应用的初始 HTML，从而使部分组件即使在页面上其他组件的代码或数据尚未加载完成时，也能先变得可交互。
Copy link
Collaborator

@loveloki loveloki Jan 26, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

中文不用斜体，改成加粗来强调

src/content/reference/react/Activity.md
……但这同时也会改变 UI 表现，因为在初始渲染期间会显示 `Placeholder` 回退内容

Instead, we can use Activity. Since Activity boundaries show and hide their children, they already naturally divide the component tree into independent units. And just like Suspense, this feature allows them to participate in Selective Hydration.
相反，我们可以使用 `Activity`。由于 `Activity` 边界负责显示和隐藏其子组件，它们已经自然地将组件树划分成了彼此独立的单元。而且与 `Suspense` 一样，这一特性使得它们能够参与到“选择性注水（Selective Hydration）”中。
Copy link
Collaborator

@loveloki loveloki Jan 26, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

在第一次翻译的时候给出原文

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@loveloki loveloki loveloki left review comments

At least 1 approving review is required to merge this pull request.

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@OpenKakaLucas @loveloki