React.lazy React.lazy للتحميل الكسول

آخر تحديث: 2026-11-03

React.lazy React.lazy للتحميل الكسول

React.lazy(() => import('./Page')) يحوّل مكوّنًا إلى حزمة تُنزَّل «عند الحاجة»، ويعرض Suspense واجهة بديلة أثناء التنزيل. فالرسم الأول يَشحن كود الصفحة الرئيسية فقط، وتُجلب بقية المسارات عند الطلب، وهي الضربة الأولى الكبرى لتسريع تطبيق الصفحة الواحدة وأسهلها قياسًا.

ℹ️ ملاحظة يحوّل المحرّر JSX إلى JavaScript ويعرض الواجهة الحقيقية داخل بيئة معزولة؛ تُركَّب المكوّنات تلقائياً دون استدعاء render يدوي.

📝 الصيغة

import { lazy, Suspense } from 'react'

const AdminPage = lazy(() => import('./AdminPage'))  // dynamic import splits the bundle

<Suspense fallback={<p>Loading…</p>}>
  <AdminPage />   {/* the chunk is requested at render time and replaces the fallback once ready */}
</Suspense>

⚙️ المعاملات

القيمة المرجعة：lazy(factory) يُعيد مكوّنًا جديدًا: تبدأ الوحدة بالتحميل عند أول رسم، وحتى اكتمالها يرمي لأقرب حدود Suspense ليعرض بديله.

▶ مثال

المثال يعمل مباشرة: يُعرض تلقائياً عند التوسيع وتظهر التعديلات فوراً.

الناتج：

النقر على الزر يعرض بديل «جارٍ التنزيل» 1.2 ثانية ثم يبدّل إلى المحتوى المُحمّل — انتقال Suspense من البديل إلى المكوّن الكسول (عرض توضيحي محاكى).

💡 النقاط الأساسية

🏷️ المزيد من التوجيه والحالة

💡 حالات ذات صلة

📚 دروس ذات صلة

❓ الأسئلة الشائعة

فريق Web-Tutorial التقني

منصة دروس برمجية يديرها عدة مطورين. كل درس يتم كتابته ومراجعته بواسطة مطورين متخصصين في المجال. نعمل على ضمان دقة وموثوقية المحتوى — إذا لاحظت أي مشكلة، فيرجى إخبارنا.

من نحن