ReactDOMServer

ReactDOMServer 对象使你能够将组件渲染为静态标记。通常,它在节点服务器上使用:

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

概览

下面的方法在服务器和浏览器环境中都能使用:

下面附加的方法依赖于只在服务器上可用的包(stream),并且不能在浏览器上工作:


API 参考

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()

ReactDOMSercer.renderToNodeStream(element)

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

如果你在已经具有此服务器渲染标记的节点上调用 ReactDOM.hydrate(),则 React 将保留它并仅附加事件处理程序,从而使你拥有非常高效的首次加载体验。

注意:
仅在服务器上可用。 API 在浏览器上无法起作用。
从这个方法返回的流,将返回一个以 utf-8 编码的字节流,如果你需要另一种编码的流,请查看像 iconv-lite 这样的项目,该项目为转码文本提供转换流。


renderToStaticNodeStream()

ReactDOMServer.renderToStaticNodeStream(element)

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

这个流输出的 HTML 完全等于 ReactDOMServer.renderToStaticMarkup 返回的内容。

如果你计划在客户端上使用 React 来交互标记,请不要使用这个方法。而是在服务器上使用 renderToNodeStream,在客户端上使用 ReactDOM.hydrate

注意:
仅在服务器起作用。这个 API 在浏览器无法工作。
从这个方法返回的流,将返回一个以 utf-8 编码的字节流,如果你需要另一种编码的流,请查看像 iconv-lite 这样的项目,该项目为转码文本提供转换流。


在 Github 上共同编辑:

Github 系列文章: