الفرق بين المراجعتين ل"React/react dom server"
Kinan-mawed (نقاش | مساهمات) (أنشأ الصفحة ب'<noinclude>{{DISPLAYTITLE:الكائن ReactDOMServer}}</noinclude>') |
Kinan-mawed (نقاش | مساهمات) |
||
| سطر 1: | سطر 1: | ||
<noinclude>{{DISPLAYTITLE:الكائن ReactDOMServer}}</noinclude> | <noinclude>{{DISPLAYTITLE:الكائن ReactDOMServer}}</noinclude> | ||
| + | يُمكّننا الكائن <code>ReactDOMServer</code> من تصيير المكونات إلى تمثيل ثابت، وهو يُستخدَم بشكل نموذجي مع خادم Node.<syntaxhighlight lang="javascript"> | ||
| + | // ES وحدات | ||
| + | import ReactDOMServer from 'react-dom/server'; | ||
| + | // CommonJS | ||
| + | var ReactDOMServer = require('react-dom/server'); | ||
| + | |||
| + | </syntaxhighlight> | ||
| + | |||
| + | = لمحة عامة = | ||
| + | يُمكِن استخدام التوابع التالية في بيئة الخادم وبيئة المتصفح: | ||
| + | * <code>renderToString()</code>. | ||
| + | * <code>renderToStaticMarkup()</code>. | ||
| + | تعتمد هذه التوابع الإضافية على الحزمة (stream) والتي لا تتوفر إلا على الخادم ولا تعمل على المتصفح. | ||
| + | * <code>renderToNodeStream()</code>. | ||
| + | * <code>renderToStaticNodeStream()</code>. | ||
| + | |||
| + | = مرجع = | ||
| + | |||
| + | === <code>renderToString()</code> === | ||
| + | <syntaxhighlight lang="javascript"> | ||
| + | ReactDOMServer.renderToString(element) | ||
| + | |||
| + | </syntaxhighlight>يُصيِّر عنصر React إلى تمثيل HTML البدئي له. ستعيد React سلسلة HTML نصية. بإمكانك استخدام هذا التابع لتوليد HTML على الخادم وإرساله عند أول طلب وذلك لتحميل أسرع للصفحات وللسماح لمحركات البحث بإضافة صفحاتك بهدف تحسين تهيئة موقعك لمحركات البحث SEO (اختصارا للعبارة Search Engine Optimization). | ||
| + | |||
| + | إن استدعيت التابع <code>ReactDOM.hydrate()</code> على عقدة تمتلك تمثيل التصيير على الخادم، فستحافظ React عليها وستُرفِق إليها معالجات الأحداث فقط، ممّا يسمح لك بالحصول على تجربة تحميل أولي سريع جدًّا للصفحات. | ||
| + | |||
| + | === <code>renderToStaticMarkup</code>() === | ||
مراجعة 20:08، 8 سبتمبر 2018
يُمكّننا الكائن ReactDOMServer من تصيير المكونات إلى تمثيل ثابت، وهو يُستخدَم بشكل نموذجي مع خادم Node.
// ES وحدات
import ReactDOMServer from 'react-dom/server';
// CommonJS
var ReactDOMServer = require('react-dom/server');
لمحة عامة
يُمكِن استخدام التوابع التالية في بيئة الخادم وبيئة المتصفح:
renderToString().renderToStaticMarkup().
تعتمد هذه التوابع الإضافية على الحزمة (stream) والتي لا تتوفر إلا على الخادم ولا تعمل على المتصفح.
renderToNodeStream().renderToStaticNodeStream().
مرجع
renderToString()
ReactDOMServer.renderToString(element)
يُصيِّر عنصر React إلى تمثيل HTML البدئي له. ستعيد React سلسلة HTML نصية. بإمكانك استخدام هذا التابع لتوليد HTML على الخادم وإرساله عند أول طلب وذلك لتحميل أسرع للصفحات وللسماح لمحركات البحث بإضافة صفحاتك بهدف تحسين تهيئة موقعك لمحركات البحث SEO (اختصارا للعبارة Search Engine Optimization).
إن استدعيت التابع ReactDOM.hydrate() على عقدة تمتلك تمثيل التصيير على الخادم، فستحافظ React عليها وستُرفِق إليها معالجات الأحداث فقط، ممّا يسمح لك بالحصول على تجربة تحميل أولي سريع جدًّا للصفحات.