ReactDOMServer對象使您可以將組件呈現(xiàn)為靜態(tài)標記。通常，它在節(jié)點服務(wù)器上使用：

// ES modulesimport ReactDOMServer from 'react-dom/server';// CommonJSvar ReactDOMServer = require('react-dom/server');

概觀

以下方法可以在服務(wù)器和瀏覽器環(huán)境中使用：

• renderToString()

• renderToStaticMarkup()

這些附加方法取決于僅在服務(wù)器上可用的package（stream），并且在瀏覽器中不起作用。

• renderToNodeStream()

• renderToStaticNodeStream()

參考

renderToString()

ReactDOMServer.renderToString(element)

將React元素渲染為其初始HTML。React將返回一個HTML字符串。您可以使用此方法在服務(wù)器上生成HTML，并在初始請求時發(fā)送標記以加快頁面加載速度，并允許搜索引擎抓取您的頁面以實現(xiàn)SEO目的。

如果你調(diào)用ReactDOM.hydrate()一個已經(jīng)有了這個服務(wù)器渲染標記的節(jié)點，React將會保留它并且只附加事件處理程序，這樣你就可以擁有非常高效的第一次加載體驗。

renderToStaticMarkup()

ReactDOMServer.renderToStaticMarkup(element)

與renderToString此類似，除了這不會創(chuàng)建React在內(nèi)部使用的額外DOM屬性，例如data-reactroot。如果你想使用React作為一個簡單的靜態(tài)頁面生成器，這很有用，因為刪除額外的屬性可以節(jié)省一些字節(jié)。

如果您打算在客戶端上使用React來交互標記，請不要使用此方法。相反，renderToString在服務(wù)器和ReactDOM.hydrate()客戶端上使用。

renderToNodeStream()

ReactDOMServer.renderToNodeStream(element)

將React元素渲染為其初始HTML。返回一個輸出HTML字符串的可讀流。該流輸出的HTML完全等于ReactDOMServer.renderToString返回的內(nèi)容。您可以使用此方法在服務(wù)器上生成HTML，并在初始請求時發(fā)送標記以加快頁面加載速度，并允許搜索引擎抓取您的頁面以實現(xiàn)SEO目的。

如果你調(diào)用ReactDOM.hydrate()一個已經(jīng)有了這個服務(wù)器渲染標記的節(jié)點，React將會保留它并且只附加事件處理程序，這樣你就可以擁有非常高效的第一次加載體驗。

注意：僅限服務(wù)器。該API在瀏覽器中不可用。從此方法返回的流將返回以utf-8編碼的字節(jié)流。如果您需要另一種編碼的流，請查看像iconv-lite這樣的項目，該項目為轉(zhuǎn)碼文本提供轉(zhuǎn)換流。

renderToStaticNodeStream()

ReactDOMServer.renderToStaticNodeStream(element)

與renderToNodeStream此類似，除了這不會創(chuàng)建React在內(nèi)部使用的額外DOM屬性，例如data-reactroot。如果你想使用React作為一個簡單的靜態(tài)頁面生成器，這很有用，因為刪除額外的屬性可以節(jié)省一些字節(jié)。

該流輸出的HTML完全等于ReactDOMServer.renderToStaticMarkup返回的內(nèi)容。

如果您打算在客戶端上使用React來交互標記，請不要使用此方法。相反，renderToNodeStream在服務(wù)器和ReactDOM.hydrate()客戶端上使用。

注意：僅限服務(wù)器。該API在瀏覽器中不可用。從此方法返回的流將返回以utf-8編碼的字節(jié)流。如果您需要另一種編碼的流，請查看像iconv-lite這樣的項目，該項目為轉(zhuǎn)碼文本提供轉(zhuǎn)換流。