此文章是翻译ReactDOMServer这篇React(版本v16.2.0)官方文档。

ReactDOMServer

ReactDOMServer 对象允许你渲染组件为静态标签。通常,它被用在Node 服务器:

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

Overview

下面方法可以被用在服务器和浏览其环境:

这些依赖于包(stream)的附加方法,只在服务器端有效 在浏览器中不工作。

参考

renderToString()

ReactDOMServer.renderToString(element)

将React 元素渲染成初始的HTML。React 将返回一个HTML 字符串。你应该在服务器端使用这个方法生成HTML,并且在初始请求上发送标记以加快页面加载的,允许搜索引擎抓取你的网页来达到SEO(搜索引擎优化)目的。

如果你在一个已经在服务器端进行渲染的标记上的节点进行调用ReactDOM.hydrate(),React 将保留它并且只是绑定事件句柄,允许你有一个非常优秀的首次加载体验。

renderToStaticMarkup()

ReactDOMServer.renderToStaticMarkup(element)

类似renderToString,除了它不能创建额外的DOM 特性,React 在内部使用,例如data-reactroot。这是有用的如果你想要使用React 作为一个简单的静态页面生成器,因为剥离额外的属性可以节省大量的字节。

如果你计划在客户端使用React 生成标记交互,不要使用这个方法。相反在服务器端使用renderToString,在客户端使用ReactDOM.hydrate()

renderToNodeStream()

ReactDOMServer.renderToNodeStream(element)

将React 元素渲染成初始的HTML。将返回一个可读的流 来输出 HTML 字符串。这个流的HTML 输出恰好等于ReactDOMServer.renderToString 的返回。你应该在服务器端使用这个方法生成HTML,并且在初始请求上发送标记以加快页面加载的,允许搜索引擎抓取你的网页来达到SEO(搜索引擎优化)目的。

如果你在一个已经在服务器端进行渲染的标记上的节点进行调用ReactDOM.hydrate(),React 将保留它并且只是绑定事件句柄,允许你有一个非常优秀的首次加载体验。

注意:

只服务器端。这个API 在浏览器端无效。

从这个方法返回的流将会返回utf-8 编码的字节流。如果你需要其它编码的流,可以看看iconv-lite 这个项目,它提供了流的编码转换。

renderToStaticNodeStream

ReactDOM.renderToStaticNodeStream(element)

类似renderToNodeStream,除了它不能创建额外的DOM 特性,React 在内部使用,例如data-reactroot。这是有用的如果你想要使用React 作为一个简单的静态页面生成器,因为剥离额外的属性可以节省大量的字节。

这个流的HTML 输出恰好等于ReactDOMServer.renderToStaticMarkup 的返回。

如果你计划在客户端使用React 生成标记交互,不要使用这个方法。相反在服务器端使用renderToNodeStream,在客户端使用ReactDOM.hydrate()

注意:

只服务器端。这个API 在浏览器端无效。

从这个方法返回的流将会返回utf-8 编码的字节流。如果你需要其它编码的流,可以看看iconv-lite 这个项目,它提供了流的编码转换。

results matching ""

    No results matching ""