)"
* `suppressContentEditableWarning`:布尔值。如果为 `true` 将会抑制 React 对同时具有 `child` 和 `contentEditable={true}` 属性的元素发出的警告(这两者通常不能同时使用)。如果你正在构建一个手动管理 `contentEditable` 内容的文本输入库,请使用此选项。
-* `suppressHydrationWarning`:布尔值。如果你使用 [服务器渲染](/reference/react-dom/server),通常会在服务器和客户端渲染不同内容时发出警告。在一些罕见的情况下(比如时间戳),很难或者不可能保证完全匹配。如果你设置 `suppressHydrationWarning` 为 `true`,React 不会在元素属性和内容不匹配时发出警告。它只能在同级工作,并被作为脱围机制。[阅读有关抑制 hydrate 错误的内容](/reference/react-dom/client/hydrateRoot#suppressing-unavoidable-hydration-mismatch-errors)。
+* `suppressHydrationWarning`:布尔值。如果你使用 [服务器渲染](/reference/react-dom/server),通常会在服务器和客户端渲染不同内容时发出警告。在一些罕见的情况下(比如时间戳),很难或者不可能保证完全匹配。如果你设置 `suppressHydrationWarning` 为 `true`,React 不会在元素属性和内容不匹配时发出警告。它只能在同级工作,并被作为脱围机制。[阅读有关抑制激活错误的内容](/reference/react-dom/client/hydrateRoot#suppressing-unavoidable-hydration-mismatch-errors)。
* `style`:CSS 样式对象,如 `{ fontWeight:'bold',margin:20 }`。与 DOM [`style`](https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLElement/style) 属性类似,CSS 属性应该使用像 `camelCase` 这样的驼峰命名法,如应该使用 `fontWeight` 而不是 `font-weight`。你可以将字符串或数字作为值传递,类似 `width: 100`,React 会自动将值附加为 `px`(“像素”),除非它是一个 [无单位的属性](https://github.com/facebook/react/blob/81d4ee9ca5c405dce62f64e61506b8e155f38d8d/packages/react-dom-bindings/src/shared/CSSProperty.js#L8-L57)。我们建议仅在动态样式中使用 `style`,即事先不知道样式值。在其他情况下,使用普通的 CSS 类和 `className` 更有效。[了解有关 `className` 和 `style` 的更多信息](#applying-css-styles)。
diff --git a/src/content/reference/react-dom/hydrate.md b/src/content/reference/react-dom/hydrate.md
index 003513f729..e47add11fc 100644
--- a/src/content/reference/react-dom/hydrate.md
+++ b/src/content/reference/react-dom/hydrate.md
@@ -46,7 +46,7 @@ React 将会附加到 `domNode` 内部现有的 HTML,并接管有关的 DOM
* `domNode`:在服务器中被渲染为根节点的 [DOM 元素](https://developer.mozilla.org/zh-CN/docs/Web/API/Element)。
-* **可选属性** `callback`:一个函数。如果传递了该参数,React 将会在组件 hydrate 后调用它。
+* **可选属性** `callback`:一个函数。如果传递了该参数,React 将会在组件激活后调用它。
#### 返回值 {/*returns*/}
@@ -54,7 +54,7 @@ React 将会附加到 `domNode` 内部现有的 HTML,并接管有关的 DOM
#### 注意 {/*caveats*/}
* `hydrate` 要求渲染的内容与服务器渲染的内容完全相同。尽管 React 可以修复文本内容的差异,但你应该首先将不匹配视为错误并进行修复。
-* 在开发模式下,React 会在 hydration 期间警告不匹配的错误。如果存在不匹配情况,无法保证属性的差异会被修补。在大多数应用程序中不匹配是很少见的,所以验证所有标记的代价将会很高。因此考虑到性能原因,这是很重要的。
+* 在开发模式下,React 会在激活期间警告不匹配的错误。如果存在不匹配情况,无法保证属性的差异会被修补。在大多数应用程序中不匹配是很少见的,所以验证所有标记的代价将会很高。因此考虑到性能原因,这是很重要的。
* 你的应用程序中可能只有一个 `hydrate` 调用。如果你使用了框架,它可能会为你执行此调用。
* 如果你的应用程序是客户端渲染的,并且没有已经渲染的 HTML,则不支持使用 `hydrate()`。请改用 [render()](/reference/react-dom/render)(适用于 React 17 及以下版本)或 [createRoot()](/reference/react-dom/client/createRoot)(适用于 React 18 及以上版本)。
@@ -72,9 +72,9 @@ hydrate(
, document.getElementById('root'));
不支持使用 `hydrate()` 渲染仅用于客户端的应用程序(没有服务器渲染的 HTML)。请改用 [`render()`](/reference/react-dom/render)(适用于 React 17 及以下版本)或 [`createRoot()`](/reference/react-dom/client/createRoot)(适用于 React 18 及以上版本)。
-### hydrate 服务器渲染的 HTML {/*hydrating-server-rendered-html*/}
+### 激活服务器渲染的 HTML {/*hydrating-server-rendered-html*/}
-在 React 中,hydrate 是指将 React “附加(attach)”到在服务器环境中已由 React 渲染的现有 HTML 上。在 hydrate 期间,React 将尝试将事件监听器附加(attach)到现有标记,并在客户端上接管渲染应用程序。
+在 React 中,激活(hydrate)是指将 React “附加(attach)”到在服务器环境中已由 React 渲染的现有 HTML 上。在激活期间,React 将尝试将事件监听器附加(attach)到现有标记,并在客户端上接管渲染应用程序。
在完全使用 React 构建的应用程序中,**通常只会在第一次启动整个应用程序时,hydrate “根”节点**。
@@ -106,15 +106,15 @@ export default function App() {
通常情况下,你不需要再次调用 `hydrate`,也不需要在更多地方调用它。从此时开始,React 将会管理你的应用程序的 DOM。为了更新 UI,你的组件将会 [使用 state](/reference/react/useState)。
-有关 hydrate 的更多信息,请参阅 [`hydrateRoot`](/reference/react-dom/client/hydrateRoot)。
+有关激活的更多信息,请参阅 [`hydrateRoot`](/reference/react-dom/client/hydrateRoot)。
---
-### 抑制不可避免的 hydrate 不匹配错误 {/*suppressing-unavoidable-hydration-mismatch-errors*/}
+### 抑制不可避免的激活内容不匹配错误 {/*suppressing-unavoidable-hydration-mismatch-errors*/}
-如果服务器和客户端之间某个元素的属性或文本内容无法避免不同(比如一个时间戳),你可以禁止 hydrate 警告。
+如果服务器和客户端之间某个元素的属性或文本内容无法避免不同(比如一个时间戳),你可以禁止激活警告。
-使用 `suppressHydrationWarning={true}` 禁止 hydrate 警告:
+使用 `suppressHydrationWarning={true}` 禁止激活警告:
@@ -192,10 +192,10 @@ export default function App() {
-这样,初始渲染过程将呈现与服务器相同的内容,并且避免不匹配的情况,但会在 hydrate 后立即同步并进行额外的渲染。
+这样,初始渲染过程将呈现与服务器相同的内容,并且避免不匹配的情况,但会在激活后立即同步并进行额外的渲染。
-这种方法会使 hydrate 变慢,因为你的组件必须渲染两次,因此要注意在网络不好情况下的用户体验。JavaScript 代码的加载可能比初始 HTML 渲染要晚许多,因此在 hydrate 后立即渲染不同的 UI 可能会让用户感到不适。
+这种方法会使激活变慢,因为你的组件必须渲染两次,因此要注意在网络不好情况下的用户体验。JavaScript 代码的加载可能比初始 HTML 渲染要晚许多,因此在激活后立即渲染不同的 UI 可能会让用户感到不适。
diff --git a/src/content/reference/react-dom/server/renderToNodeStream.md b/src/content/reference/react-dom/server/renderToNodeStream.md
index c4409ad0f8..668676b7c3 100644
--- a/src/content/reference/react-dom/server/renderToNodeStream.md
+++ b/src/content/reference/react-dom/server/renderToNodeStream.md
@@ -76,4 +76,4 @@ app.use('/', (request, response) => {
});
```
-这里的流会将 React 组件初始输出为非交互式 HTML。在客户端上,你需要调用 [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) 方法来 hydrate 服务器生成的 HTML 并使其具有交互功能。
+这里的流会将 React 组件初始输出为非交互式 HTML。在客户端上,你需要调用 [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) 方法来激活服务器生成的 HTML 并使其具有交互功能。
diff --git a/src/content/reference/react-dom/server/renderToPipeableStream.md b/src/content/reference/react-dom/server/renderToPipeableStream.md
index 513a4240c9..a40c0892e3 100644
--- a/src/content/reference/react-dom/server/renderToPipeableStream.md
+++ b/src/content/reference/react-dom/server/renderToPipeableStream.md
@@ -178,7 +178,7 @@ app.use('/', (request, response) => {
});
```
-因为你的服务端正在渲染 `
`,所以你还需要在客户端将这个带有 `assetMap` 的组件再渲染一次进行同构,以此避免 hydrate 错误。你可以像下面这样序列化 `assetMap` 之后再传递:
+因为你的服务端正在渲染 `
`,所以你还需要在客户端将这个带有 `assetMap` 的组件再渲染一次进行同构,以此避免激活错误。你可以像下面这样序列化 `assetMap` 之后再传递:
```js {9-10}
// 你需要从你的打包构建工具中获取这个 JSON。
@@ -209,7 +209,7 @@ import App from './App.js';
hydrateRoot(document,
);
```
-这样一来,客户端和服务端都渲染了带有 `assetMap` 属性的 `App`,因此它们是同构的,就不会出现 hydrate 异常错误。
+这样一来,客户端和服务端都渲染了带有 `assetMap` 属性的 `App`,因此它们是同构的,就不会出现激活异常错误。
diff --git a/src/content/reference/react-dom/server/renderToStaticNodeStream.md b/src/content/reference/react-dom/server/renderToStaticNodeStream.md
index 75c78fd083..e2462b5e38 100644
--- a/src/content/reference/react-dom/server/renderToStaticNodeStream.md
+++ b/src/content/reference/react-dom/server/renderToStaticNodeStream.md
@@ -42,11 +42,11 @@ stream.pipe(response);
#### 返回值 {/*returns*/}
-输出 HTML 字符串的 [Node.js 只读流](https://nodejs.org/api/stream.html#readable-streams),以此法输出的 HTML 不能被客户端 hydrate。
+输出 HTML 字符串的 [Node.js 只读流](https://nodejs.org/api/stream.html#readable-streams),以此法输出的 HTML 不能被客户端激活。
#### 注意 {/*caveats*/}
-* `renderToStaticNodeStream` 的输出不能被 hydrate。
+* `renderToStaticNodeStream` 的输出不能被激活。
* 此方法会等待所有 [Suspense边界](/reference/react/Suspense) 完成后才返回输出。
@@ -76,7 +76,7 @@ app.use('/', (request, response) => {
-此方法将会渲染 **无法被 hydrate 的非交互式 HTML**。如果你想将 React 用作简单的静态页面生成器,或者渲染完全静态的内容(如电子邮件),那么这将会很有用。
+此方法将会渲染 **无法被激活的非交互式 HTML**。如果你想将 React 用作简单的静态页面生成器,或者渲染完全静态的内容(如电子邮件),那么这将会很有用。
交互式应用程序应该在服务端使用 [`renderToPipeableStream`](/reference/react-dom/server/renderToPipeableStream) 并在客户端结合使用 [`hydrateRoot`](/reference/react-dom/client/hydrateRoot)。
diff --git a/src/content/reference/react-dom/server/renderToString.md b/src/content/reference/react-dom/server/renderToString.md
index c48077f83c..1d0d419a1f 100644
--- a/src/content/reference/react-dom/server/renderToString.md
+++ b/src/content/reference/react-dom/server/renderToString.md
@@ -73,7 +73,7 @@ app.use('/', (request, response) => {
});
```
-这将生成你的 React 组件的初始非交互式 HTML 输出。在客户端上,你需要调用 [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) 来将服务器生成的 HTML 进行 hydrate 处理,使其具有交互功能。
+这将生成你的 React 组件的初始非交互式 HTML 输出。在客户端上,你需要调用 [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) 来将服务器生成的 HTML 进行激活处理,使其具有交互功能。
diff --git a/src/content/reference/react/useActionState.md b/src/content/reference/react/useActionState.md
index 24f9bbcbc3..9abe84e749 100644
--- a/src/content/reference/react/useActionState.md
+++ b/src/content/reference/react/useActionState.md
@@ -57,7 +57,7 @@ function StatefulForm({}) {
form state 是一个只在表单被提交触发 action 后才会被更新的值。如果该表单没有被提交,该值会保持传入的初始值不变。
-如果配合 Server Action 一起使用,`useActionState` 允许与表单交互的服务器的返回值在 hydration 完成前显示。
+如果配合 Server Action 一起使用,`useActionState` 允许与表单交互的服务器的返回值在激活完成前显示。
[请参阅下方更多示例](#usage)。
diff --git a/src/content/reference/react/useEffect.md b/src/content/reference/react/useEffect.md
index c0c5913337..fec265a83b 100644
--- a/src/content/reference/react/useEffect.md
+++ b/src/content/reference/react/useEffect.md
@@ -1753,7 +1753,7 @@ function MyComponent() {
}
```
-当应用加载时,用户首先会看到初始渲染的输出。然后,当它加载完并进行 hydrate 时,Effect 将会运行并且将 `didMount` 设置为 `true`,从而触发重新渲染。这将切换到仅在客户端的渲染输出。Effect 不在服务器上运行,这就是 `didMount` 在初始服务器渲染期间为 `false` 的原因。
+当应用加载时,用户首先会看到初始渲染的输出。然后,当它加载完并进行激活时,Effect 将会运行并且将 `didMount` 设置为 `true`,从而触发重新渲染。这将切换到仅在客户端的渲染输出。Effect 不在服务器上运行,这就是 `didMount` 在初始服务器渲染期间为 `false` 的原因。
谨慎使用此模式。请记住,网络连接速度较慢的用户将在相当长的时间内(可能是数秒钟)看到初始内容,因此你不希望对组件的外观进行突兀的更改。在许多情况下,你可以通过使用 CSS 条件性地显示不同的内容来避免这种需要。
diff --git a/src/content/reference/react/useId.md b/src/content/reference/react/useId.md
index 93747ff5f7..16497efc2b 100644
--- a/src/content/reference/react/useId.md
+++ b/src/content/reference/react/useId.md
@@ -179,7 +179,7 @@ input { margin: 5px; }
`useId` 的主要好处是 React 确保它能够与 [服务端渲染](/reference/react-dom/server)一起工作。 在服务器渲染期间,你的组件生成输出 HTML。随后,在客户端,[hydration](/reference/react-dom/client/hydrateRoot) 会将你的事件处理程序附加到生成的 HTML 上。由于 hydration,客户端必须匹配服务器输出的 HTML。
-使用递增计数器很难保证这一点,因为客户端组件被 hydrate 处理后的顺序可能与服务器 HTML 的顺序不匹配。调用 `useId` 可以确保 hydration 正常工作,以及服务器和客户端之间的输出相匹配。
+使用递增计数器很难保证这一点,因为客户端组件被激活处理后的顺序可能与服务器 HTML 的顺序不匹配。调用 `useId` 可以确保激活正常工作,以及服务器和客户端之间的输出相匹配。
在 React 内部,调用组件的“父路径”生成 `useId`。这就是为什么如果客户端和服务器的树相同,不管渲染顺序如何,“父路径”始终都匹配。
diff --git a/src/content/reference/react/useLayoutEffect.md b/src/content/reference/react/useLayoutEffect.md
index f753a028f2..a48dab6a26 100644
--- a/src/content/reference/react/useLayoutEffect.md
+++ b/src/content/reference/react/useLayoutEffect.md
@@ -736,6 +736,6 @@ export default function TooltipContainer({ children, x, y, contentRef }) {
- 或者,[将你的组件标记为仅在客户端上渲染](/reference/react/Suspense#providing-a-fallback-for-server-errors-and-client-only-content) 。这告诉 React 在服务器渲染期间将其内容替换为最接近的 [``](/reference/react/Suspense) 处的表示加载中的后备方案(例如,一个加载动画或者光效)。
-- 或者,只有在水合之后,使用 `useLayoutEffect` 渲染组件。保留一个初始化为 `false` 的 `isMounted` 布尔状态,并在 `useEffect` 调用中将其设置为 `true`。然后你的渲染逻辑就会像 `return isMounted ? : ` 这样。在服务端和水合过程中,用户将看到 `FallbackContent`,它不应该调用 `useLayoutEffect`。然后 React 将用 `RealContent` 替换它,`RealContent` 仅在客户端上运行并且可以包含 `useLayoutEffect` 调用。
+- 或者,只有在激活之后,使用 `useLayoutEffect` 渲染组件。保留一个初始化为 `false` 的 `isMounted` 布尔状态,并在 `useEffect` 调用中将其设置为 `true`。然后你的渲染逻辑就会像 `return isMounted ? : ` 这样。在服务端和激活过程中,用户将看到 `FallbackContent`,它不应该调用 `useLayoutEffect`。然后 React 将用 `RealContent` 替换它,`RealContent` 仅在客户端上运行并且可以包含 `useLayoutEffect` 调用。
- 如果你将组件与外部数据存储同步,并且依赖 `useLayouteffect` 的原因不同于测量布局,可以考虑使用 [支持服务端渲染](/reference/react/useSyncExternalStore#adding-support-for-server-rendering) 的 [`useSyncExternalStore`](/reference/react/useSyncExternalStore)。
diff --git a/src/content/reference/react/useSyncExternalStore.md b/src/content/reference/react/useSyncExternalStore.md
index f29cab2947..466d984a5a 100644
--- a/src/content/reference/react/useSyncExternalStore.md
+++ b/src/content/reference/react/useSyncExternalStore.md
@@ -45,7 +45,7 @@ function TodosApp() {
* `getSnapshot`:一个函数,返回组件需要的 store 中的数据快照。在 store 不变的情况下,重复调用 `getSnapshot` 必须返回同一个值。如果 store 改变,并且返回值也不同了(用 [`Object.is`](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/is) 比较),React 就会重新渲染组件。
-* **可选** `getServerSnapshot`:一个函数,返回 store 中数据的初始快照。它只会在服务端渲染时,以及在客户端进行服务端渲染内容的 hydration 时被用到。快照在服务端与客户端之间必须相同,它通常是从服务端序列化并传到客户端的。如果你忽略此参数,在服务端渲染这个组件会抛出一个错误。
+* **可选** `getServerSnapshot`:一个函数,返回 store 中数据的初始快照。它只会在服务端渲染时,以及在客户端进行服务端渲染内容的激活时被用到。快照在服务端与客户端之间必须相同,它通常是从服务端序列化并传到客户端的。如果你忽略此参数,在服务端渲染这个组件会抛出一个错误。
#### 返回值 {/*returns*/}