انتقل إلى محتوى الدرس

Dynamic Imports with React.lazy الاستيراد الكسول بدالة React.lazy

قلّص حجم الحزمة الأولية للتطبيق بتحميل المكونات الثقيلة عند الطلب عبر React.lazy، واعرض واجهات انتظار متماسكة بحدود Suspense وحافظ على سلاسة التفاعل بـ useTransition.
2 صفوف تعليمية
ReactJS
0 مشاهدة

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي

تجعل مكتبة React تقسيم المكونات عملية تصريحية بسيطة عبر الدالة lazy(load) المستوردة من حزمة react. بدلاً من الاستيراد الثابت، نمرر دالة تستدعي الاستيراد الديناميكي القياسي import("./ReportChart.jsx").

تُرجع عبارة الاستيراد الديناميكي وعداً (Promise) يُحلّ إلى وحدة برمجية تصدّر المكون كـ تصدير افتراضي (export default)، ولا تطلب React تحميل هذا الملف إطلاقاً حتى تحاول الواجهة رسم المكون لأول مرة.

الصف 2 معاينة حية