React
v16.4.1GitHub

ReactDOMServer

ReactDOMServer 对象使你能够将组件渲染为静态标记。 通常，它在 Node 服务器上使用：

// ES modules
import ReactDOMServer from 'react-dom/server';
// CommonJS
var ReactDOMServer = require('react-dom/server');

概述

ReactDOMServer 对象允许您在服务器上渲染组件。

这些附加的方法依赖于 仅在服务器上可用 的包 (stream)，并且不能在浏览器中工作。

参考

renderToString()

ReactDOMServer.renderToString(element)

将 React 元素渲染到其初始 HTML 中。 该函数应该只在服务器上使用。 React 将返回一个 HTML 字符串。 您可以使用此方法在服务器上生成 HTML ，并在初始请求时发送标记，以加快网页加载速度，并允许搜索引擎抓取你的网页以实现 SEO 目的。

如果在已经具有此服务器渲染标记的节点上调用 ReactDOM.hydrate() ，React 将保留它，并且只附加事件处理程序，从而使您拥有非常高性能的第一次加载体验。

renderToStaticMarkup()

ReactDOMServer.renderToStaticMarkup(element)

类似于 renderToString ，除了这不会创建 React 在内部使用的额外DOM属性，如 data-reactroot。 如果你想使用React 作为一个简单的静态页面生成器，这很有用，因为剥离额外的属性可以节省一些字节。

如果你打算使用客户端上的 React ，使标记具有交互性，请不要使用此方法。相反，在服务器上使用 renderToString ，而在客户端上使用 ReactDOM.hydrate() 。

renderToNodeStream()

ReactDOMServer.renderToNodeStream(element)

将 React 元素渲染到其最初的 HTML 中。返回一个 可读的 流(stream) ，即输出 HTML 字符串。这个 流(stream) 输出的 HTML 完全等同于 ReactDOMServer.renderToString 将返回的内容。你可以使用此方法在服务器上生成 HTML ，并将标记发送到初始请求上，以获得更快的页面加载，并允许搜索引擎抓取你的页面以实现 SEO 目的。

如果在已经具有此服务器渲染标记的节点上调用 ReactDOM.hydrate() ，React 将保留它，并且只附加事件处理程序，从而使您拥有非常高性能的第一次加载体验。

注意：

仅适用于服务端。该API在浏览器中不可用。

从这个方法返回的 流(stream) 将返回一个以 utf-8 编码的字节流。如果你需要另一种编码的 流(stream) ，可以看看像 iconv-lite 这样的项目，它为转码文本提供转换流。

renderToStaticNodeStream()

ReactDOMServer.renderToStaticNodeStream(element)

类似于 renderToNodeStream ，除了这不会创建 React 在内部使用的额外DOM属性，如 data-reactroot 。 如果你想使用 React 作为一个简单的静态页面生成器，这很有用，因为剥离额外的属性可以节省一些字节。

这个 流(stream) 输出的 HTML 完全等同于 ReactDOMServer.renderToStaticMarkup 将返回的内容。

如果你打算使用客户端上的 React ，使标记具有交互性，请不要使用此方法。相反，在服务器上使用 renderToNodeStream ，而在客户端上使用 ReactDOM.hydrate() 。

注意：

仅适用于服务端。该API在浏览器中不可用。

从这个方法返回的 流(stream) 将返回一个以 utf-8 编码的字节流。如果你需要另一种编码的 流(stream) ，可以看看像 iconv-lite 这样的项目，它为转码文本提供转换流。

Edit this page