الفرق بين المراجعتين لصفحة: «React/react dom server»
Kinan-mawed (نقاش | مساهمات) لا ملخص تعديل |
|||
| (3 مراجعات متوسطة بواسطة مستخدمين اثنين آخرين غير معروضة) | |||
| سطر 1: | سطر 1: | ||
<noinclude>{{DISPLAYTITLE:الكائن ReactDOMServer}}</noinclude> | <noinclude>{{DISPLAYTITLE:الكائن <code>ReactDOMServer</code> في React}}</noinclude> | ||
يُمكّننا الكائن <code>ReactDOMServer</code> من تصيير المكونات إلى تمثيل ثابت، وهو يُستخدَم بشكل نموذجي مع خادم Node.<syntaxhighlight lang="javascript"> | يُمكّننا الكائن <code>ReactDOMServer</code> من تصيير المكونات إلى تمثيل ثابت، وهو يُستخدَم بشكل نموذجي مع خادم Node.<syntaxhighlight lang="javascript"> | ||
// ES وحدات | // ES وحدات | ||
| سطر 26: | سطر 26: | ||
إن استدعيت التابع <code>[[React/react dom#hydrate.28.29.E2.80.8E|ReactDOM.hydrate()]]</code> على عقدة تمتلك تمثيل التصيير على الخادم، فستحافظ React عليها وستُرفِق إليها معالجات الأحداث فقط، ممّا يسمح لك بالحصول على تجربة تحميل أولي سريع جدًّا للصفحات. | إن استدعيت التابع <code>[[React/react dom#hydrate.28.29.E2.80.8E|ReactDOM.hydrate()]]</code> على عقدة تمتلك تمثيل التصيير على الخادم، فستحافظ React عليها وستُرفِق إليها معالجات الأحداث فقط، ممّا يسمح لك بالحصول على تجربة تحميل أولي سريع جدًّا للصفحات. | ||
=== <code>renderToStaticMarkup</code> | === <code>renderToStaticMarkup()</code> === | ||
<syntaxhighlight lang="javascript"> | <syntaxhighlight lang="javascript"> | ||
ReactDOMServer.renderToStaticMarkup(element) | ReactDOMServer.renderToStaticMarkup(element) | ||
| سطر 59: | سطر 59: | ||
يُعيد تدفق البيانات الناتج عن هذا التابع تدفّق بيانات مُرمَّز بصيغة <code>utf-8</code>. إن أردت في الحصول على ترميز آخر فألقِ نظرة على مشروع مثل <code>[https://www.npmjs.com/package/iconv-lite iconv-lite]</code> والذي يُزوّدنا بطريقة لتحويل تدفّق البيانات إلى ترميز آخر. | يُعيد تدفق البيانات الناتج عن هذا التابع تدفّق بيانات مُرمَّز بصيغة <code>utf-8</code>. إن أردت في الحصول على ترميز آخر فألقِ نظرة على مشروع مثل <code>[https://www.npmjs.com/package/iconv-lite iconv-lite]</code> والذي يُزوّدنا بطريقة لتحويل تدفّق البيانات إلى ترميز آخر. | ||
== انظر أيضًا == | |||
* [[React/react api|واجهة برمجة التطبيق (API) ذات المستوى الأعلى في React]] | |||
* [[React/react component|الصنف React.Component]] | |||
* [[React/react dom|الكائن ReactDOM]] | |||
* [[React/dom elements|عناصر DOM]] | |||
* [[React/events|الأحداث المصطنعة (Synthetic Events)]] | |||
* [[React/test utils|أدوات الاختبار]] | |||
* [[React/shallow renderer|التصيير السطحي (Shallow Rendering)]] | |||
* [[React/test renderer|مصير الاختبار (Test Renderer)]] | |||
* [[React/javascript environment requirements|متطلبات بيئة JavaScript]] | |||
==مصادر== | ==مصادر== | ||
*[https://reactjs.org/docs/react-dom-server.html صفحة الكائن ReactDOMServer في توثيق React الرسمي]. | *[https://reactjs.org/docs/react-dom-server.html صفحة الكائن ReactDOMServer في توثيق React الرسمي]. | ||
[[تصنيف:React]] | [[تصنيف:React]] | ||
[[تصنيف:React API Reference]] | |||
المراجعة الحالية بتاريخ 08:00، 16 أغسطس 2019
يُمكّننا الكائن ReactDOMServer من تصيير المكونات إلى تمثيل ثابت، وهو يُستخدَم بشكل نموذجي مع خادم Node.
// ES وحدات
import ReactDOMServer from 'react-dom/server';
// CommonJS
var ReactDOMServer = require('react-dom/server');
لمحة عامة
يُمكِن استخدام التوابع التالية في بيئة الخادم وبيئة المتصفح:
تعتمد هذه التوابع الإضافية على الحزمة (stream) والتي لا تتوفر إلا على الخادم ولا تعمل على المتصفح.
مرجع
renderToString()
ReactDOMServer.renderToString(element)
يُصيِّر عنصر React إلى تمثيل HTML البدئي له. ستعيد React سلسلة HTML نصية. بإمكانك استخدام هذا التابع لتوليد HTML على الخادم وإرساله عند أول طلب وذلك لتحميل أسرع للصفحات وللسماح لمحركات البحث بإضافة صفحاتك بهدف تحسين تهيئة موقعك لمحركات البحث SEO (اختصارا للعبارة Search Engine Optimization).
إن استدعيت التابع ReactDOM.hydrate() على عقدة تمتلك تمثيل التصيير على الخادم، فستحافظ React عليها وستُرفِق إليها معالجات الأحداث فقط، ممّا يسمح لك بالحصول على تجربة تحميل أولي سريع جدًّا للصفحات.
renderToStaticMarkup()
ReactDOMServer.renderToStaticMarkup(element)
مشابه للتابع renderToString عدا أنّه لا يُنشِئ خاصيات DOM إضافية لتستخدمها React داخليًّا، مثل data-reactroot. يفيدنا ذلك إن أردنا استخدام React كمولد لصفحات ثابتة بسيطة، حيث أنّ إزالة الخاصيات الإضافية توفر علينا بعض البايتات.
إن كنت تخطط لاستخدام React من جانب العميل لجعل تمثيل HTML متفاعلًا، فلا تستخدم هذا التابع، بل استخدم بدلًا منه renderToString من جانب الخادم و ReactDOM.hydrate() من جانب العميل.
renderToNodeStream()
ReactDOMServer.renderToNodeStream(element)
يُصيِّر عنصر React إلى تمثيل HTML البدئي له. يُعيد تدفّق بيانات (stream) قابل للقراءة والذي ينتج عنه سلسلة نصيّة في HTML. يكون ناتج HTML الصادر عن تدفّق البيانات مساويًا تمامًا للقيمة التي يعيدها التابع ReactDOMServer.renderToString. بإمكانك استخدام هذا التابع لتوليد HTML على الخادم وإرساله عند أول طلب وذلك لتحميل أسرع للصفحات وللسماح لمحركات البحث بإضافة صفحاتك بهدف تحسين تهيئة موقعك لمحركات البحث SEO (اختصارا للعبارة Search Engine Optimization).
إن استدعيت التابع ReactDOM.hydrate() على عقدة تمتلك تمثيل التصيير على الخادم، فستحافظ React عليها وستُرفِق إليها معالجات الأحداث فقط، ممّا يسمح لك بالحصول على تجربة تحميل أولي سريع جدًّا للصفحات.
ملاحظة: تتوفر واجهة برمجة التطبيق هذه فقط على الخادم ولا تتوفر على المتصفح.
يُعيد تدفق البيانات الناتج عن هذا التابع تدفّق بيانات مُرمَّز بصيغة utf-8. إن أردت في الحصول على ترميز آخر فألقِ نظرة على مشروع مثل iconv-lite والذي يُزوّدنا بطريقة لتحويل تدفّق البيانات إلى ترميز آخر.
renderToStaticNodeStream()
ReactDOMServer.renderToStaticNodeStream(element)
مشابه للتابع renderToNodeStream عدا أنّه لا يُنشِئ خاصيات DOM إضافية لتستخدمها React داخليًّا، مثل data-reactroot. يفيدنا ذلك إن أردنا استخدام React كمولد لصفحات ثابتة بسيطة، حيث أنّ إزالة الخاصيات الإضافية توفر علينا بعض البايتات.
يكون ناتج HTML الصادر عن تدفّق البيانات مساويًا تمامًا للقيمة التي يعيدها التابع renderToNodeStream.
إن كنت تخطط لاستخدام React من جانب العميل لجعل تمثيل HTML متفاعلًا، فلا تستخدم هذا التابع، بل استخدم بدلًا منه renderToString من جانب الخادم و ReactDOM.hydrate() من جانب العميل.
ملاحظة: تتوفر واجهة برمجة التطبيق هذه فقط على الخادم ولا تتوفر على المتصفح.
يُعيد تدفق البيانات الناتج عن هذا التابع تدفّق بيانات مُرمَّز بصيغة utf-8. إن أردت في الحصول على ترميز آخر فألقِ نظرة على مشروع مثل iconv-lite والذي يُزوّدنا بطريقة لتحويل تدفّق البيانات إلى ترميز آخر.
انظر أيضًا
- واجهة برمجة التطبيق (API) ذات المستوى الأعلى في React
- الصنف React.Component
- الكائن ReactDOM
- عناصر DOM
- الأحداث المصطنعة (Synthetic Events)
- أدوات الاختبار
- التصيير السطحي (Shallow Rendering)
- مصير الاختبار (Test Renderer)
- متطلبات بيئة JavaScript