ReactDOMServer

ReactDOMServer obyekti sizə komponentləri statik markapa render etməyə imkan yaradır. Adətən, bu Node serveri ilə işlənilir:

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

İcmal

Aşağıdakı funksiyalar brauzerdə və serverdə işlənilə bilər:

Aşağıda göstərilən funksiyalar yalnız serverdə mövcud olan stream paketindən asılıdırlar. Bu səbəbdən bu metodlar brauzerdə işləməyəcəklər.


Arayış

renderToString()

ReactDOMServer.renderToString(element)

React elementini ilkin HTML-ə render edin. React, HTML mətni qaytaracaq. Siz bu funksiya ilə HTML-i serverdə yaradıb markapı ilkin sorğuda göndərə bilərsiniz. Bu səhifələrin daha tez yüklənməsinə və SEO üçün axtarış qurğularının səhifələrdə gəzişməsinə imkan yaradır.

Əgər siz ReactDOM.hydrate() funksiyasını serverdə render edilmiş markap olan DOM noduna çağırsanız, React mövcud markapı saxlayacaq və yalnız hadisə icləyicilərini qoşacaq. Bu sizə daha performanslı ilk yüklənmiş təcrübə verəcək.


renderToStaticMarkup()

ReactDOMServer.renderToStaticMarkup(element)

renderToString-ə bənzəyir amma bu React-in daxili istifadə etdiyi data-reactroot kimi əlavə DOM atributları yaratmır. Bu funksiya əlavə atributları silməklə nəticənin ölçüsünü azaldır. Bu səbəbdən bu funksiya React-i sadə statik səhifə generatoru kimi işlətmək üçün fayadalıdır.

Əgər siz markapi interaktiv etmək üçün React-i klientdə işlədirsinizsə, bu funksiyadan istifadə etməyin. Bunun əvəzinə, serverdə renderToString və klientdə ReactDOM.hydrate() işlədin.


renderToNodeStream()

ReactDOMServer.renderToNodeStream(element)

React elementini ilkin HTML-ə render edin. HTML mətni çıxaran oxunan axın qaytarır. Bu axının HTML nəticəsi ReactDOMServer.renderToString-in qaytaracağı HTML nəticəsi ilə tam eynidir. Siz bu funksiya ilə HTML-i serverdə yaradıb markapı ilkin sorğuda göndərə bilərsiniz. Bu səhifələrin daha tez yüklənməsinə və SEO üçün axtarış qurğularının səhifələrdə gəzişməsinə imkan yaradır.

Əgər siz ReactDOM.hydrate() funksiyasını server render edilmiş markap olan DOM noduna çağırsanız, React mövcud markapı saxlayacaq və yalnız hadisə icləyicilərini qoşacaq. Bu sizə daha performanslı ilk yüklənmiş təcrübə verəcək.

Qeyd:

Yalnız serverdə. Bu API brauzerdə mövcud deyil.

Bu funksiyadan qaytarılan axın utf-8 ilə kodlaşdırılmış bayt axını qaytaracaq. Əgər sizə başqa kodlaşdırmada olan axın lazımdırsa, mətnləri transkodlaşdırmaq üçün çevirmə axınları ilə təmin edən iconv-lite kitabxanasından istifadə edin.


renderToStaticNodeStream()

ReactDOMServer.renderToStaticNodeStream(element)

renderToNodeStream-ə bənzəyir amma bu React-in daxili istifadə etdiyi data-reactroot kimi əlavə DOM atributları yaratmır. Bu funksiya əlavə atributları silməklə nəticənin ölçüsünü azaldır. Bu səbəbdən bu funksiya React-i sadə statik səhifə generatoru kimi işlətmək üçün fayadalıdır.

Bu axının HTML nəticəsi ReactDOMServer.renderToStaticMarkup-ın qataracağı HTML nəticəsi ilə tam eynidir.

Əgər siz markapi interaktiv etmək üçün React-i klientdə işlədirsinizsə, bu funksiyadan istifadə etməyin. Bunun əvəzinə, serverdə renderToNodeStream və klientdə ReactDOM.hydrate() işlədin.

Qeyd:

Yalnız serverdə. Bu API brauzerdə mövcud deyil.

Bu funksiyadan qaytarılan axın utf-8 ilə kodlaşdırılmış bayt axını qaytaracaq. Əgər sizə başqa kodlaşdırmada olan axın lazımdırsa, mətnləri transkodlaşdırmaq üçün çevirmə axınları ilə təmin edən iconv-lite kitabxanasından istifadə edin.