From 6aa26593e14100c83184338dbc8b64db418965dd Mon Sep 17 00:00:00 2001 From: Yucohny Date: Sun, 25 Jun 2023 10:20:34 +0800 Subject: [PATCH 1/7] docs(cn): translate reference/react-dom/hydrate --- src/content/reference/react-dom/hydrate.md | 92 +++++++++++----------- 1 file changed, 46 insertions(+), 46 deletions(-) diff --git a/src/content/reference/react-dom/hydrate.md b/src/content/reference/react-dom/hydrate.md index 639c7ab25b..efc2ca6423 100644 --- a/src/content/reference/react-dom/hydrate.md +++ b/src/content/reference/react-dom/hydrate.md @@ -4,15 +4,15 @@ title: hydrate -This API will be removed in a future major version of React. +此 API 将在未来的 React 主要版本中被移除。 -In React 18, `hydrate` was replaced by [`hydrateRoot`.](/reference/react-dom/client/hydrateRoot) Using `hydrate` in React 18 will warn that your app will behave as if it’s running React 17. Learn more [here.](/blog/2022/03/08/react-18-upgrade-guide#updates-to-client-rendering-apis) +从 React 18 开始，`hydrate` 被 [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) 替代。在 React 18 或更高版本中使用 `hydrate` 将会警告你的应用程序表现得行为会如同在 React 17 一样。如果你想了解更多，请看 [这里](/blog/2022/03/08/react-18-upgrade-guide#updates-to-client-rendering-apis)。 -`hydrate` lets you display React components inside a browser DOM node whose HTML content was previously generated by [`react-dom/server`](/reference/react-dom/server) in React 17 and below. +`hydrate` 允许你在 React 17 及以下版本中将使用 [`react-dom/server`](/reference/react-dom/server) 生成的 HTML 内容作为浏览器 DOM 节点，并在其中显示 React 组件。 ```js hydrate(reactNode, domNode, callback?) @@ -24,11 +24,11 @@ hydrate(reactNode, domNode, callback?) --- -## Reference {/*reference*/} +## 参考 {/*reference*/} ### `hydrate(reactNode, domNode, callback?)` {/*hydrate*/} -Call `hydrate` in React 17 and below to “attach” React to existing HTML that was already rendered by React in a server environment. +在 React 17 及以下版本中调用 `hydrate`，可以将 React “附加”到在服务器环境中已经由 React 渲染的现有 HTML 上。 ```js import { hydrate } from 'react-dom'; @@ -36,33 +36,33 @@ import { hydrate } from 'react-dom'; hydrate(reactNode, domNode); ``` -React will attach to the HTML that exists inside the `domNode`, and take over managing the DOM inside it. An app fully built with React will usually only have one `hydrate` call with its root component. +React 将会附加到 `domNode` 内部现有的 HTML，并接管有关的 DOM 的管理。使用 React 完全构建的应用通常只会有一个 `hydrate` 调用，并用于根组件。 -[See more examples below.](#usage) +[参加下面更多示例](#usage)。 -#### Parameters {/*parameters*/} +#### 参数 {/*parameters*/} -* `reactNode`: The "React node" used to render the existing HTML. This will usually be a piece of JSX like `` which was rendered with a `ReactDOM Server` method such as `renderToString()` in React 17. +* `reactNode`：此参数用于渲染现有的 HTML。这通常是像 `` 这样的 JSX 片段，并且在 React 17 中使用如 `renderToString()` 的 `ReactDOM Server` 方法进行渲染。 -* `domNode`: A [DOM element](https://developer.mozilla.org/en-US/docs/Web/API/Element) that was rendered as the root element on the server. +* `domNode`：在服务器中被渲染为根节点的 [DOM 元素](https://developer.mozilla.org/en-US/docs/Web/API/Element)。 -* **optional**: `callback`: A function. If passed, React will call it after your component is hydrated. +* **可选属性** `callback`：一个函数。如果传递了该参数，React 将会在组件 hydrate 后调用它。 -#### Returns {/*returns*/} +#### 返回值 {/*returns*/} -`hydrate` returns null. +`hydrate` 返回 `null`。 -#### Caveats {/*caveats*/} -* `hydrate` expects the rendered content to be identical with the server-rendered content. React can patch up differences in text content, but you should treat mismatches as bugs and fix them. -* In development mode, React warns about mismatches during hydration. There are no guarantees that attribute differences will be patched up in case of mismatches. This is important for performance reasons because in most apps, mismatches are rare, and so validating all markup would be prohibitively expensive. -* You'll likely have only one `hydrate` call in your app. If you use a framework, it might do this call for you. -* If your app is client-rendered with no HTML rendered already, using `hydrate()` is not supported. Use [render()](/reference/react-dom/render) (for React 17 and below) or [createRoot()](/reference/react-dom/client/createRoot) (for React 18+) instead. +#### 注意 {/*caveats*/} +* `hydrate` 要求渲染的内容与服务器渲染的内容完全相同。尽管 React 可以修复文本内容的差异，但你应该首先将不匹配视为错误并进行修复。 +* 在开发模式下，React 会在 hydration 期间警告不匹配。如果存在不匹配情况，无法保证属性的差异会被修补。在大多数应用程序中不匹配是很少见的，所以验证所有标记的代价将会很高。因此考虑到性能原因，这是很重要的。 +* 你的应用程序中可能只有一个 `hydrate` 调用。如果你使用了框架，它可能会为你执行此调用。 +* 如果你的应用程序是客户端渲染的，并且没有已经渲染的 HTML，则不支持使用 `hydrate()`。请改用 [render()](/reference/react-dom/render)（适用于 React 17 及以下版本）或 [createRoot()](/reference/react-dom/client/createRoot)（适用于 React 18 及以上版本）。 --- -## Usage {/*usage*/} +## 用法 {/*usage*/} -Call `hydrate` to attach a React component into a server-rendered browser DOM node. +调用 `hydrate` 将 React 组件 附加（attach）到服务器渲染的 浏览器 DOM 节点。 ```js [[1, 3, ""], [2, 3, "document.getElementById('root')"]] import { hydrate } from 'react-dom'; @@ -70,22 +70,22 @@ import { hydrate } from 'react-dom'; hydrate(, document.getElementById('root')); ``` -Using `hydrate()` to render a client-only app (an app without server-rendered HTML) is not supported. Use [`render()`](/reference/react-dom/render) (in React 17 and below) or [`createRoot()`](/reference/react-dom/client/createRoot) (in React 18+) instead. +不支持使用 `hydrate()` 渲染仅用于客户端的应用程序（没有服务器渲染的 HTML）。请改用 [`render()`](/reference/react-dom/render)（适用于 React 17 及以下版本）或 [`createRoot()`](/reference/react-dom/client/createRoot)（适用于 React 18 及以上版本）。 -### Hydrating server-rendered HTML {/*hydrating-server-rendered-html*/} +### Hydrate 服务器渲染的 HTML {/*hydrating-server-rendered-html*/} -In React, "hydration" is how React "attaches" to existing HTML that was already rendered by React in a server environment. During hydration, React will attempt to attach event listeners to the existing markup and take over rendering the app on the client. +在 React 中，hydrate 是指将 React “附加（attach）”到在服务器环境中已由 React 渲染的现有 HTML 上。在 hydrate 期间，React 将尝试将事件监听器附加（attach）到现有标记，并在客户端上接管渲染应用程序。 -In apps fully built with React, **you will usually only hydrate one "root", once at startup for your entire app**. +在完全使用 React 构建的应用程序中，**通常只会在第一次启动整个应用程序时，hydrate “根”节点**。 ```html public/index.html -

Hello, world!

+

你好，世界！

``` ```js index.js active @@ -98,32 +98,32 @@ hydrate(, document.getElementById('root')); ```js App.js export default function App() { - return

Hello, world!

; + return

你好，世界！

; } ``` -Usually you shouldn't need to call `hydrate` again or to call it in more places. From this point on, React will be managing the DOM of your application. To update the UI, your components will [use state.](/reference/react/useState) +通常情况下，你不需要再次调用 `hydrate`，也不需要在更多地方调用它。从此时开始，React 将会管理你的应用程序的 DOM。为了更新 UI，你的组件将会 [使用 state](/reference/react/useState)。 -For more information on hydration, see the docs for [`hydrateRoot`.](/reference/react-dom/client/hydrateRoot) +有关 hydrate 的更多信息，请参阅 [`hydrateRoot`](/reference/react-dom/client/hydrateRoot)。 --- -### Suppressing unavoidable hydration mismatch errors {/*suppressing-unavoidable-hydration-mismatch-errors*/} +### 抑制不可避免的 hydrate 不匹配错误 {/*suppressing-unavoidable-hydration-mismatch-errors*/} -If a single element’s attribute or text content is unavoidably different between the server and the client (for example, a timestamp), you may silence the hydration mismatch warning. +如果服务器和客户端之间某个元素的属性或文本内容无法避免不同（比如一个时间戳），你可以禁止 hydrate 警告。 -To silence hydration warnings on an element, add `suppressHydrationWarning={true}`: +使用 `suppressHydrationWarning={true}` 禁止 hydrate 警告： ```html public/index.html -

Current Date: 01/01/2020

+

当前时间：01/01/2020

``` ```js index.js @@ -138,7 +138,7 @@ hydrate(, document.getElementById('root')); export default function App() { return (

- Current Date: {new Date().toLocaleDateString()} + 当前时间：{new Date().toLocaleDateString()}

); } @@ -146,22 +146,22 @@ export default function App() { -This only works one level deep, and is intended to be an escape hatch. Don’t overuse it. Unless it’s text content, React still won’t attempt to patch it up, so it may remain inconsistent until future updates. +这只在同级深度上有效，而且是一种应急方法，因此不要过度使用它。除非它是文本内容，否则 React 仍然不会尝试修补它，因此直至未来的更新它都可能会保持不一致。 --- -### Handling different client and server content {/*handling-different-client-and-server-content*/} +### 处理不同的客户端和服务器内容 {/*handling-different-client-and-server-content*/} -If you intentionally need to render something different on the server and the client, you can do a two-pass rendering. Components that render something different on the client can read a [state variable](/reference/react/useState) like `isClient`, which you can set to `true` in an [effect](/reference/react/useEffect): +如果你需要在服务器和客户端上故意渲染不同的内容，可以进行双重渲染。在客户端上渲染不同内容的组件可以读取像 `isClient` 这样的 [state 变量](/reference/react/useState)，你可以在 [effect](/reference/react/useEffect) 中将其设置为 `true`： ```html public/index.html -

Is Server

+

在服务器

``` ```js index.js @@ -184,7 +184,7 @@ export default function App() { return (

- {isClient ? 'Is Client' : 'Is Server'} + {isClient ? '在客户端' : '在服务器'}

); } @@ -192,10 +192,10 @@ export default function App() { -This way the initial render pass will render the same content as the server, avoiding mismatches, but an additional pass will happen synchronously right after hydration. +这样，初始渲染过程将呈现与服务器相同的内容，并且避免不匹配的情况，但会在 hydrate 后立即同步并进行额外的渲染。 -This approach makes hydration slower because your components have to render twice. Be mindful of the user experience on slow connections. The JavaScript code may load significantly later than the initial HTML render, so rendering a different UI immediately after hydration may feel jarring to the user. +这种方法会使 hydrate 变慢，因为你的组件必须渲染两次，因此要注意在连接缓慢的情况下用户体验。JavaScript 代码的加载可能比初始 HTML 渲染要晚许多，因此在 hydrate 后立即渲染不同的 UI 可能会让用户感到不适。 From 44e258f2893287df172be283e0bb021cd2cdf0ef Mon Sep 17 00:00:00 2001 From: Yucohny <79147654+Yucohny@users.noreply.github.com> Date: Sun, 25 Jun 2023 19:59:25 +0800 Subject: [PATCH 2/7] Update src/content/reference/react-dom/hydrate.md --- src/content/reference/react-dom/hydrate.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react-dom/hydrate.md b/src/content/reference/react-dom/hydrate.md index efc2ca6423..0941ac10c5 100644 --- a/src/content/reference/react-dom/hydrate.md +++ b/src/content/reference/react-dom/hydrate.md @@ -38,7 +38,7 @@ hydrate(reactNode, domNode); React 将会附加到 `domNode` 内部现有的 HTML，并接管有关的 DOM 的管理。使用 React 完全构建的应用通常只会有一个 `hydrate` 调用，并用于根组件。 -[参加下面更多示例](#usage)。 +[参见下面更多示例](#usage)。 #### 参数 {/*parameters*/} From 9573568505ba21dda400828abc13b2df8524c9f1 Mon Sep 17 00:00:00 2001 From: Yucohny <79147654+Yucohny@users.noreply.github.com> Date: Sun, 25 Jun 2023 19:59:33 +0800 Subject: [PATCH 3/7] Update src/content/reference/react-dom/hydrate.md --- src/content/reference/react-dom/hydrate.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react-dom/hydrate.md b/src/content/reference/react-dom/hydrate.md index 0941ac10c5..80d261b3df 100644 --- a/src/content/reference/react-dom/hydrate.md +++ b/src/content/reference/react-dom/hydrate.md @@ -72,7 +72,7 @@ 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*/} +### hydrate 服务器渲染的 HTML {/*hydrating-server-rendered-html*/} 在 React 中，hydrate 是指将 React “附加（attach）”到在服务器环境中已由 React 渲染的现有 HTML 上。在 hydrate 期间，React 将尝试将事件监听器附加（attach）到现有标记，并在客户端上接管渲染应用程序。 From b66e3216e9806bbb114e57b0ef02a2c9d3cf8bb3 Mon Sep 17 00:00:00 2001 From: Yucohny <79147654+Yucohny@users.noreply.github.com> Date: Mon, 26 Jun 2023 05:09:27 +0800 Subject: [PATCH 4/7] Update src/content/reference/react-dom/hydrate.md Co-authored-by: Xleine <919143384@qq.com> --- src/content/reference/react-dom/hydrate.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react-dom/hydrate.md b/src/content/reference/react-dom/hydrate.md index 80d261b3df..aa6fff4d66 100644 --- a/src/content/reference/react-dom/hydrate.md +++ b/src/content/reference/react-dom/hydrate.md @@ -6,7 +6,7 @@ title: hydrate 此 API 将在未来的 React 主要版本中被移除。 -从 React 18 开始，`hydrate` 被 [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) 替代。在 React 18 或更高版本中使用 `hydrate` 将会警告你的应用程序表现得行为会如同在 React 17 一样。如果你想了解更多，请看 [这里](/blog/2022/03/08/react-18-upgrade-guide#updates-to-client-rendering-apis)。 +从 React 18 开始，`hydrate` 被 [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) 替代。在 React 18 或更高版本中使用 `hydrate` 将会警告你的应用程序行为会和 React 17 一样。如果你想了解更多，请看 [这里](/blog/2022/03/08/react-18-upgrade-guide#updates-to-client-rendering-apis)。 From 09b4f1dd0814650a3e92d1b02b4a070b54e593f9 Mon Sep 17 00:00:00 2001 From: Yucohny <79147654+Yucohny@users.noreply.github.com> Date: Mon, 26 Jun 2023 05:09:34 +0800 Subject: [PATCH 5/7] Update src/content/reference/react-dom/hydrate.md Co-authored-by: Xleine <919143384@qq.com> --- src/content/reference/react-dom/hydrate.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react-dom/hydrate.md b/src/content/reference/react-dom/hydrate.md index aa6fff4d66..3429e8757c 100644 --- a/src/content/reference/react-dom/hydrate.md +++ b/src/content/reference/react-dom/hydrate.md @@ -54,7 +54,7 @@ React 将会附加到 `domNode` 内部现有的 HTML，并接管有关的 DOM #### 注意 {/*caveats*/} * `hydrate` 要求渲染的内容与服务器渲染的内容完全相同。尽管 React 可以修复文本内容的差异，但你应该首先将不匹配视为错误并进行修复。 -* 在开发模式下，React 会在 hydration 期间警告不匹配。如果存在不匹配情况，无法保证属性的差异会被修补。在大多数应用程序中不匹配是很少见的，所以验证所有标记的代价将会很高。因此考虑到性能原因，这是很重要的。 +* 在开发模式下，React 会在 hydration 期间警告不匹配的错误。如果存在不匹配情况，无法保证属性的差异会被修补。在大多数应用程序中不匹配是很少见的，所以验证所有标记的代价将会很高。因此考虑到性能原因，这是很重要的。 * 你的应用程序中可能只有一个 `hydrate` 调用。如果你使用了框架，它可能会为你执行此调用。 * 如果你的应用程序是客户端渲染的，并且没有已经渲染的 HTML，则不支持使用 `hydrate()`。请改用 [render()](/reference/react-dom/render)（适用于 React 17 及以下版本）或 [createRoot()](/reference/react-dom/client/createRoot)（适用于 React 18 及以上版本）。 From b9fb8bf2d8576378322cdad11e615cecf710a4d2 Mon Sep 17 00:00:00 2001 From: Yucohny <79147654+Yucohny@users.noreply.github.com> Date: Mon, 26 Jun 2023 05:09:41 +0800 Subject: [PATCH 6/7] Update src/content/reference/react-dom/hydrate.md Co-authored-by: Xleine <919143384@qq.com> --- src/content/reference/react-dom/hydrate.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react-dom/hydrate.md b/src/content/reference/react-dom/hydrate.md index 3429e8757c..2bc4b6af5e 100644 --- a/src/content/reference/react-dom/hydrate.md +++ b/src/content/reference/react-dom/hydrate.md @@ -196,6 +196,6 @@ export default function App() { -这种方法会使 hydrate 变慢，因为你的组件必须渲染两次，因此要注意在连接缓慢的情况下用户体验。JavaScript 代码的加载可能比初始 HTML 渲染要晚许多，因此在 hydrate 后立即渲染不同的 UI 可能会让用户感到不适。 +这种方法会使 hydrate 变慢，因为你的组件必须渲染两次，因此要注意在网络不好情况下的用户体验。JavaScript 代码的加载可能比初始 HTML 渲染要晚许多，因此在 hydrate 后立即渲染不同的 UI 可能会让用户感到不适。 From 812ec22de20d87ca3a48b53444c7fcb9739a0493 Mon Sep 17 00:00:00 2001 From: Yucohny <79147654+Yucohny@users.noreply.github.com> Date: Tue, 27 Jun 2023 10:45:00 +0800 Subject: [PATCH 7/7] docs(cn): review and update --- src/content/reference/react-dom/hydrate.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react-dom/hydrate.md b/src/content/reference/react-dom/hydrate.md index 2bc4b6af5e..6423c9d9bb 100644 --- a/src/content/reference/react-dom/hydrate.md +++ b/src/content/reference/react-dom/hydrate.md @@ -152,7 +152,7 @@ export default function App() { ### 处理不同的客户端和服务器内容 {/*handling-different-client-and-server-content*/} -如果你需要在服务器和客户端上故意渲染不同的内容，可以进行双重渲染。在客户端上渲染不同内容的组件可以读取像 `isClient` 这样的 [state 变量](/reference/react/useState)，你可以在 [effect](/reference/react/useEffect) 中将其设置为 `true`： +如果需要在服务器和客户端上故意渲染不同的内容，可以进行双重渲染。在客户端上渲染不同内容的组件可以读取像 `isClient` 这样的 [state 变量](/reference/react/useState)，你可以在 [effect](/reference/react/useEffect) 中将其设置为 `true`：