ReactDOMServer對(duì)象使您可以將組件呈現(xiàn)為靜態(tài)標(biāo)記。通常，它在節(jié)點(diǎn)服務(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將返回一個(gè)HTML字符串。您可以使用此方法在服務(wù)器上生成HTML，并在初始請(qǐng)求時(shí)發(fā)送標(biāo)記以加快頁面加載速度，并允許搜索引擎抓取您的頁面以實(shí)現(xiàn)SEO目的。

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

renderToStaticMarkup()

ReactDOMServer.renderToStaticMarkup(element)

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

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

renderToNodeStream()

ReactDOMServer.renderToNodeStream(element)

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

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

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

renderToStaticNodeStream()

ReactDOMServer.renderToStaticNodeStream(element)

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

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

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

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