التحميل الكسول لمكوّنات النموذج (Lazy Loading Form Components)

الدرس 19 من 21 · دورة TanStack Form الكاملة · 1 دقيقة و44 ثانية

الفيديو الأصلي باللغة الإنجليزية. إذا تعذّر تشغيله هنا، شاهده على موقع المؤلف. التفريغ النصي العربي الكامل أدناه.

مستودع شيفرة هذا الدرس

الفرع: lazy-loading

[00:01] حتى الآن رائع. غير أنّه — في بعض الحالات — قد يكون لديك الكثير من مكوّنات النموذج ومكوّنات الحقول التي تعرّفها هنا في form.tsx. وفي هذه الحالة، إذا استوردتَ مكوّناتك هكذا، فستكون مضمَّنةً في حزمتِك في

[00:16] حزمة JavaScript لديك حتى لو لم تكن تستخدمها جميعًا في جميع نماذجك.

[00:22] فإذًا ما يمكننا فعله هو أننا نستورد هذه المكوّنات استيرادًا كسولًا (lazily) كي لا تكون مضمَّنةً في حزمة JavaScript لدينا. غير أنّها لن تُحمَّل إلا عندما تكون مطلوبةً فعلًا في نموذجٍ معيّنٍ نحاول

[00:35] عرضه. فإذًا يمكن عمل هذا ببساطة بدلًا من الاستيراد هكذا، يمكننا فقط أن نستورد lazy من React. إذًا نستورد lazy من React ثم يمكننا ببساطة أن نستورد مكوّناتنا استيرادًا كسولًا هكذا.

[00:50] فإذًا الشيء نفسه: TextInput، وSelect، وCheckbox، وSubmitButton. غير أنّنا نستورد باستخدام lazy ونركّبها بالطريقة نفسها. وعندما نفعل ذلك فسيلزمنا فقط أن نلفّ مكوّن النموذج لَدَينا بـ Suspense. فتذكّر — في

[01:06] app.tsx، وهذا هو المكان الذي نعرض فيه نموذج التسجيل لَدَينا. وبما أنّ لَدَينا هنا أشياء تُحمَّل كسولًا، فسيلزمنا أن نلفّه بـ Suspense كي يكون لَدَينا بديل تحميل (fallback) بينما تُحمَّل مكوّناتنا. فإذًا يمكننا

[01:19] استيراد Suspense. عذرًا، Suspense من React. لنلفّ نموذجنا به. ثم يمكننا أن نوفّر fallback. يمكنك أن تفعل أي شيء. أنا فقط سأضع، في هذه اللحظة، وسم p بالنصّ Loading هكذا.

[01:36] والآن إذا حدّثنا، فقد تجد في هذا — ربّما — أقلّ من ثانيةٍ من التحميل حتى تُحمَّل مكوّناتنا ثم يُعرض نموذجنا. لقد تمكّنّا