Skip to content

docs(reference/react): translate ViewTransition, Fragment, StrictMode to Chinese#1923

Open
Delta1035 wants to merge 5 commits into
reactjs:mainfrom
Delta1035:translate-viewtransition-fragment-strictmode
Open

docs(reference/react): translate ViewTransition, Fragment, StrictMode to Chinese#1923
Delta1035 wants to merge 5 commits into
reactjs:mainfrom
Delta1035:translate-viewtransition-fragment-strictmode

Conversation

@Delta1035
Copy link
Copy Markdown

变更摘要

  • 完整翻译 ViewTransition API 参考文档(包含全部 7 个 Sandpack 示例)
  • 补全 Fragment 文档(FragmentInstance 方法说明、Fragment ref 交互、可见性跟踪、焦点管理)
  • 补全 StrictMode 文档(ref 回调重新运行、部分应用启用说明)

测试计划

  • 所有 MDX 组件标签(Note、Pitfall、DeepDive、Sandpack 等)保持英文不变
  • React API 名称、CSS 属性保持英文不变
  • 标题锚点 ID 保持英文不变
  • 报错信息(ConsoleBlockMulti 内)保持英文原文
  • 代码中 UI 文本已翻译为中文

@vercel
Copy link
Copy Markdown

vercel Bot commented May 14, 2026

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

Project Deployment Actions Updated (UTC)
zh-hans-react-dev Ready Ready Preview, Comment May 14, 2026 5:17pm

Request Review

@github-actions
Copy link
Copy Markdown

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! 🙌

<Note>

When `StrictMode` is enabled for a part of the app, React will only enable behaviors that are possible in production. For example, if `<StrictMode>` is not enabled at the root of the app, it will not [re-run Effects an extra time](#fixing-bugs-found-by-re-running-effects-in-development) on initial mount, since this would cause child effects to double fire without the parent effects, which cannot happen in production.
`StrictMode` 仅为应用程序的一部分启用时,React 仅会启用在生产环境中可能发生的行为。例如,如果 `<StrictMode>` 未在应用根节点启用,则在初始挂载时它不会[额外重新运行 Effect](#fixing-bugs-found-by-re-running-effects-in-development),因为这会导致子 Effect 在没有父 Effect 的情况下触发两次,而这在生产环境中是不可能发生的。
Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

Suggested change
`StrictMode` 仅为应用程序的一部分启用时,React 仅会启用在生产环境中可能发生的行为。例如,如果 `<StrictMode>` 未在应用根节点启用,则在初始挂载时它不会[额外重新运行 Effect](#fixing-bugs-found-by-re-running-effects-in-development),因为这会导致子 Effect 在没有父 Effect 的情况下触发两次,而这在生产环境中是不可能发生的。
`StrictMode` 仅为应用程序的一部分启用时,React 仅会启用在生产环境中可能发生的行为。例如,如果 `<StrictMode>` 未在应用根节点启用,则在初始挂载时它不会 [额外重新运行 Effect](#fixing-bugs-found-by-re-running-effects-in-development),因为这会导致子 Effect 在没有父 Effect 的情况下触发两次,而这在生产环境中是不可能发生的。

严格模式也可以帮助发现[回调 ref](/learn/manipulating-the-dom-with-refs) 中的错误。

Every callback `ref` has some setup code and may have some cleanup code. Normally, React calls setup when the element is *created* (is added to the DOM) and calls cleanup when the element is *removed* (is removed from the DOM).
每个回调 `ref` 都有一些 setup 代码,以及可能的 cleanup 代码。通常,当元素被*创建*(添加到 DOM)时,React 会调用 setup;当元素被*移除*(从 DOM 中移除)时,React 会调用 cleanup
Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

Suggested change
每个回调 `ref` 都有一些 setup 代码,以及可能的 cleanup 代码。通常,当元素被*创建*(添加到 DOM)时,React 会调用 setup;当元素被*移除*(从 DOM 中移除)时,React 会调用 cleanup。
每个回调 `ref` 都有一些 setup 代码,以及可能的 cleanup 代码。通常,当元素被 **创建**(添加到 DOM)时,React 会调用 setup;当元素被 **移除**(从 DOM 中移除)时,React 会调用 cleanup。

请参考译文规范一并检查其他的类似问题。

当开启严格模式时,React 还会在开发模式下为每个回调 `ref` **额外运行一次 setup+cleanup 循环**。这可能会让人感到惊讶,但它有助于发现手动难以捕捉到的细微错误。

Consider this example, which allows you to select an animal and then scroll to one of them. Notice when you switch from "Cats" to "Dogs", the console logs show that the number of animals in the list keeps growing, and the "Scroll to" buttons stop working:
参考以下示例,它允许你选择一种动物然后滚动到其中之一。注意,当你从 "Cats" 切换到 "Dogs" 时,控制台日志显示列表中的动物数量持续增长,而「滚动到」按钮停止工作:
Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

考虑下面的文本已经翻译为中文,这里的内容是否同步要翻译成中文?



**This is a production bug!** Since the ref callback doesn't remove animals from the list in the cleanup, the list of animals keeps growing. This is a memory leak that can cause performance problems in a real app, and breaks the behavior of the app.
**这是一个生产环境的错误!** 由于 ref 回调没有在清理时从列表中移除动物,动物列表会持续增长。这是一处内存泄漏,会在实际应用中引发性能问题,并破坏应用的行为。
Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

Suggested change
**这是一个生产环境的错误** 由于 ref 回调没有在清理时从列表中移除动物,动物列表会持续增长。这是一处内存泄漏,会在实际应用中引发性能问题,并破坏应用的行为。
**这是一个生产环境的错误**由于 ref 回调没有在清理时从列表中移除动物,动物列表会持续增长。这是一处内存泄漏,会在实际应用中引发性能问题,并破坏应用的行为。

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

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants