الحل: إنشاء عارض مقالات متدفقة مع خاصية التشويق
يستخدم تطبيق عارض المقالات الذي يعتمد على البث المباشر أولاً Suspense لعرض الشريط الجانبي والمعاينة على الفور، وبث النص الكامل في حدود متداخلة، ويتضمن حدود خطأ مع إعادة المحاولة بالإضافة إلى لوحة مساعدة كسولة يتم تحميلها مسبقًا عند التمرير/التركيز.
حل
إليكم تطبيق عارض المقالات الذي يعتمد على البث المباشر أولاً، والذي يتميز بذاكرة تخزين مؤقتة قائمة على الموارد، وحدود تعليق متداخلة للعرض التدريجي، وحدود خطأ مع استرداد قائم على إعادة المحاولة، ولوحة مساعدة يتم تحميلها بشكل كسول مع التحميل المسبق القائم على النية:
الهدف مفتاح هو ضمان أن كل عملية إيداع تمثل حالة واجهة مستخدم كاملة وقابلة للاستخدام، حتى أثناء حل المناطق الأبطأ.
توضيح
إليكم شرح الكود أعلاه:
في
App.jsملف:السطر 8: يُنشئ
selectedIdالولاية. المقالة الافتراضية هي"a-101".setSelectedIdيقوم بتحديث الاختيارات.الأسطر من 11 إلى 15: تقوم بعرض العنوان:
السطر 13: عنوان التطبيق
السطر 14: مساعدة زر التبديل / نقطة دخول اللوحة
السطر 17: حدود التشويق الخارجي:
إذا توقف أي شيء داخل التطبيق قبل أن تصبح واجهة المستخدم جاهزة، فاعرض
<ShellSkeleton />.
الأسطر 18-23: منطقة الشريط الجانبي:
السطر 20: حدود التشويق المتداخلة للشريط الجانبي فقط.
السطر 21:
ArticleListيستلم:selectedIdلتسليط الضوء على العنصر النشط ...