diff --git a/src/content/blog/2024/02/15/react-labs-what-we-have-been-working-on-february-2024.md b/src/content/blog/2024/02/15/react-labs-what-we-have-been-working-on-february-2024.md
index 864160a616..70b580afad 100644
--- a/src/content/blog/2024/02/15/react-labs-what-we-have-been-working-on-february-2024.md
+++ b/src/content/blog/2024/02/15/react-labs-what-we-have-been-working-on-february-2024.md
@@ -81,7 +81,7 @@ React 服务器组件、资源加载、文档元数据与 Action 都已经加入
 
 - **资源加载**：我们将 Suspense 与样式表、字体和脚本等资源的加载生命周期集成在一起，以便 React 考虑它们来确定像 [`<style>`](/reference/react-dom/components/style)、[`<link>`](/reference/react-dom/components/link) 和 [`<script>`](/reference/react-dom/components/script) 这样的元素中的内容是否已准备就绪。我们还添加了新的 [资源加载 API](/reference/react-dom#resource-preloading-apis)，如 `preload` 和 `preinit`，以提供更大的控制权，指示何时应加载和初始化资源。
 
-- **Action**：如上所述，我们已将 Action 添加到管理从客户端发送数据到服务器的功能中。现在可以将 `action` 添加到像 [`<form/>`](/reference/react-dom/components/form) 这样的元素中，使用 [`useFormStatus`](/reference/react-dom/hooks/useFormStatus) 访问状态，使用 [`useActionState`](/reference/react/useActionState) 处理结果，并使用 [`useOptimistic`](/reference/rsc/useOptimistic) 乐观地更新 UI。
+- **Action**：如上所述，我们已将 Action 添加到管理从客户端发送数据到服务器的功能中。现在可以将 `action` 添加到像 [`<form/>`](/reference/react-dom/components/form) 这样的元素中，使用 [`useFormStatus`](/reference/react-dom/hooks/useFormStatus) 访问状态，使用 [`useActionState`](/reference/react/useActionState) 处理结果，并使用 [`useOptimistic`](/reference/react/useOptimistic) 乐观地更新 UI。
 
 由于所有这些功能是相互配合的，因此单独在稳定渠道中发布它们是困难的。发布 Action 而不带有用于访问表单状态的补充 Hook 会限制 Action 的实际可用性。引入 React 服务器组件而不集成 Server Action 会把在服务器上修改数据变得复杂化。
 
diff --git a/src/content/learn/add-react-to-a-website.md b/src/content/learn/add-react-to-a-website.md
deleted file mode 100644
index 86282d7cc1..0000000000
--- a/src/content/learn/add-react-to-a-website.md
+++ /dev/null
@@ -1,281 +0,0 @@
----
-title: 在网站中添加 React
-translators:
-  - Atrist
-  - yyyang1996
-  - QC-L
----
-
-<Intro>
-
-无需使用 React 重构你的站点。只需花一分钟，将 React 添加到 HTML 中，且无需安装，即可立即开始编写交互式组件。
-
-</Intro>
-
-<YouWillLearn>
-
-* 如何 1 分钟内将 React 添加到 HTML 中
-* JSX 语法是什么及其用法
-* 如何设置可用于生产环境的 JSX 预处理器
-
-</YouWillLearn>
-
-## 1 分钟拥有 React {/*add-react-in-one-minute*/}
-
-React 从一开始就是为渐进式开发而生。大多数网站并没有（也不需要）完全使用 React 进行构建。本小节中，我们将向你展示如何在现有 HTML 页面中添加交互式组件的方法。
-
-你可以在你自己的网站上尝试，或者创建一个 [空的 HTML 文件](https://gist.github.com/gaearon/edf814aeee85062bc9b9830aeaf27b88/archive/3b31c3cdcea7dfcfd38a81905a0052dd8e5f71ec.zip) 来进行练习。只需将电脑连接到网络并安装一款文本编辑器即可，如 Notepad 或者 VSCode。（如需语法高亮，可以通过 [如何配置你的编辑器](/learn/editor-setup/) 章节来实现！)
-
-### 步骤 1：添加一个根标签 {/*step-1-add-a-root-html-tag*/}
-
-首先，打开你需要编辑的 HTML 页面。在你想用 React 展示内容的地方添加一个空的 `<div>` 标签。并给这个 `<div>` 标签一个唯一的 `id` 属性值。例如：
-
-```html {3}
-<!-- ... 其它 HTML ... -->
-
-<div id="like-button-root"></div>
-
-<!-- ... 其它 HTML ... -->
-```
-
-它被称为"根"，因为这是 React 树开始的地方。你可以在 `<body>` 标签中的任何位置放置一个类似的根 HTML 标签。让它为内容留白。因为 React 会用你编写的 React 组件来替换它的内容。
-
-你可以根据需要，在一个页面上设置多个根 HTML 标签。
-
-### 步骤 2：添加 script 标签 {/*step-2-add-the-script-tags*/}
-
-在 HTML 页面的 `</body>` 结束标签之前，添加三个 `<script>` 标签用于加载以下文件：
-
-- [`react.development.js`](https://unpkg.com/react@18/umd/react.development.js) 可以让你定义 React 组件。
-- [`react-dom.development.js`](https://unpkg.com/react-dom@18/umd/react-dom.development.js) 让 React 可以将 HTML 元素渲染到 [DOM](https://developer.mozilla.org/docs/Web/API/Document_Object_Model) 中。
-- **`like-button.js`** 是你在步骤 3 中编写组件的地方！
-
-你的 HTML 文件的结尾处，应该如下所示：
-
-```html
-    <!-- end of the page -->
-    <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
-    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
-    <script src="like-button.js"></script>
-  </body>
-</html>
-```
-
-<Pitfall>
-
-部署时，你需要将 “development.js” 替换为 “production.min.js”！React 的 development 版本中内置了很多有用的错误信息，但同时也会降低你网站的访问速度。
-
-</Pitfall>
-
-### 步骤 3：创建一个 React 组件 {/*step-3-create-a-react-component*/}
-
-在 HTML 页面文件的同级目录下创建一个名为 **`like_button.js`** 的文件，并将如下代码片段添加到该文件中。这段代码定义了一个名为 LikeButton 的 React 组件。（在 [快速入门](/learn) 中，了解更多关于编写组件的信息。)
-
-```js
-'use strict';
-
-function LikeButton() {
-  const [liked, setLiked] = React.useState(false);
-
-  if (liked) {
-    return 'You liked this!';
-  }
-
-  return React.createElement(
-    'button',
-    {
-      onClick: () => setLiked(true),
-    },
-    'Like'
-  );
-}
-```
-
-### 步骤 4：把你的 React 组件添加到页面中 {/*step-4-add-your-react-component-to-the-page*/}
-
-最后，在 **`like_button.js`** 底部添加以下三行代码。这几行代码会找到我们在步骤 1 中添加到 HTML 里的 `<div>`，接着创建了一个React 的根，最后在其内部展示了我们的 React 组件 —— "Like" 按钮：
-
-```js
-const rootNode = document.getElementById('like-button-root');
-const root = ReactDOM.createRoot(rootNode);
-root.render(React.createElement(LikeButton));
-```
-
-**恭喜！你刚刚已成功将第一个 React 组件添加到你的网站当中**！
-
-- [查看完整的示例源码](https://gist.github.com/gaearon/0b535239e7f39c524f9c7dc77c44f09e)
-- [下载完整示例（2KB 压缩包）](https://gist.github.com/gaearon/0b535239e7f39c524f9c7dc77c44f09e/archive/651935b26a48ac68b2de032d874526f2d0896848.zip)
-
-#### 复用你的组件 {/*you-can-reuse-components*/}
-
-你可能需要在同一 HTML 页面中的多个位置展示 React 组件。如果页面中由 React 驱动的部分相互独立，那复用就显得非常必要。你可以通过在你的 HTML 中放置多个根标签，然后用 `ReactDOM.createRoot()` 在每个根标签中渲染 React 组件来实现这一点。例如：
-
-1. 在 **`index.html`** 中，添加另外一个的容器元素 `<div id="another-root"></div>`。
-2. 在 **`like-button.js`** 文件最后，再添加以下三行代码：
-
-```js {6,7,8,9}
-const anotherRootNode = document.getElementById('another-root');
-const anotherRoot = ReactDOM.createRoot(anotherRootNode);
-anotherRoot.render(React.createElement(LikeButton));
-```
-
-如果你需要在很多地方渲染同一个组件，你可以为每个根的指定一个 `class`，而不是 `id`，然后再把它们找出来。这是 [一个显示三个 "Like" 按钮，并向每个按钮内传递了数据的示例](https://gist.github.com/gaearon/779b12e05ffd5f51ffadd50b7ded5bc8)。
-
-### 步骤 5：为生产环境压缩 JavaScript 代码 {/*step-5-minify-javascript-for-production*/}
-
-未经压缩的 JavaScript 可能会极大降低用户的访问速度。在将你的网站部署到生产环境之前，请务必对你的脚本文件进行压缩。
-
-- **如果你不知道如何进行压缩**，[请参考该配置教程](https://gist.github.com/gaearon/ee0201910608f15df3f8cd66aa83f98e)。
-- 如果你已完成了 **对应用代码的压缩**，并且确保已部署的 HTML 加载的是以 `production.min.js` 结尾的 React 版本，那么你的网站就已完成生产部署（production-ready）：
-
-```html
-<script src="https://unpkg.com/react@18/umd/react.production.min.js" crossorigin></script>
-<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js" crossorigin></script>
-```
-
-## 尝试使用 JSX 编写 React {/*try-react-with-jsx*/}
-
-在上面的示例中，依靠的是浏览器原生就支持的特性。这也就是为什么我们在 **`like_button.js`** 中要调用 JavaScript 的函数，用以告知 React 要显示的内容：
-
-```js
-return React.createElement('button', {onClick: () => setLiked(true)}, 'Like');
-```
-
-然而，React 还提供了一种使用 [JSX](/learn/writing-markup-with-jsx) 编写界面的方式，一种类似 HTML 的 JavaScript 语法：
-
-```jsx
-return <button onClick={() => setLiked(true)}>Like</button>;
-```
-
-这两段代码是等价的。JSX 是一种在 JavaScript 中描述标签的语法。多数人觉得这样编写 UI 代码更方便 —— 无论是使用 React 还是其它库。
-
-> 你可以通过 [在线转换器](https://babeljs.io/en/repl#?babili=false&browsers=&build=&builtIns=false&spec=false&loose=false&code_lz=DwIwrgLhD2B2AEcDCAbAlgYwNYF4DeAFAJTw4B88EAFmgM4B0tAphAMoQCGETBe86WJgBMAXJQBOYJvAC-RGWQBQ8FfAAyaQYuAB6cFDhkgA&debug=false&forceAllTransforms=false&shippedProposals=false&circleciRepo=&evaluate=false&fileSize=false&timeTravel=false&sourceType=module&lineWrap=true&presets=es2015%2Creact%2Cstage-2&prettier=false&targets=&version=7.17) 试用 JSX。
-
-### 试用 JSX {/*try-jsx*/}
-
-试用 JSX 的最快方法是将 Babel 编译器作为 `<script>` 标签引入页面中。把它放置在 **`like-button.js`** 之前，然后在 **`like-button.js`** 的 `script` 标签上添加 `type="text/babel"` 属性：
-
-```html {3,4}
-  <script src="https://unpkg.com/react@18/umd/react.production.min.js" crossorigin></script>
-  <script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js" crossorigin></script>
-  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
-  <script src="like-button.js" type="text/babel"></script>
-</body>
-```
-
-现在你可以编辑 **`like-button.js`**，并将
-
-```js
-return React.createElement(
-  'button',
-  {
-    onClick: () => setLiked(true),
-  },
-  'Like'
-);
-```
-
-替换为等效的 JSX 代码：
-
-```jsx
-return (
-  <button onClick={() => setLiked(true)}>
-    Like
-  </button>
-);
-```
-
-一开始，你可能会觉得将 JS 和标签混合在一起会有些奇怪，但后面你会慢慢爱上它的！欲了解更多，请参阅 [用 JSX 编写标签](/learn/writing-markup-with-jsx) 的介绍。这是 [一个使用了 JSX 的 HTML 文件示例](https://raw.githubusercontent.com/reactjs/reactjs.org/main/static/html/single-file-example.html)，你可以下载并尝试使用。
-
-<Pitfall>
-
-引入 Babel 的 `<script>` 编译器对于学习和创建简单的示例是很便捷的。但是，**它会使网站变慢，并不适用于生产环境**。当你准备好更进一步时，应该删除 Babel 的 `<script>` 标签，并移除在这一步中添加的 `type="text/babel"` 属性。作为替代方案，在下一小节中，我们将设置一个 JSX 的预处理器，将所有的 `<script>` 标签从 JSX 转为 JS。
-
-</Pitfall>
-
-### 将 JSX 添加到项目 {/*add-jsx-to-a-project*/}
-
-将 JSX 添加到项目中并不需要诸如 [打包工具](/learn/start-a-new-react-project#custom-toolchains) 或开发服务器那样复杂的工具。本质上，添加 JSX 就像添加 CSS 预处理器一样。
-
-在终端上进入你的项目文件夹，然后执行如下两个命令：(**确保你的计算机安装了 [Node.js](https://nodejs.org/)！**)：
-
-1. `npm init -y` (如果失败，请参阅, [修复方案](https://gist.github.com/gaearon/246f6380610e262f8a648e3e51cad40d))
-2. `npm install @babel/cli@7 babel-preset-react-app@10`
-
-此处使用 npm 只是用于安装 JSX 预处理器，之后便不再需要它。React 和应用程序代码都可以继续使用 `<script>` 标签而不做任何更改。
-
-恭喜！你为你的项目成功添加了 **生产环境（production-ready）的 JSX 配置**。
-
-### 运行 JSX 预处理器 {/*run-the-jsx-preprocessor*/}
-
-你可以对 JSX 文件进行预处理。当你编辑保存带有 JSX 的源文件时，这个转换过程将自动重新执行，并把 JSX 文件转换为一个全新的，浏览器可以识别的普通 JavaScript 文件，以下是设置方式：
-
-1. 创建一个名为 **`src`** 的文件夹
-2. 在终端执行这个命令：`npx babel --watch src --out-dir . --presets babel-preset-react-app/prod ` （无需等待运行结果 —— 这个命令会自动启动一个观察器，观察对 `src` 内 JSX 的编辑。）
-3. 将已经 JSX 化的 **`like-button.js`** ([它看起来应该像这样](https://gist.githubusercontent.com/gaearon/be5ae0fbf563d6c5fe5c1563907b13d2/raw/4c0d0b8c7f4fcb341720424c28c72059f8174c62/like-button.js))！文件移动到新的 **`src`** 目录下。
-
-监听器会创建一个预处理过的 **`like_button.js`** 文件，它包含了适用于浏览器的普通 JavaScript 代码.
-
-<Pitfall>
-
-如果你看到一个错误消息显示为：“You have mistakenly installed the `babel` package”，原因可能是未按照 [上一步骤](#add-jsx-to-a-project) 进行操作。在同一个文件夹中执行上一步骤中的命令，然后重试。
-
-</Pitfall>
-
-我们刚才使用的工具叫 Babel，你可以从 [它的文档](https://babeljs.io/docs/en/babel-cli/) 中了解更多。除了 JSX 以外，它还可以让你使用最新的 JavaScript 语法特性，而无需担心不适配旧的浏览器。
-
-如果你认为你已经习惯了构建工具，并希望它们能为你做更多事，[我们在这描述了一些最流行和易上手的工具链](/learn/start-a-new-react-project)。
-
-<DeepDive>
-
-#### React without JSX {/*react-without-jsx*/}
-
-最初引入 JSX 是为了想让 React 编写组件的感觉就像编写 HTML 一样简单，但总有例外，你不想或者不能使用 JSX，此时可以参考其他两种解决方案：
-
-- 使用像 [htm](https://github.com/developit/htm) 这样的 JSX 替代品，它使用 JavaScript 的 [模板字符串](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Template_literals) 来取代编译器。
-- 使用 [`React.createElement()`](/reference/react/createElement) ，它具有下面解释的特殊结构
-
-用 JSX 编写的代码：
-
-```jsx
-function Hello(props) {
-  return <div>Hello {props.toWhat}</div>;
-}
-
-const root = ReactDOM.createRoot(document.getElementById('root'));
-root.render(<Hello toWhat="World" />, );
-```
-
-如果使用 `React.createElement()`，将会是这样：
-
-```js
-function Hello(props) {
-  return React.createElement('div', null, 'Hello ', props.toWhat);
-}
-
-const root = ReactDOM.createRoot(document.getElementById('root'));
-root.render(
-  React.createElement(Hello, { toWhat: 'World' }, null)
-);
-```
-
-`React.createElement(component, props, ...children)`，它接受三个参数。
-
-以下是它的工作原理：
-
-1. 一个**组件**，它既可以是一个表示 HTML 标签名的字符串，也可以是一个函数组件。
-2. 一个对象，包含 [你想传递给组件的 **props**](/learn/passing-props-to-a-component)。
-3. 其余的参数代表该组件可能拥有多个子元素，比如文本字符串或其他元素。
-
-如果你不想每次都键入 `React.createElement`，通常的做法是使用简写：
-
-```js
-const e = React.createElement;
-
-const root = ReactDOM.createRoot(document.getElementById('root'));
-root.render(e('div', null, 'Hello World'));
-```
-
-然后，如果你喜欢这种风格，如此编写也可以和 JSX 一样方便。
-
-</DeepDive>
diff --git a/src/content/learn/removing-effect-dependencies.md b/src/content/learn/removing-effect-dependencies.md
index 86e0817d04..271476ea53 100644
--- a/src/content/learn/removing-effect-dependencies.md
+++ b/src/content/learn/removing-effect-dependencies.md
@@ -590,7 +590,7 @@ function ChatRoom({ roomId }) {
 
 每当你收到一条消息，`setMessages()` 就会使该组件重新渲染一个新的 `messages` 数组，其中包括收到的消息。然而，由于该 Effect 现在依赖于 `messages`，这 **也将** 重新同步该 Effect。所以每条新消息都会使聊天重新连接。用户不会喜欢这样！
 
-为了解决这个问题，不要在 Effect 里面读取 `messages`。相反，应该将一个 [state 更新函数](/reference/react/useState#updating-state-based-the-previous-state) 传递给 `setMessages`：
+为了解决这个问题，不要在 Effect 里面读取 `messages`。相反，应该将一个 [state 更新函数](/reference/react/useState#updating-state-based-on-the-previous-state) 传递给 `setMessages`：
 
 ```js {7,10}
 function ChatRoom({ roomId }) {
diff --git a/src/content/learn/your-first-component.md b/src/content/learn/your-first-component.md
index cb0758fbc5..5fa297780a 100644
--- a/src/content/learn/your-first-component.md
+++ b/src/content/learn/your-first-component.md
@@ -221,7 +221,7 @@ function Profile() {
 
 像 Next.js 这样的框架会做更多事情。与使用一个空白的 HTML 页面并让 React 使用 JavaScript “接手”管理页面不同，框架还会根据你的 React 组件自动生成 HTML。这使你的应用程序在加载 JavaScript 代码之前能够展示一些内容。
 
-尽管如此，许多网站仅使用 React 来 [添加“交互性”](/learn/add-react-to-a-website)。它们有很多根组件，而不是整个页面的单个组件。你可以根据需要尽可能多或尽可能少地使用 React。
+尽管如此，许多网站仅使用 React 来 [添加“交互性”](/learn/add-react-to-an-existing-project#using-react-for-a-part-of-your-existing-page)。它们有很多根组件，而不是整个页面的单个组件。你可以根据需要尽可能多或尽可能少地使用 React。
 
 </DeepDive>
 
diff --git a/src/content/reference/react-dom/server/renderToReadableStream.md b/src/content/reference/react-dom/server/renderToReadableStream.md
index aad287829a..85d638070c 100644
--- a/src/content/reference/react-dom/server/renderToReadableStream.md
+++ b/src/content/reference/react-dom/server/renderToReadableStream.md
@@ -441,7 +441,7 @@ If an error happens in the `Posts` component or somewhere inside it, React will
 2. 它将 **放弃** 再尝试在服务器上渲染 `Posts`。
 3. 当 JavaScript 代码加载到客户端上时，React **重新尝试** 在客户端上渲染 `Posts`。
 
-如果在客户端上重新尝试渲染 `Posts` **也** 失败，React 将在客户端上抛出错误。与渲染过程中抛出的所有错误一样，[最近的父级错误边界](/reference/reflect/Component#staticgetderivedstatefromwerror) 决定如何向用户展示错误。在实践中，这意味着用户将看到加载指示符，直到确定错误不可恢复为止。
+如果在客户端上重新尝试渲染 `Posts` **也** 失败，React 将在客户端上抛出错误。与渲染过程中抛出的所有错误一样，[最近的父级错误边界](/reference/react/Component#static-getderivedstatefromerror) 决定如何向用户展示错误。在实践中，这意味着用户将看到加载指示符，直到确定错误不可恢复为止。
 
 如果在客户端上重新尝试渲染 `Posts` 成功，则从服务器加载中的后备方案将被客户端渲染的输出所取代。用户不会知道有服务器错误。但是，服务器的 `onError` 回调和客户端的 [`onRecoverableError`](/reference/react-dom/client/hydrateRoot#hydrateroot) 回调将被触发，以便你可以收到有关错误通知。
 
diff --git a/src/content/reference/react-dom/static/prerenderToNodeStream.md b/src/content/reference/react-dom/static/prerenderToNodeStream.md
index cc99c52d4e..15b4473ad0 100644
--- a/src/content/reference/react-dom/static/prerenderToNodeStream.md
+++ b/src/content/reference/react-dom/static/prerenderToNodeStream.md
@@ -4,7 +4,7 @@ title: prerenderToNodeStream
 
 <Intro>
 
-`prerenderToNodeStream` renders a React tree to a static HTML string using a [Node.js Stream.](https://nodejs.org/api/stream.html).
+`prerenderToNodeStream` 使用 [Node.js Stream.](https://nodejs.org/api/stream.html) 将 React 树渲染为静态 HTML 字符串。
 
 ```js
 const {prelude} = await prerenderToNodeStream(reactNode, options?)
@@ -16,17 +16,17 @@ const {prelude} = await prerenderToNodeStream(reactNode, options?)
 
 <Note>
 
-This API is specific to Node.js. Environments with [Web Streams,](https://developer.mozilla.org/en-US/docs/Web/API/Streams_API) like Deno and modern edge runtimes, should use [`prerender`](/reference/react-dom/static/prerender) instead.
+此 API 针对 Node.js。具有 [Web Streams](https://developer.mozilla.org/en-US/docs/Web/API/Streams_API) 的环境（例如 Deno 和现代 edge 运行时）应改用 [`prerender`](/reference/react-dom/static/prerender)。
 
 </Note>
 
 ---
 
-## Reference {/*reference*/}
+## 参考 {/*reference*/}
 
 ### `prerenderToNodeStream(reactNode, options?)` {/*prerender*/}
 
-Call `prerenderToNodeStream` to render your app to static HTML.
+调用 `prerenderToNodeStream` 将应用渲染为静态 HTML。
 
 ```js
 import { prerenderToNodeStream } from 'react-dom/static';
@@ -42,50 +42,50 @@ app.use('/', async (request, response) => {
 });
 ```
 
-On the client, call [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) to make the server-generated HTML interactive.
+在客户端，使用 [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) 将服务器生成的 HTML 变为可交互。
 
-[See more examples below.](#usage)
+[详见下面的更多示例。](#usage)
 
 #### Parameters {/*parameters*/}
 
-* `reactNode`: A React node you want to render to HTML. For example, a JSX node like `<App />`. It is expected to represent the entire document, so the App component should render the `<html>` tag.
+* `reactNode`：要渲染为 HTML 的 React 节点。例如 JSX 节点 `<App />`。它应代表整个文档，因此 `App` 组件应渲染 `<html>` 标签。
 
-* **optional** `options`: An object with static generation options.
-  * **optional** `bootstrapScriptContent`: If specified, this string will be placed in an inline `<script>` tag.
-  * **optional** `bootstrapScripts`: An array of string URLs for the `<script>` tags to emit on the page. Use this to include the `<script>` that calls [`hydrateRoot`.](/reference/react-dom/client/hydrateRoot) Omit it if you don't want to run React on the client at all.
-  * **optional** `bootstrapModules`: Like `bootstrapScripts`, but emits [`<script type="module">`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules) instead.
-  * **optional** `identifierPrefix`: A string prefix React uses for IDs generated by [`useId`.](/reference/react/useId) Useful to avoid conflicts when using multiple roots on the same page. Must be the same prefix as passed to [`hydrateRoot`.](/reference/react-dom/client/hydrateRoot#parameters)
-  * **optional** `namespaceURI`: A string with the root [namespace URI](https://developer.mozilla.org/en-US/docs/Web/API/Document/createElementNS#important_namespace_uris) for the stream. Defaults to regular HTML. Pass `'http://www.w3.org/2000/svg'` for SVG or `'http://www.w3.org/1998/Math/MathML'` for MathML.
-  * **optional** `onError`: A callback that fires whenever there is a server error, whether [recoverable](/reference/react-dom/server/renderToPipeableStream#recovering-from-errors-outside-the-shell) or [not.](/reference/react-dom/server/renderToPipeableStream#recovering-from-errors-inside-the-shell) By default, this only calls `console.error`. If you override it to [log crash reports,](/reference/react-dom/server/renderToPipeableStream#logging-crashes-on-the-server) make sure that you still call `console.error`. You can also use it to [adjust the status code](/reference/react-dom/server/renderToPipeableStream#setting-the-status-code) before the shell is emitted.
-  * **optional** `progressiveChunkSize`: The number of bytes in a chunk. [Read more about the default heuristic.](https://github.com/facebook/react/blob/14c2be8dac2d5482fda8a0906a31d239df8551fc/packages/react-server/src/ReactFizzServer.js#L210-L225)
-  * **optional** `signal`: An [abort signal](https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal) that lets you [abort prerendering](#aborting-prerendering) and render the rest on the client.
+* **可选** `options`：一个用于静态生成的选项对象。
+  * **可选** `bootstrapScriptContent`：若指定，该字符串会放入内联 `<script>` 标签中。
+  * **可选** `bootstrapScripts`：要在页面中输出的 `<script>` 标签 URL 字符串数组。用于包含调用 [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) 的脚本；如果不希望在客户端运行 React，可省略此项。
+  * **可选** `bootstrapModules`：与 `bootstrapScripts` 类似，但输出的是 [`<script type="module">`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules)。
+  * **可选** `identifierPrefix`：React 用于 [`useId`](/reference/react/useId) 生成 ID 的字符串前缀。当页面上存在多个 root 时可避免冲突。此值必须与传给 [`hydrateRoot`](/reference/react-dom/client/hydrateRoot#parameters) 的前缀相同。
+  * **可选** `namespaceURI`：流的根 [namespace URI](https://developer.mozilla.org/zh-CN/docs/Web/API/Document/createElementNS#important_namespace_uris) 字符串。默认是普通 HTML。若为 SVG，请传 `'http://www.w3.org/2000/svg'`；若为 MathML，请传 `'http://www.w3.org/1998/Math/MathML'`。
+  * **可选** `onError`：当服务器发生错误（可恢复或不可恢复）时触发的回调。默认仅会调用 `console.error`。如果你重写它以记录崩溃报告，请确保仍然调用 `console.error`。你也可以在 shell 发出之前使用它来调整响应状态码。
+  * **可选** `progressiveChunkSize`：每个 chunk 的字节数。 [了解默认启发式的更多信息。](https://github.com/facebook/react/blob/14c2be8dac2d5482fda8a0906a31d239df8551fc/packages/react-server/src/ReactFizzServer.js#L210-L225)
+  * **可选** `signal`：一个 [abort signal](https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal)，可以用来 [中止 prerender](#aborting-prerendering)，并在客户端渲染剩余部分。
 
 #### Returns {/*returns*/}
 
-`prerenderToNodeStream` returns a Promise:
-- If rendering the is successful, the Promise will resolve to an object containing:
-  - `prelude`: a [Node.js Stream.](https://nodejs.org/api/stream.html) of HTML. You can use this stream to send a response in chunks, or you can read the entire stream into a string.
-- If rendering fails, the Promise will be rejected. [Use this to output a fallback shell.](/reference/react-dom/server/renderToPipeableStream#recovering-from-errors-inside-the-shell)
+`prerenderToNodeStream` 返回一个 Promise：
+- 如果渲染成功，该 Promise 会解析为一个对象，包含：
+  - `prelude`：用于 HTML 的 [Node.js Stream](https://nodejs.org/api/stream.html)。你可以使用这个流按块（chunk）发送响应，也可以将整个流读取为一个字符串。
+- 如果渲染失败，该 Promise 将被拒绝。请参阅 [使用此方法输出 fallback（占位 UI）外壳](/reference/react-dom/server/renderToPipeableStream#recovering-from-errors-inside-the-shell)，了解如何在出错时提供占位页面。
 
-#### Caveats {/*caveats*/}
+#### 注意事项 {/*caveats*/}
 
-`nonce` is not an available option when prerendering. Nonces must be unique per request and if you use nonces to secure your application with [CSP](https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/CSP) it would be inappropriate and insecure to include the nonce value in the prerender itself.
+在 prerender 时无法使用 `nonce` 选项。`nonce` 必须对每次请求保持唯一；如果你使用 nonce 配合 [CSP](https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/CSP) 来保护应用，那么在 prerender 的输出中包含该 nonce 值是不合适且不安全的。
 
 <Note>
 
-### When should I use `prerenderToNodeStream`? {/*when-to-use-prerender*/}
+### 何时应使用 `prerenderToNodeStream`？ {/*when-to-use-prerender*/}
 
-The static `prerenderToNodeStream` API is used for static server-side generation (SSG). Unlike `renderToString`, `prerenderToNodeStream` waits for all data to load before resolving. This makes it suitable for generating static HTML for a full page, including data that needs to be fetched using Suspense. To stream content as it loads, use a streaming server-side render (SSR) API like [renderToReadableStream](/reference/react-dom/server/renderToReadableStream).
+静态的 `prerenderToNodeStream` API 用于静态服务器端生成（SSG）。与 `renderToString` 不同，`prerenderToNodeStream` 会等待所有数据加载完成后才 resolve，因此适合为整个页面生成包含需通过 Suspense 获取的数据的静态 HTML。若想在内容加载时就开始流式输出，请使用流式 SSR API（例如 [renderToReadableStream](/reference/react-dom/server/renderToReadableStream)）。
 
 </Note>
 
 ---
 
-## Usage {/*usage*/}
+## 用法 {/*usage*/}
 
-### Rendering a React tree to a stream of static HTML {/*rendering-a-react-tree-to-a-stream-of-static-html*/}
+### 将 React 树渲染到静态 HTML 的流中 {/*rendering-a-react-tree-to-a-stream-of-static-html*/}
 
-Call `prerenderToNodeStream` to render your React tree to static HTML into a [Node.js Stream.](https://nodejs.org/api/stream.html):
+调用 `prerenderToNodeStream` 可将 React 树渲染为指向 [Node.js Stream](https://nodejs.org/api/stream.html) 的静态 HTML：
 
 ```js [[1, 5, "<App />"], [2, 6, "['/main.js']"]]
 import { prerenderToNodeStream } from 'react-dom/static';
@@ -101,9 +101,9 @@ app.use('/', async (request, response) => {
 });
 ```
 
-Along with the <CodeStep step={1}>root component</CodeStep>, you need to provide a list of <CodeStep step={2}>bootstrap `<script>` paths</CodeStep>. Your root component should return **the entire document including the root `<html>` tag.**
+除了示例中的 <CodeStep step={1}>根组件</CodeStep>，你还需要提供一组 <CodeStep step={2}>bootstrap `<script>` 路径</CodeStep>。根组件应返回**包含根 `<html>` 标签的整个文档。**
 
-For example, it might look like this:
+例如，它可能像这样：
 
 ```js [[1, 1, "App"]]
 export default function App() {
@@ -123,7 +123,7 @@ export default function App() {
 }
 ```
 
-React will inject the [doctype](https://developer.mozilla.org/en-US/docs/Glossary/Doctype) and your <CodeStep step={2}>bootstrap `<script>` tags</CodeStep> into the resulting HTML stream:
+React 会将 [doctype](https://developer.mozilla.org/en-US/docs/Glossary/Doctype) 与你的 <CodeStep step={2}>bootstrap `<script>` 标签</CodeStep> 注入到生成的 HTML 流中：
 
 ```html [[2, 5, "/main.js"]]
 <!DOCTYPE html>
@@ -133,7 +133,7 @@ React will inject the [doctype](https://developer.mozilla.org/en-US/docs/Glossar
 <script src="/main.js" async=""></script>
 ```
 
-On the client, your bootstrap script should [hydrate the entire `document` with a call to `hydrateRoot`:](/reference/react-dom/client/hydrateRoot#hydrating-an-entire-document)
+在客户端，你的 bootstrap 脚本应通过调用 `hydrateRoot` 来[为整个 `document` 做 hydration：](/reference/react-dom/client/hydrateRoot#hydrating-an-entire-document)
 
 ```js [[1, 4, "<App />"]]
 import { hydrateRoot } from 'react-dom/client';
@@ -142,15 +142,15 @@ import App from './App.js';
 hydrateRoot(document, <App />);
 ```
 
-This will attach event listeners to the static server-generated HTML and make it interactive.
+这会为服务器生成的静态 HTML 附加事件监听器，使其变为可交互。
 
 <DeepDive>
 
-#### Reading CSS and JS asset paths from the build output {/*reading-css-and-js-asset-paths-from-the-build-output*/}
+#### 从构建产物读取 CSS 与 JS 资源路径 {/*reading-css-and-js-asset-paths-from-the-build-output*/}
 
-The final asset URLs (like JavaScript and CSS files) are often hashed after the build. For example, instead of `styles.css` you might end up with `styles.123456.css`. Hashing static asset filenames guarantees that every distinct build of the same asset will have a different filename. This is useful because it lets you safely enable long-term caching for static assets: a file with a certain name would never change content.
+构建后静态资源通常会被哈希，例如 `styles.css` 可能变为 `styles.123456.css`。哈希文件名保证每次构建的同名资源在文件内容变化时文件名也会变化，从而可以安全开启长期缓存。
 
-However, if you don't know the asset URLs until after the build, there's no way for you to put them in the source code. For example, hardcoding `"/styles.css"` into JSX like earlier wouldn't work. To keep them out of your source code, your root component can read the real filenames from a map passed as a prop:
+如果你在构建后才能获取到最终资源名，就无法在源代码中硬编码这些路径。为此，根组件可以通过 prop 接收一个映射表来读取真实文件名：
 
 ```js {1,6}
 export default function App({ assetMap }) {
@@ -166,7 +166,7 @@ export default function App({ assetMap }) {
 }
 ```
 
-On the server, render `<App assetMap={assetMap} />` and pass your `assetMap` with the asset URLs:
+在服务器端，渲染 `<App assetMap={assetMap} />` 并传入 `assetMap`：
 
 ```js {1-5,8,9}
 // You'd need to get this JSON from your build tooling, e.g. read it from the build output.
@@ -185,7 +185,7 @@ app.use('/', async (request, response) => {
 });
 ```
 
-Since your server is now rendering `<App assetMap={assetMap} />`, you need to render it with `assetMap` on the client too to avoid hydration errors. You can serialize and pass `assetMap` to the client like this:
+因为现在服务器端是用 `assetMap` 渲染 `<App assetMap={assetMap} />`，客户端也需要以相同方式渲染以避免 hydration 错误。你可以像下面这样将 `assetMap` 序列化并传给客户端：
 
 ```js {9-10}
 // You'd need to get this JSON from your build tooling.
@@ -206,7 +206,7 @@ app.use('/', async (request, response) => {
 });
 ```
 
-In the example above, the `bootstrapScriptContent` option adds an extra inline `<script>` tag that sets the global `window.assetMap` variable on the client. This lets the client code read the same `assetMap`:
+上例中 `bootstrapScriptContent` 会添加一个内联脚本，在客户端设置全局变量 `window.assetMap`，从而让客户端代码读取相同的 `assetMap`：
 
 ```js {4}
 import { hydrateRoot } from 'react-dom/client';
@@ -215,15 +215,15 @@ import App from './App.js';
 hydrateRoot(document, <App assetMap={window.assetMap} />);
 ```
 
-Both client and server render `App` with the same `assetMap` prop, so there are no hydration errors.
+服务器与客户端均以相同的 `assetMap` 渲染 `App`，因此不会出现 hydration 错误。
 
 </DeepDive>
 
 ---
 
-### Rendering a React tree to a string of static HTML {/*rendering-a-react-tree-to-a-string-of-static-html*/}
+### 将 React 树渲染为静态 HTML 字符串 {/*rendering-a-react-tree-to-a-string-of-static-html*/}
 
-Call `prerenderToNodeStream` to render your app to a static HTML string:
+调用 `prerenderToNodeStream` 将应用渲染为静态 HTML 字符串：
 
 ```js
 import { prerenderToNodeStream } from 'react-dom/static';
@@ -244,13 +244,13 @@ async function renderToString() {
 }
 ```
 
-This will produce the initial non-interactive HTML output of your React components. On the client, you will need to call [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) to *hydrate* that server-generated HTML and make it interactive.
+这会产生组件的初始非交互式 HTML 输出。在客户端，你需要调用 [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) 来 *hydrate* 该服务器生成的 HTML，使其变为可交互。
 
 ---
 
-### Waiting for all data to load {/*waiting-for-all-data-to-load*/}
+### 等待所有数据加载完成 {/*waiting-for-all-data-to-load*/}
 
-`prerenderToNodeStream` waits for all data to load before finishing the static HTML generation and resolving. For example, consider a profile page that shows a cover, a sidebar with friends and photos, and a list of posts:
+`prerenderToNodeStream` 会等待所有数据加载完成后再结束静态 HTML 的生成并 resolve。例如，考虑包含封面、侧边栏（好友与照片）和帖子列表的个人资料页：
 
 ```js
 function ProfilePage() {
@@ -269,29 +269,29 @@ function ProfilePage() {
 }
 ```
 
-Imagine that `<Posts />` needs to load some data, which takes some time. Ideally, you'd want wait for the posts to finish so it's included in the HTML. To do this, you can use Suspense to suspend on the data, and `prerenderToNodeStream` will wait for the suspended content to finish before resolving to the static HTML.
+假设 `<Posts />` 需要加载数据且耗时较长。若你希望在静态 HTML 中包含这些帖子内容，可以使用 Suspense 挂起数据，`prerenderToNodeStream` 会等待挂起内容完成后再将其包含在生成的静态 HTML 内。
 
 <Note>
 
-**Only Suspense-enabled data sources will activate the Suspense component.** They include:
+**只有支持 Suspense 的数据源才会触发 Suspense 组件。** 包括：
 
-- Data fetching with Suspense-enabled frameworks like [Relay](https://relay.dev/docs/guided-tour/rendering/loading-states/) and [Next.js](https://nextjs.org/docs/getting-started/react-essentials)
-- Lazy-loading component code with [`lazy`](/reference/react/lazy)
-- Reading the value of a Promise with [`use`](/reference/react/use)
+- 使用像 [Relay](https://relay.dev/docs/guided-tour/rendering/loading-states/) 和 [Next.js](https://nextjs.org/docs/getting-started/react-essentials) 等支持 Suspense 的框架进行数据获取
+- 使用 [`lazy`](/reference/react/lazy) 做按需加载的组件代码
+- 使用 [`use`](/reference/react/use) 读取 Promise 的值
 
-Suspense **does not** detect when data is fetched inside an Effect or event handler.
+Suspense **不会** 检测在 Effect 或事件处理器中执行的数据请求。
 
-The exact way you would load data in the `Posts` component above depends on your framework. If you use a Suspense-enabled framework, you'll find the details in its data fetching documentation.
+如何在上例的 `Posts` 组件中加载数据取决于你使用的框架。若使用支持 Suspense 的框架，请参阅该框架的数据获取文档。
 
-Suspense-enabled data fetching without the use of an opinionated framework is not yet supported. The requirements for implementing a Suspense-enabled data source are unstable and undocumented. An official API for integrating data sources with Suspense will be released in a future version of React.
+在不使用特定框架的情况下实现支持 Suspense 的数据获取尚不稳定且未文档化。用于与 Suspense 集成的数据源官方 API 将在未来的 React 版本中发布。
 
 </Note>
 
 ---
 
-### Aborting prerendering {/*aborting-prerendering*/}
+### 中止 prerender（aborting-prerendering） {/*aborting-prerendering*/}
 
-You can force the prerender to "give up" after a timeout:
+你可以在超时后强制 prerender “放弃”：
 
 ```js {2-5,11}
 async function renderToString() {
@@ -309,14 +309,14 @@ async function renderToString() {
     //...
 ```
 
-Any Suspense boundaries with incomplete children will be included in the prelude in the fallback state.
+任何仍未完成的 Suspense 边界会以 fallback 状态包含在 prelude 中。
 
 ---
 
 ## Troubleshooting {/*troubleshooting*/}
 
-### My stream doesn't start until the entire app is rendered {/*my-stream-doesnt-start-until-the-entire-app-is-rendered*/}
+### 当整个应用渲染完成之前流没有开始输出怎么办？ {/*my-stream-doesnt-start-until-the-entire-app-is-rendered*/}
 
-The `prerenderToNodeStream` response waits for the entire app to finish rendering, including waiting for all Suspense boundaries to resolve, before resolving. It is designed for static site generation (SSG) ahead of time and does not support streaming more content as it loads.
+`prerenderToNodeStream` 会等待整个应用渲染完成（包括所有 Suspense 边界）后再 resolve。它的设计目的是用于静态站点生成（SSG），不支持在内容加载时逐步流式输出更多内容。
 
-To stream content as it loads, use a streaming server render API like [renderToPipeableStream](/reference/react-dom/server/renderToPipeableStream).
+若想在内容加载过程中就开始流式输出，请使用流式 SSR API，例如 [renderToPipeableStream](/reference/react-dom/server/renderToPipeableStream)。
diff --git a/src/content/reference/react/Component.md b/src/content/reference/react/Component.md
index 04ab56d72d..14aaeb4700 100644
--- a/src/content/reference/react/Component.md
+++ b/src/content/reference/react/Component.md
@@ -761,9 +761,9 @@ class Rectangle extends Component {
 
 #### 注意 {/*unsafe_componentwillmount-caveats*/}
 
-- 如果组件实现了 [`static getDerivedStateFromProps`](#static-getdrivenstatefromprops) 或 [`getSnapshotBeforeUpdate`](#getsnapshotbeforeupdate)，则不会调用 `UNSAFE_componentWillMount`。
+- 如果组件实现了 [`static getDerivedStateFromProps`](#static-getderivedstatefromprops) 或 [`getSnapshotBeforeUpdate`](#getsnapshotbeforeupdate)，则不会调用 `UNSAFE_componentWillMount`。
 
-- 尽管它的名字是这样的，但是如果你的应用程序使用 [`Suspense`](/reference/react/Sus​​pense) 等新式的 React 功能时，`UNSAFE_componentWillMount` 不保证组件 **将** 被挂载。如果渲染尝试被中止（例如，因为某些子组件的代码尚未加载），那么 React 将丢弃正在进行的树，并在下一次尝试期间尝试从头开始构建组件。这就是为什么这种方法是 **不安全** 的。依赖于挂载（例如添加监听事件）的代码应放入 [`componentDidMount`](#componentdidmount)。
+- 尽管它的名字是这样的，但是如果你的应用程序使用 [`Suspense`](/reference/react/Suspense) 等新式的 React 功能时，`UNSAFE_componentWillMount` 不保证组件 **将** 被挂载。如果渲染尝试被中止（例如，因为某些子组件的代码尚未加载），那么 React 将丢弃正在进行的树，并在下一次尝试期间尝试从头开始构建组件。这就是为什么这种方法是 **不安全** 的。依赖于挂载（例如添加监听事件）的代码应放入 [`componentDidMount`](#componentdidmount)。
 
 - `UNSAFE_componentWillMount` 是运行 [服务器渲染](/reference/react-dom/server) 期间运行的唯一生命周期方法。对于所有实际上的用途来说，它与 [`constructor`](#constructor) 相同，因此你应该使用 `constructor` 来代替这种类型的逻辑。
 
@@ -782,7 +782,7 @@ class Rectangle extends Component {
 - 如果你需要 **运行副作用**（例如，获取数据、运行动画或重新初始化监听）来响应 prop 的更改，那么请将该逻辑移至 [`componentDidUpdate`](#componentdidupdate)。
 - 如果你需要 **避免仅 prop 更改时就重新计算某些数据** 时，请使用 [memoization helper](https://legacy.reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html#what-about-memoization) 来代替。
 - 如果你需要 **在 prop 更改时“重置”某些状态** 时，请考虑使组件 [完全控制](https://legacy.reactjs.org/blog/2018/06/07/you-probously-不需要派生状态。html#recommendation-fully-controlled-component) 或者 [使用 key 使组件完全不受控](https://legacy.reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html#recommendation-fully-uncontrolled-component-with-a-key) 来代替。
-- 如果你需要 **在 prop 更改时“调整”某些状态** 时，请检查你是否可以在渲染期间单独从 props 计算所有必要的信息。如果不能，请使用 [`static getDerivedStateFromProps`](/reference/react/Component#static-getdrivenstatefromprops) 代替。
+- 如果你需要 **在 prop 更改时“调整”某些状态** 时，请检查你是否可以在渲染期间单独从 props 计算所有必要的信息。如果不能，请使用 [`static getDerivedStateFromProps`](/reference/react/Component#static-getderivedstatefromprops) 代替。
 
 [查看避免不安全生命周期的示例](https://legacy.reactjs.org/blog/2018/03/27/update-on-async-rendering.html#updating-state-based-on-props)。
 
@@ -799,7 +799,7 @@ class Rectangle extends Component {
 
 - 如果组件实现了 [`static getDerivedStateFromProps`](#static-getdrivenstatefromprops) 或 [`getSnapshotBeforeUpdate`](#getsnapshotbeforeupdate)，则不会调用 `UNSAFE_componentWillReceiveProps`。
 
-- 尽管它的名字是这样的，但如果你的应用程序使用 [`Suspense`](/reference/react/Sus​​pense) 等新式的 React 功能时，`UNSAFE_componentWillReceiveProps` 不保证组件 **将会** 接收这些 Props。如果渲染尝试被中止（例如，因为某些子组件的代码尚未加载），React 将丢弃正在进行的树，并在下一次尝试期间尝试从头开始构建组件。到下一次渲染尝试时，Props 可能会有所不同。这就是为什么这种方法 **不安全**。仅为了提交更新（例如重置监听事件）的代码应放入 [`componentDidUpdate`](#componentdidupdate)。
+- 尽管它的名字是这样的，但如果你的应用程序使用 [`Suspense`](/reference/react/Suspense) 等新式的 React 功能时，`UNSAFE_componentWillReceiveProps` 不保证组件 **将会** 接收这些 Props。如果渲染尝试被中止（例如，因为某些子组件的代码尚未加载），React 将丢弃正在进行的树，并在下一次尝试期间尝试从头开始构建组件。到下一次渲染尝试时，Props 可能会有所不同。这就是为什么这种方法 **不安全**。仅为了提交更新（例如重置监听事件）的代码应放入 [`componentDidUpdate`](#componentdidupdate)。
 
 - `UNSAFE_componentWillReceiveProps` 并不意味着组件收到了与上次 **不同的** props。你需要自己比较 `nextProps` 和 `this.props` 以检查是否发生了变化。
 
@@ -840,7 +840,7 @@ class Rectangle extends Component {
 
 - 不支持在 `componentWillUpdate` 期间调用 [`setState`](#setstate)（或任何导致调用 `setState` 的方法，例如调度 Redux 操作）。
 
-- 尽管它的命名是这样，但如果你的应用程序使用如 [`Suspense`](/reference/react/Sus​​pense) 时等新式的 React 功能时，`UNSAFE_componentWillUpdate` 并不能保证组件 **将会** 更新。如果渲染尝试被中止（例如，因为某些子组件的代码尚未加载），React 将丢弃正在进行的树，并在下一次尝试期间尝试从头开始构建组件。到下一次渲染尝试时，props 和 state 可能会有所不同。这就是为什么这种方法“不安全”。仅针对提交更新（例如重置监听）而运行的代码应放入 [`componentDidUpdate`](#componentdidupdate)。
+- 尽管它的命名是这样，但如果你的应用程序使用如 [`Suspense`](/reference/react/Suspense) 时等新式的 React 功能时，`UNSAFE_componentWillUpdate` 并不能保证组件 **将会** 更新。如果渲染尝试被中止（例如，因为某些子组件的代码尚未加载），React 将丢弃正在进行的树，并在下一次尝试期间尝试从头开始构建组件。到下一次渲染尝试时，props 和 state 可能会有所不同。这就是为什么这种方法“不安全”。仅针对提交更新（例如重置监听）而运行的代码应放入 [`componentDidUpdate`](#componentdidupdate)。
 
 - `UNSAFE_componentWillUpdate` 并不意味着组件收到了与上次不同的 props 或 state。你需要自己将 `nextProps` 与 `this.props` 以及 `nextState` 与 `this.state` 进行比较，以检查是否发生了变化。
 
diff --git a/src/content/reference/react/use.md b/src/content/reference/react/use.md
index e804af6596..3facc6b6c2 100644
--- a/src/content/reference/react/use.md
+++ b/src/content/reference/react/use.md
@@ -312,7 +312,7 @@ export default async function App() {
 }
 ```
 
-但是在 [服务器组件](/reference/rsc/server-component) 中使用 `await` 会在 `await` 执行完成前阻塞渲染。而将 Promise 从服务器组件传递到客户端组件可以防止 Promise 阻塞服务器组件渲染。
+但是在 [服务器组件](/reference/rsc/server-components) 中使用 `await` 会在 `await` 执行完成前阻塞渲染。而将 Promise 从服务器组件传递到客户端组件可以防止 Promise 阻塞服务器组件渲染。
 
 </DeepDive>
 
diff --git a/src/content/reference/react/useRef.md b/src/content/reference/react/useRef.md
index 08b4db0ec1..35074ed78a 100644
--- a/src/content/reference/react/useRef.md
+++ b/src/content/reference/react/useRef.md
@@ -228,7 +228,7 @@ function MyComponent() {
 
 如果不得不在渲染期间读取 [或者写入](/reference/react/useState#storing-information-from-previous-renders)，那么应该 [使用 state](/reference/react/useState) 代替。
 
-当打破这些规则时，组件可能仍然可以工作，但是我们为 React 添加的大多数新功能将依赖于这些预期行为。阅读 [保持组件纯粹](/learn/keeping-components-pure#where-you-_can_-cause-side-effects) 以了解更多信息。
+当打破这些规则时，组件可能仍然可以工作，但是我们为 React 添加的大多数新功能将依赖于这些预期行为。阅读 [保持组件纯粹](/learn/keeping-components-pure#where-you-can-cause-side-effects) 以了解更多信息。
 
 </Pitfall>
 
diff --git a/src/content/reference/rsc/server-actions.md b/src/content/reference/rsc/server-actions.md
deleted file mode 100644
index d6c26b902c..0000000000
--- a/src/content/reference/rsc/server-actions.md
+++ /dev/null
@@ -1,213 +0,0 @@
----
-title: Server Actions
-canary: true
----
-
-<Intro>
-
-Server Actions allow Client Components to call async functions executed on the server.
-
-</Intro>
-
-<InlineToc />
-
-<Note>
-
-#### How do I build support for Server Actions? {/*how-do-i-build-support-for-server-actions*/}
-
-While Server Actions in React 19 are stable and will not break between major versions, the underlying APIs used to implement Server Actions in a React Server Components bundler or framework do not follow semver and may break between minors in React 19.x. 
-
-To support Server Actions as a bundler or framework, we recommend pinning to a specific React version, or using the Canary release. We will continue working with bundlers and frameworks to stabilize the APIs used to implement Server Actions in the future.
-
-</Note>
-
-When a Server Action is defined with the `"use server"` directive, your framework will automatically create a reference to the server function, and pass that reference to the Client Component. When that function is called on the client, React will send a request to the server to execute the function, and return the result.
-
-Server Actions can be created in Server Components and passed as props to Client Components, or they can be imported and used in Client Components.
-
-### Creating a Server Action from a Server Component {/*creating-a-server-action-from-a-server-component*/}
-
-Server Components can define Server Actions with the `"use server"` directive:
-
-```js [[2, 7, "'use server'"], [1, 5, "createNoteAction"], [1, 12, "createNoteAction"]]
-// Server Component
-import Button from './Button';
-
-function EmptyNote () {
-  async function createNoteAction() {
-    // Server Action
-    'use server';
-    
-    await db.notes.create();
-  }
-
-  return <Button onClick={createNoteAction}/>;
-}
-```
-
-When React renders the `EmptyNote` Server Component, it will create a reference to the `createNoteAction` function, and pass that reference to the `Button` Client Component. When the button is clicked, React will send a request to the server to execute the `createNoteAction` function with the reference provided:
-
-```js {5}
-"use client";
-
-export default function Button({onClick}) { 
-  console.log(onClick); 
-  // {$$typeof: Symbol.for("react.server.reference"), $$id: 'createNoteAction'}
-  return <button onClick={() => onClick()}>Create Empty Note</button>
-}
-```
-
-For more, see the docs for [`"use server"`](/reference/rsc/use-server).
-
-
-### Importing Server Actions from Client Components {/*importing-server-actions-from-client-components*/}
-
-Client Components can import Server Actions from files that use the `"use server"` directive:
-
-```js [[1, 3, "createNoteAction"]]
-"use server";
-
-export async function createNoteAction() {
-  await db.notes.create();
-}
-
-```
-
-When the bundler builds the `EmptyNote` Client Component, it will create a reference to the `createNoteAction` function in the bundle. When the `button` is clicked, React will send a request to the server to execute the `createNoteAction` function using the reference provided:
-
-```js [[1, 2, "createNoteAction"], [1, 5, "createNoteAction"], [1, 7, "createNoteAction"]]
-"use client";
-import {createNoteAction} from './actions';
-
-function EmptyNote() {
-  console.log(createNoteAction);
-  // {$$typeof: Symbol.for("react.server.reference"), $$id: 'createNoteAction'}
-  return <button onClick={createNoteAction} />
-}
-```
-
-For more, see the docs for [`"use server"`](/reference/rsc/use-server).
-
-### Composing Server Actions with Actions {/*composing-server-actions-with-actions*/}
-
-Server Actions can be composed with Actions on the client:
-
-```js [[1, 3, "updateName"]]
-"use server";
-
-export async function updateName(name) {
-  if (!name) {
-    return {error: 'Name is required'};
-  }
-  await db.users.updateName(name);
-}
-```
-
-```js [[1, 3, "updateName"], [1, 13, "updateName"], [2, 11, "submitAction"],  [2, 23, "submitAction"]]
-"use client";
-
-import {updateName} from './actions';
-
-function UpdateName() {
-  const [name, setName] = useState('');
-  const [error, setError] = useState(null);
-
-  const [isPending, startTransition] = useTransition();
-
-  const submitAction = async () => {
-    startTransition(async () => {
-      const {error} = await updateName(name);
-      if (!error) {
-        setError(error);
-      } else {
-        setName('');
-      }
-    })
-  }
-  
-  return (
-    <form action={submitAction}>
-      <input type="text" name="name" disabled={isPending}/>
-      {state.error && <span>Failed: {state.error}</span>}
-    </form>
-  )
-}
-```
-
-This allows you to access the `isPending` state of the Server Action by wrapping it in an Action on the client.
-
-For more, see the docs for [Calling a Server Action outside of `<form>`](/reference/rsc/use-server#calling-a-server-action-outside-of-form)
-
-### Form Actions with Server Actions {/*form-actions-with-server-actions*/}
-
-Server Actions work with the new Form features in React 19.
-
-You can pass a Server Action to a Form to automatically submit the form to the server:
-
-
-```js [[1, 3, "updateName"], [1, 7, "updateName"]]
-"use client";
-
-import {updateName} from './actions';
-
-function UpdateName() {
-  return (
-    <form action={updateName}>
-      <input type="text" name="name" />
-    </form>
-  )
-}
-```
-
-When the Form submission succeeds, React will automatically reset the form. You can add `useActionState` to access the pending state, last response, or to support progressive enhancement.
-
-For more, see the docs for [Server Actions in Forms](/reference/rsc/use-server#server-actions-in-forms).
-
-### Server Actions with `useActionState` {/*server-actions-with-use-action-state*/}
-
-You can compose Server Actions with `useActionState` for the common case where you just need access to the action pending state and last returned response:
-
-```js [[1, 3, "updateName"], [1, 6, "updateName"], [2, 6, "submitAction"], [2, 9, "submitAction"]]
-"use client";
-
-import {updateName} from './actions';
-
-function UpdateName() {
-  const [state, submitAction, isPending] = useActionState(updateName, {error: null});
-
-  return (
-    <form action={submitAction}>
-      <input type="text" name="name" disabled={isPending}/>
-      {state.error && <span>Failed: {state.error}</span>}
-    </form>
-  );
-}
-```
-
-When using `useActionState` with Server Actions, React will also automatically replay form submissions entered before hydration finishes. This means users can interact with your app even before the app has hydrated.
-
-For more, see the docs for [`useActionState`](/reference/react/useActionState).
-
-### Progressive enhancement with `useActionState` {/*progressive-enhancement-with-useactionstate*/}
-
-Server Actions also support progressive enhancement with the third argument of `useActionState`.
-
-```js [[1, 3, "updateName"], [1, 6, "updateName"], [2, 6, "/name/update"], [3, 6, "submitAction"], [3, 9, "submitAction"]]
-"use client";
-
-import {updateName} from './actions';
-
-function UpdateName() {
-  const [, submitAction] = useActionState(updateName, null, `/name/update`);
-
-  return (
-    <form action={submitAction}>
-      ...
-    </form>
-  );
-}
-```
-
-When the <CodeStep step={2}>permalink</CodeStep> is provided to `useActionState`, React will redirect to the provided URL if the form is submitted before the JavaScript bundle loads.
-
-For more, see the docs for [`useActionState`](/reference/react/useActionState).
diff --git a/src/content/reference/rsc/server-functions.md b/src/content/reference/rsc/server-functions.md
index 2603c10992..05a388b196 100644
--- a/src/content/reference/rsc/server-functions.md
+++ b/src/content/reference/rsc/server-functions.md
@@ -145,7 +145,7 @@ function UpdateName() {
 
 This allows you to access the `isPending` state of the Server Function by wrapping it in an Action on the client.
 
-For more, see the docs for [Calling a Server Function outside of `<form>`](/reference/rsc/use-server#calling-a-server-function-outside-of-form)
+For more, see the docs for [Calling a Server Function outside of `<form>`](#calling-a-server-function-outside-of-form)
 
 ### Server Functions with Form Actions {/*using-server-functions-with-form-actions*/}
 
@@ -170,7 +170,7 @@ function UpdateName() {
 
 When the Form submission succeeds, React will automatically reset the form. You can add `useActionState` to access the pending state, last response, or to support progressive enhancement.
 
-For more, see the docs for [Server Functions in Forms](/reference/rsc/use-server#server-functions-in-forms).
+For more, see the docs for [Server Functions in Forms](#server-functions-in-forms).
 
 ### Server Functions with `useActionState` {/*server-functions-with-use-action-state*/}
 
