ReactDOMServer - [ React中文开发手册 ] - 在线原生手册

目录搜索

Reference Reference: Component Reference: React Advanced Guides Quick Start DOM Elements Glossary of React Terms JavaScript Environment Requirements props React Top-Level API React.Component ReactDOM ReactDOMServer Shallow Renderer state SyntheticEvent Test Renderer Test Utilities Component React API Accessibility Context Error Boundaries Higher-Order Components Integrating with Other Libraries JSX In Depth Optimizing Performance Portals React Without ES6 React Without JSX Reconciliation Refs and the DOM Static Type Checking Typechecking With PropTypes Uncontrolled Components Web Components Components and Props Composition vs Inheritance Conditional Rendering Forms Handling Events Installation Introducing JSX Lifting State Up Lists and Keys Rendering Elements State and Lifecycle Thinking in React

文字

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目的。

注意：仅限服务器。该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这样的项目，该项目为转码文本提供转换流。