تحليل مختصر لـ SuspenseList في React18 وما هو استخدامه

كيف تبدأ بسرعة مع VUE3.0: تعرف على

ماضي وحاضر Suspense.

ظهرت هذه الميزة في الإصدارات التاريخية من React. المرة الأولى كانت في الإصدار 16.6، الذي أصدر مكون Suspense الذي يدعم تقسيم التعليمات البرمجية. استخراج البيانات مدعوم الآن في الإصدار 16.9. يمكن للطلاب المهتمين الانتقال إلى changelog الخاص بـ React .

الاستخدام البسيط لـ Suspense

من قبل. نحن نستخدم فقط مثالًا لمراجعة المفهوم والاستخدام

// يتم تحميل هذا المكون ديناميكيًا const OtherComponent = React.lazy(() => import('./OtherComponent'));

الدالة ميكومبونينت () {
  يعود (
    <React.Suspense back={<Spinner />}>
      <ديف>
        <مكون آخر />
      </div>
    </رد فعل.تشويق>
  );
}

عندما لا يكون لدى مكون OtherComponent شروط عرض بعد، فسيتم استخدام المكون الذي تم تمريره بواسطة fallback للعرض المُجهز مسبقًا. المظاهر المحددة لنقص شروط العرض هنا هي أن وقت الحصول على البيانات طويل، وبنية المكون معقدة، وما إلى ذلك، لكننا لا نريد أن يؤثر ذلك على عرض الشاشة الأولى أو تهيئة التطبيق. مقالة Suspense السابقة لقد قدمته، لذلك لن أخوض في التفاصيل.

ما هو SuspenseList

الذي يمكن فهمه حرفيًا بسهولة، أي إذا كان هناك العديد من Suspense في الكود الخاص بنا، فكيف يمكننا التحكم في ترتيب العرض وطريقة العرض؟ لذلك، توفر لنا React رسميًا مكون SuspenseList .

<SuspenseList تكشف الطلب = "إلى الأمام">
  <التشويق الاحتياطي={'جارٍ التحميل...'}>
    <معرف صورة الملف الشخصي={1} />
  </تشويق>
  <التشويق الاحتياطي={'جارٍ التحميل...'}>
    <معرف صورة الملف الشخصي={2} />
  </تشويق>
  <التشويق الاحتياطي={'جارٍ التحميل...'}>
    <معرف صورة الملف الشخصي={3} />
  </تشويق>
  ...
</SuspenseList>

دعنا نقدم أولًا Props الوحيدتين لـ SuspenseList

revealOrder ترتيب التحميل Suspense الفرعية، والقيم الاختيارية هي forwards ، backwards together

• وتمثل forwards معًا نفس المستوى للخلف، بغض النظر عن سرعة الطلب، فإن العرض للخلف أولاً

• backwards عكس الأمام.

• ويعني together أن جميع المعلقات يتم عرضها في نفس الوقت عندما تكون جاهزة، بدلاً من عرضها واحدة تلو

tail العناصر التي تم إلغاء تحميلها في SuspenseList

افتراضيًا، سيعرض SuspenseList جميع العناصر الاحتياطية

• collapsed

• SuspenseList القائمة

ويعرض القائمة فقط.

لا يعرض المشروع الاحتياطي hidden أي معلومات

ملاحظة: يعمل SuspenseList فقط على Suspense أو SuspenseList للمستوى الفرعي المباشر. ، ولن تعمل على العقد الحفيدة.

دور SuspenseList

SuspenseList بإجراء تنسيق مركب لمجموعة من سلوكيات Suspense . على الرغم من أن العرض التوضيحي بسيط نسبيًا، إلا أننا غالبًا ما نستخدم Layout للتخطيط في مشروع كبير نسبيًا. خذ منصات الإدارة الوسطى والخلفية المشتركة لدينا والصفحة الرئيسية على الجانب C كمثال.

في الأنظمة الوسطى والخلفية، غالبًا ما نستخدم طريقة تخطيط الشريط العلوي + الشريط الجانبي + الصفحة الرئيسية. على هذا المستوى، تمارس الصناعة الحالية في الغالب إجراءات الواجهة الأمامية الدقيقة، مثل qiankun.js ، بما في ذلك. اكتشف فريق المؤلف مجموعة من أنظمة تنفيذ الواجهة الأمامية الصغيرة. إذا كنت في صفحة من الجانب C، فقد لا يكون من المناسب استخدام طريقة الواجهة الأمامية الصغيرة. إذا كانت هناك متطلبات لعرض كتل متعددة في الصفحة، فيمكنك استخدام SuspenseList و Suspense مع إمكانية الواجهة الخلفية لـ React. لتقديم SSR لتحقيق عرض كتلة مستقل بطريقة أكثر منهجية، وتأثيرات ترتيب التحميل والسلوك.