React.lazy وSuspense — المكوّنات الكسولة
قسّم الشيفرة حسب المسار أو الودجة. حمّل المكوّنات عند الحاجة باستخدام React.lazy، واعرض واجهات Suspense البديلة لتبقى بقية الصفحة تفاعلية.
React.lazy وSuspense — المكوّنات الكسولة درس مجاني في React Academy على CoddyKit. هذا هو الدرس 1 من أصل 3. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في React Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة React Academy 3 دروس في المجموع.
لماذا تقسيم الشيفرة؟
الهدف: أطلق التطبيق بسرعة أكبر بتحميل الشيفرة عند الحاجة فقط.
- استخدم React.lazy للمكوّنات عند الطلب
- استخدم واجهة Suspense البديلة أثناء التحميل
- حافظ على قابلية استخدام بقية واجهة المستخدم
الأجزاء المناسبة للتقسيم
- المسارات والشاشات الكبيرة
- اللوحات قليلة الاستخدام (المخططات والمحررات)
- الأدوات الثقيلة التابعة لجهات خارجية
اختر حدودًا صغيرة بالقرب من الأجزاء البطيئة.
مكوّن أساسي محمّل تحميلًا كسولًا
حمّل مكوّنًا تحميلًا كسولًا عندما يطلبه المستخدم؛ ويعرض Suspense رسالة صغيرة في أثناء ذلك.
<div id="root"></div>
تقسيم بأسلوب المسارات
قسّم علامة التبويب Details وحدها. تبقى القائمة جاهزة، ويعزل الحد المنطقة البطيئة.
<div id="root"></div>
التحميل المسبق مقابل التحميل الكسول عند الطلب
فكّر في التحميل المسبق عندما يمكنك توقّع نية المستخدم (مثل التمرير فوق العنصر أو التركيز عليه). حافظ على صغر الحدود وخفة الواجهات البديلة.
- حمّل مسبقًا عند التمرير فوق العنصر
- حمّل تحميلًا كسولًا عند الطلب
- اعرض هياكل مؤقتة بدلًا من مؤشرات تحميل تغطي الصفحة بأكملها
مشكلات ونصائح
- تجنّب وضع حد واحد ضخم في جذر التطبيق
- لا تُخفِ تغيّرات التخطيط باستخدام الواجهات البديلة؛ بل طابق الحجم
- قسّم الشيفرة وفق مسارات المستخدم، لا وفق كل ملف صغير
اختبار الغرض من Lazy وSuspense
مراجعة
مراجعة: قسّم المسارات والأدوات الثقيلة باستخدام React.lazy، وغلّفها داخل Suspense، واستخدم واجهات بديلة صغيرة حتى تبقى بقية واجهة المستخدم سريعة الاستجابة.
الأسئلة الشائعة
هل درس «React.lazy وSuspense — المكوّنات الكسولة» مجاني؟
نعم — نص درس «React.lazy وSuspense — المكوّنات الكسولة» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة React Academy، انتقل إلى CoddyKit PRO. تتضمن دورة React Academy 3 دروس في المجموع.
ماذا ستتعلم في «React.lazy وSuspense — المكوّنات الكسولة»؟
قسّم الشيفرة حسب المسار أو الودجة. حمّل المكوّنات عند الحاجة باستخدام React.lazy، واعرض واجهات Suspense البديلة لتبقى بقية الصفحة تفاعلية. تتمرن على React Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ React Academy؟
لا تُشترط خبرة سابقة. React Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 1 من أصل 3.
كم من الوقت يستغرق درس «React.lazy وSuspense — المكوّنات الكسولة»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس React Academy هذا؟
نعم. كل درس في React Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- React.lazy وSuspense — المكوّنات الكسولة
- التقسيم حسب المسار وعلى مستوى المكوّن
- الحزم والتخزين المؤقت وتلميحات التحميل المسبق