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