©
Ce document utilise Manuel du site Web PHP chinois Libérer
ReactDOMServer
对象使您可以将组件呈现为静态标记。通常,它在节点服务器上使用:
// ES modulesimport ReactDOMServer from 'react-dom/server';// CommonJSvar ReactDOMServer = require('react-dom/server');
以下方法可以在服务器和浏览器环境中使用:
renderToString()
renderToStaticMarkup()
这些附加方法取决于仅在服务器上可用的package(stream
),并且在浏览器中不起作用。
renderToNodeStream()
renderToStaticNodeStream()
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。返回一个输出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这样的项目,该项目为转码文本提供转换流。