Skip to content

Commit

Permalink
docs(cn): translate content/docs/reference-react-dom-server.md into C…
Browse files Browse the repository at this point in the history
…hinese (reactjs#100)

translate content/docs/reference-react-dom-server.md into Chinese
  • Loading branch information
pampang authored and hijiangtao committed Mar 10, 2019
1 parent 879d491 commit 9eff452
Showing 1 changed file with 20 additions and 20 deletions.
40 changes: 20 additions & 20 deletions content/docs/reference-react-dom-server.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ category: Reference
permalink: docs/react-dom-server.html
---

The `ReactDOMServer` object enables you to render components to static markup. Typically, it's used on a Node server:
`ReactDOMServer` 对象允许你将组件渲染成静态标记。通常,它被使用在 Node 服务端上:

```js
// ES modules
Expand All @@ -15,31 +15,31 @@ import ReactDOMServer from 'react-dom/server';
var ReactDOMServer = require('react-dom/server');
```

## Overview {#overview}
## 概览 {#overview}

The following methods can be used in both the server and browser environments:
下述方法可以被使用在服务端和浏览器环境。

- [`renderToString()`](#rendertostring)
- [`renderToStaticMarkup()`](#rendertostaticmarkup)

These additional methods depend on a package (`stream`) that is **only available on the server**, and won't work in the browser.
下述附加方法依赖一个**只能在服务端使用**的 package(`stream`)。它们在浏览器中不起作用。

- [`renderToNodeStream()`](#rendertonodestream)
- [`renderToStaticNodeStream()`](#rendertostaticnodestream)

* * *

## Reference {#reference}
## 参考 {#reference}

### `renderToString()` {#rendertostring}

```javascript
ReactDOMServer.renderToString(element)
```

Render a React element to its initial HTML. React will return an HTML string. You can use this method to generate HTML on the server and send the markup down on the initial request for faster page loads and to allow search engines to crawl your pages for SEO purposes.
React 元素渲染为初始 HTMLReact 将返回一个 HTML 字符串。你可以使用此方法在服务端生成 HTML,并在首次请求时将标记下发,以加快页面加载速度,并允许搜索引擎爬取你的页面以达到 SEO 优化的目的。

If you call [`ReactDOM.hydrate()`](/docs/react-dom.html#hydrate) on a node that already has this server-rendered markup, React will preserve it and only attach event handlers, allowing you to have a very performant first-load experience.
如果你在已有服务端渲染标记的节点上调用 [`ReactDOM.hydrate()`](/docs/react-dom.html#hydrate) 方法,React 将会保留该节点且只进行事件处理绑定,从而让你有一个非常高性能的首次加载体验。

* * *

Expand All @@ -49,9 +49,9 @@ If you call [`ReactDOM.hydrate()`](/docs/react-dom.html#hydrate) on a node that
ReactDOMServer.renderToStaticMarkup(element)
```

Similar to [`renderToString`](#rendertostring), except this doesn't create extra DOM attributes that React uses internally, such as `data-reactroot`. This is useful if you want to use React as a simple static page generator, as stripping away the extra attributes can save some bytes.
此方法与 [`renderToString`](#rendertostring) 相似,但此方法不会在 React 内部创建的额外 DOM 属性,例如 `data-reactroot`。如果你希望把 React 当作静态页面生成器来使用,此方法会非常有用,因为去除额外的属性可以节省一些字节。

If you plan to use React on the client to make the markup interactive, do not use this method. Instead, use [`renderToString`](#rendertostring) on the server and [`ReactDOM.hydrate()`](/docs/react-dom.html#hydrate) on the client.
如果你计划在前端使用 React 以使得标记可交互,请不要使用此方法。你可以在服务端上使用 [`renderToString`](#rendertostring) 或在前端上使用 [`ReactDOM.hydrate()`](/docs/react-dom.html#hydrate) 来代替此方法。

* * *

Expand All @@ -61,15 +61,15 @@ If you plan to use React on the client to make the markup interactive, do not us
ReactDOMServer.renderToNodeStream(element)
```

Render a React element to its initial HTML. Returns a [Readable stream](https://nodejs.org/api/stream.html#stream_readable_streams) that outputs an HTML string. The HTML output by this stream is exactly equal to what [`ReactDOMServer.renderToString`](#rendertostring) would return. You can use this method to generate HTML on the server and send the markup down on the initial request for faster page loads and to allow search engines to crawl your pages for SEO purposes.
将一个 React 元素渲染成其初始 HTML。返回一个可输出 HTML 字符串的[可读流](https://nodejs.org/api/stream.html#stream_readable_streams)。通过可读流输出的 HTML 完全等同于 [`ReactDOMServer.renderToString`](#rendertostring) 返回的 HTML。你可以使用本方法在服务器上生成 HTML,并在初始请求时将标记下发,以加快页面加载速度,并允许搜索引擎抓取你的页面以达到 SEO 优化的目的。

If you call [`ReactDOM.hydrate()`](/docs/react-dom.html#hydrate) on a node that already has this server-rendered markup, React will preserve it and only attach event handlers, allowing you to have a very performant first-load experience.
如果你在已有服务端渲染标记的节点上调用 [`ReactDOM.hydrate()`](/docs/react-dom.html#hydrate) 方法,React 将会保留该节点且只进行事件处理绑定,从而让你有一个非常高性能的首次加载体验。

> Note:
> 注意:
>
> Server-only. This API is not available in the browser.
> 这个 API 仅允许在服务端使用。不允许在浏览器使用。
>
> The stream returned from this method will return 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) 这样的项目,它为转换文本提供了转换流。
* * *

Expand All @@ -79,14 +79,14 @@ If you call [`ReactDOM.hydrate()`](/docs/react-dom.html#hydrate) on a node that
ReactDOMServer.renderToStaticNodeStream(element)
```

Similar to [`renderToNodeStream`](#rendertonodestream), except this doesn't create extra DOM attributes that React uses internally, such as `data-reactroot`. This is useful if you want to use React as a simple static page generator, as stripping away the extra attributes can save some bytes.
此方法与 [`renderToNodeStream`](#rendertonodestream) 相似,但此方法不会在 React 内部创建的额外 DOM 属性,例如 `data-reactroot`。如果你希望把 React 当作静态页面生成器来使用,此方法会非常有用,因为去除额外的属性可以节省一些字节。

The HTML output by this stream is exactly equal to what [`ReactDOMServer.renderToStaticMarkup`](#rendertostaticmarkup) would return.
通过可读流输出的 HTML,完全等同于 [`ReactDOMServer.renderToStaticMarkup`](#rendertostaticmarkup) 返回的 HTML。

If you plan to use React on the client to make the markup interactive, do not use this method. Instead, use [`renderToNodeStream`](#rendertonodestream) on the server and [`ReactDOM.hydrate()`](/docs/react-dom.html#hydrate) on the client.
如果你计划在前端使用 React 以使得标记可交互,请不要使用此方法。你可以在服务端上使用 [`renderToNodeStream`](#rendertonodestream) 或在前端上使用 [`ReactDOM.hydrate()`](/docs/react-dom.html#hydrate) 来代替此方法。

> Note:
> 注意:
>
> Server-only. This API is not available in the browser.
> API 仅限于服务端使用,在浏览器中是不可用的。
>
> The stream returned from this method will return 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) 这样的项目,它为转换文本提供了转换流。

0 comments on commit 9eff452

Please sign in to comment.