شرح صفوف ومحتوى الفقرة
التزم بأربع ممارسات احترافية عند تقسيم الحزم في مشاريع الإنتاج: قسّم عند الحدود الطبيعية الكبرى كاللوحات الثانوية والمحررات الثقيلة والشاشات المستقلة، وعرّف استيرادات lazy() دائماً في أعلى الملف، وصمّم بدائل انتظار مطابقة لأبعاد المكون لمنع القفز البصري، واحمِ الحزم الكسولة بحدود عزل الأخطاء التي سنتعلمها في الدرس القادم تحسباً لانقطاع الشبكة. يلخص الجدول التالي تكامل هذه الأدوات:
| الأداة في React | المسؤولية الأساسية | الحالة المثلى في الواجهة |
|---|---|---|
| الدالة React.lazy | فصل المكون في حزمة مستقلة تُحمل عند الطلب | المخططات الثقيلة والمحررات المتقدمة والشاشات الفرعية |
| مكون الانتظار Suspense | عرض واجهة بديلة مؤقتة ريثما تجهز الحزمة | إحاطة مناطق المحتوى مع إبقاء الرأس والقائمة ظاهرين |
| خطاف useTransition | تصنيف تحديث الحالة كتبديل غير عاجل قابل للمقاطعة | التنقل السلس بين التبويبات دون إخفاء المحتوى الحالي |
| خطاف useDeferredValue | تأجيل القيمة المشتقة لإبقاء حقل الإدخال لحظياً | البحث الفوري السلس داخل قوائم وجداول كبيرة |
ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
تعلمت في هذا الدرس أثر تضخم الحزم على بدء التشغيل، وكيفية تقسيم المكونات الثقيلة عند الطلب عبر React.lazy، وإدارة حدود الانتظار بمكون Suspense، والحفاظ على استجابة الواجهة عبر useTransition وuseDeferredValue. الخطوة التالية: انتقل الآن إلى الدرس رقم 46 «العرض عبر البوابات createPortal وحدود عزل الأخطاء» لمواصلة البناء التراكمي المتدرج في مسار React الحديث.