From 13abcea9e5f18a8edecd2ca7bd206e7f356f902a Mon Sep 17 00:00:00 2001 From: yanyuntao Date: Wed, 21 Jun 2023 19:42:46 +0800 Subject: [PATCH 1/5] docs(cn): translate reference/react-dom/server/renderToNodeStream --- .../react-dom/server/renderToNodeStream.md | 38 +++++++++---------- 1 file changed, 19 insertions(+), 19 deletions(-) diff --git a/src/content/reference/react-dom/server/renderToNodeStream.md b/src/content/reference/react-dom/server/renderToNodeStream.md index a4ab2e570f..bc6ed54a94 100644 --- a/src/content/reference/react-dom/server/renderToNodeStream.md +++ b/src/content/reference/react-dom/server/renderToNodeStream.md @@ -4,13 +4,13 @@ title: renderToNodeStream -This API will be removed in a future major version of React. Use [`renderToPipeableStream`](/reference/react-dom/server/renderToPipeableStream) instead. +此 API 将在未来的 React 主要版本中被移除，请使用 [`renderToPipeableStream`](/reference/react-dom/server/renderToPipeableStream)。 -`renderToNodeStream` renders a React tree to a [Node.js Readable Stream.](https://nodejs.org/api/stream.html#readable-streams) +`renderToNodeStream` 可以为 [Node.js 只读流](https://nodejs.org/api/stream.html#readable-streams) 渲染 React 树。 ```js const stream = renderToNodeStream(reactNode) @@ -22,11 +22,11 @@ const stream = renderToNodeStream(reactNode) --- -## Reference {/*reference*/} +## 参考 {/*reference*/} ### `renderToNodeStream(reactNode)` {/*rendertonodestream*/} -On the server, call `renderToNodeStream` to get a [Node.js Readable Stream](https://nodejs.org/api/stream.html#readable-streams) which you can pipe into the response. +在服务端调用 `renderToNodeStream` 获取 [Node.js 只读流](https://nodejs.org/api/stream.html#readable-streams)，你也可以将其管道（pipe）传输到响应中。 ```js import { renderToNodeStream } from 'react-dom/server'; @@ -35,42 +35,42 @@ const stream = renderToNodeStream(); stream.pipe(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*/} +#### 参数 {/*parameters*/} -* `reactNode`: A React node you want to render to HTML. For example, a JSX element like ``. +* `reactNode`：想要渲染为 HTML 的 React 节点。比如像 `` 一样的 JSX 元素。 -#### Returns {/*returns*/} +#### 返回值 {/*returns*/} -A [Node.js Readable Stream](https://nodejs.org/api/stream.html#readable-streams) that outputs an HTML string. +输出 HTML 字符串的 [Node.js 只读流](https://nodejs.org/api/stream.html#readable-streams)。 -#### Caveats {/*caveats*/} +#### 注意 {/*caveats*/} -* This method will wait for all [Suspense boundaries](/reference/react/Suspense) to complete before returning any output. +* 此方法会等待所有 [Suspense边界](/reference/react/Suspense) 完成后才返回输出。 -* As of React 18, this method buffers all of its output, so it doesn't actually provide any streaming benefits. This is why it's recommended that you migrate to [`renderToPipeableStream`](/reference/react-dom/server/renderToPipeableStream) instead. +* 从 React 18 开始，此方法会缓冲所有输出，因此实际上它并没有提供任何流式传输的好处。这就是为什么建议改用 [`renderToPipeableStream`](/reference/react-dom/server/renderToPipeableStream)。 -* The returned stream is a byte stream encoded in utf-8. If you need a stream in another encoding, take a look at a project like [iconv-lite](https://www.npmjs.com/package/iconv-lite), which provides transform streams for transcoding text. +* 返回的是一个 utf-8 编码的字节流。如果你需要其他编码格式的流，请参考 [iconv-lite](https://www.npmjs.com/package/iconv-lite) 这样的项目，它提供了用于转码文本的转换流。 --- -## Usage {/*usage*/} +## 用法 {/*usage*/} -### Rendering a React tree as HTML to a Node.js Readable Stream {/*rendering-a-react-tree-as-html-to-a-nodejs-readable-stream*/} +### 为 Node.js 只读流将 React 树渲染为 HTML {/*rendering-a-react-tree-as-html-to-a-nodejs-readable-stream*/} -Call `renderToNodeStream` to get a [Node.js Readable Stream](https://nodejs.org/api/stream.html#readable-streams) which you can pipe to your server response: +调用 `renderToNodeStream` 获取 [Node.js 只读流](https://nodejs.org/api/stream.html#readable-streams)，你也可以将其管道（pipe）传输到服务器响应中。 ```js {5-6} import { renderToNodeStream } from 'react-dom/server'; -// The route handler syntax depends on your backend framework +// 路由处理程序的语法取决于使用的后端框架。 app.use('/', (request, response) => { const stream = renderToNodeStream(); stream.pipe(response); }); ``` -The stream 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. +这里的流将会将 React 组件初始输出为非交互式 HTML。在客户端上，你需要调用 [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) 方法来 **水合（hydrate）** 服务器生成的 HTML 并使其具有交互功能。 From 6f3c31b78dbd6a0ecb5cf7689bb51c0ebe9a41e2 Mon Sep 17 00:00:00 2001 From: Yucohny <79147654+Yucohny@users.noreply.github.com> Date: Wed, 21 Jun 2023 19:55:02 +0800 Subject: [PATCH 2/5] docs(cn): review and update --- src/content/reference/react-dom/server/renderToNodeStream.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react-dom/server/renderToNodeStream.md b/src/content/reference/react-dom/server/renderToNodeStream.md index bc6ed54a94..b96905a18a 100644 --- a/src/content/reference/react-dom/server/renderToNodeStream.md +++ b/src/content/reference/react-dom/server/renderToNodeStream.md @@ -37,7 +37,7 @@ stream.pipe(response); 在客户端调用 [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) 使由服务器生成的 HTML 具有交互功能。 -[参加下面更多示例](#usage)。 +[参见下面更多示例](#usage)。 #### 参数 {/*parameters*/} From 40a422a1f8334c8fd19259122d19941784399c2c Mon Sep 17 00:00:00 2001 From: Yucohny <79147654+Yucohny@users.noreply.github.com> Date: Wed, 21 Jun 2023 19:57:57 +0800 Subject: [PATCH 3/5] docs(cn): review and update --- src/content/reference/react-dom/server/renderToNodeStream.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react-dom/server/renderToNodeStream.md b/src/content/reference/react-dom/server/renderToNodeStream.md index b96905a18a..240b29f93f 100644 --- a/src/content/reference/react-dom/server/renderToNodeStream.md +++ b/src/content/reference/react-dom/server/renderToNodeStream.md @@ -49,7 +49,7 @@ stream.pipe(response); #### 注意 {/*caveats*/} -* 此方法会等待所有 [Suspense边界](/reference/react/Suspense) 完成后才返回输出。 +* 此方法会等待所有 [Suspense 边界](/reference/react/Suspense) 完成后才返回输出。 * 从 React 18 开始，此方法会缓冲所有输出，因此实际上它并没有提供任何流式传输的好处。这就是为什么建议改用 [`renderToPipeableStream`](/reference/react-dom/server/renderToPipeableStream)。 From 84fc160671cf87f744c39de80d41bde9024ec03f Mon Sep 17 00:00:00 2001 From: Yucohny <79147654+Yucohny@users.noreply.github.com> Date: Wed, 21 Jun 2023 20:34:59 +0800 Subject: [PATCH 4/5] docs(cn): review and update --- src/content/reference/react-dom/server/renderToNodeStream.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react-dom/server/renderToNodeStream.md b/src/content/reference/react-dom/server/renderToNodeStream.md index 240b29f93f..75f460bda5 100644 --- a/src/content/reference/react-dom/server/renderToNodeStream.md +++ b/src/content/reference/react-dom/server/renderToNodeStream.md @@ -73,4 +73,4 @@ app.use('/', (request, response) => { }); ``` -这里的流将会将 React 组件初始输出为非交互式 HTML。在客户端上，你需要调用 [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) 方法来 **水合（hydrate）** 服务器生成的 HTML 并使其具有交互功能。 +这里的流将会将 React 组件初始输出为非交互式 HTML。在客户端上，你需要调用 [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) 方法来 hydrate 服务器生成的 HTML 并使其具有交互功能。 From 91be2ada90e8cfa092a266a414b6f7abc7a2695c Mon Sep 17 00:00:00 2001 From: Xleine <919143384@qq.com> Date: Fri, 23 Jun 2023 14:58:47 +0800 Subject: [PATCH 5/5] Update src/content/reference/react-dom/server/renderToNodeStream.md --- src/content/reference/react-dom/server/renderToNodeStream.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react-dom/server/renderToNodeStream.md b/src/content/reference/react-dom/server/renderToNodeStream.md index 75f460bda5..868b2c6479 100644 --- a/src/content/reference/react-dom/server/renderToNodeStream.md +++ b/src/content/reference/react-dom/server/renderToNodeStream.md @@ -73,4 +73,4 @@ app.use('/', (request, response) => { }); ``` -这里的流将会将 React 组件初始输出为非交互式 HTML。在客户端上，你需要调用 [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) 方法来 hydrate 服务器生成的 HTML 并使其具有交互功能。 +这里的流会将 React 组件初始输出为非交互式 HTML。在客户端上，你需要调用 [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) 方法来 hydrate 服务器生成的 HTML 并使其具有交互功能。