ReactDOMServer

A ReactDOMServer objektum komponensek statikus sémává való renderelését teszi lehetővé. Tipikusan egy Node szerveren használt:

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

Áttekintés

A következő metódusok mind böngésző-, és szerverkörnyezetben is használhatóak:

Ezek a további metódusok függenek a stream csomagtól, tehát csak a szerveren elérhetőek és nem fognak működni a böngészőben.


Referencia

renderToString()

ReactDOMServer.renderToString(element)

Egy React elemet renderel annak kezdetleges HTML formájába. A React egy HTML sztringet ad vissza. Ezzel a metódussal HTML-t tudsz generálni a szerveren és ezt a sémát le tudod küldeni a kezdetleges lekérésben egy gyorsabb oldalbetöltésért, valamint hogy lehetővé tedd az oldalad vizsgálatát keresőmotoroknak SEO optimalizálás céljából.

Ha a ReactDOM.hydrate() metódust egy olyan csomóponton hívod meg, ami már rendelkezik ezzel a szerveroldali sémával, a React megőrzi azt és csak eseménykezelőket csatol hozzá, ezzel lehetővé téve a gyors első alkalombeli betöltési élményt.


renderToStaticMarkup()

ReactDOMServer.renderToStaticMarkup(element)

A renderToString-hez hasonló, kivéve, hogy nem hoz létre extra DOM attribútumokat - mint például a data-reactroot - amiket a React belsőleg használ. Ez akkor hasznos, ha a Reactet egy szimpla statikus oldalgenerátorként akarod használni, mivel az extra attribútumok lecsupaszításával pár bájtot meg lehet takarítani.

Ha a Reactet a kliens oldalon tervezed használni, hogy interaktívvá tedd a sémát, ne használd ezt a metódust. Helyette használd a renderToString-t a szerveren és a ReactDOM.hydrate()-t a kliensen.


renderToNodeStream()

ReactDOMServer.renderToNodeStream(element)

Egy React elemet renderel annak kezdetleges HTML formájába. Egy Readable stream-et ad vissza, ami pedig egy HTML sztringet. A folyam HTML kimenete tökéletesen megegyezik azzal, amit a ReactDOMServer.renderToString adna vissza. Ezzel a metódussal HTML-t tudsz generálni a szerveren és ezt a sémát le tudod küldeni a kezdetleges lekérésben egy gyorsabb oldalbetöltésért, valamint hogy lehetővé tedd az oldalad vizsgálatát keresőmotoroknak SEO optimalizálás céljából.

Ha a ReactDOM.hydrate() metódust egy olyan csomóponton hívod meg, ami már rendelkezik ezzel a szerveroldali sémával, a React megőrzi azt és csak eseménykezelőket csatol hozzá, ezzel lehetővé téve a gyors első alkalombeli betöltési élményt.

Megjegyzés:

Csakis a szerveren működik. Ez az API nem elérhető a böngészőben.

Az ezen metódus által visszaadott folyam (stream) egy utf-8-ban kódolt bájtfolyamot ad vissza. Ha a folyamra egy másik kódolási formában van szükséged, nézz utána projekteknek mint például az iconv-lite, ami folyamok transzformálását teszi lehetővé szövegek transzkódolásához.


renderToStaticNodeStream()

ReactDOMServer.renderToStaticNodeStream(element)

A renderToNodeStream-hez hasonló, kivéve, hogy nem hoz létre extra DOM attribútumokat - mint például a data-reactroot - amiket a React belsőleg használ. Ez akkor hasznos, ha a Reactet egy szimpla statikus oldalgenerátorként akarod használni, mivel az extra attribútumok lecsupaszításával pár bájtot meg lehet takarítani.

A folyam HTML kimenete tökéletesen megegyezik azzal, amit a ReactDOMServer.renderToStaticMarkup adna vissza.

Ha a Reactet a kliens oldalon tervezed használni, hogy interaktívvá tedd a sémát, ne használd ezt a metódust. Helyette használd a renderToNodeStream-t a szerveren és a ReactDOM.hydrate()-t a kliensen.

Megjegyzés:

Csakis a szerveren működik. Ez az API nem elérhető a böngészőben.

Az ezen metódus által visszaadott folyam (stream) egy utf-8-ban kódolt bájtfolyamot ad vissza. Ha a folyamra egy másik kódolási formában van szükséged, nézz utána projekteknek mint például az iconv-lite, ami folyamok transzformálását teszi lehetővé szövegek transzkódolásához.

Is this page useful?Az oldal szerkesztése