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

Purpose of React StrictMode وظيفة غلاف الوضع الصارم

ركّب تطبيق React الحديث عبر دالة createRoot، وافحص نقاء المكونات أثناء التطوير بغلاف StrictMode، واستخدم إضافة React Developer Tools لتشخيص الأخطاء بمهارة.
4 صفوف تعليمية
ReactJS
2 مشاهدة

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

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

عندما تفتح ملف src/main.jsx في أي مشروع حديث ستجد المكون الجذري محاطاً بغلاف <StrictMode> المستورد من حزمة react. لا يضيف الوضع الصارم أي عنصر مرئي لشجرة المتصفح، بل يعمل كحارس جودة أثناء التطوير فقط ليفحص نقاء الدوال، ويكشف نسيان تنظيف المؤقتات، وينبهك مبكراً لأي واجهات برمجية متقادمة.

الصف 2 صورة توضيحية
مسار التركيب من عنصر div#root في الصفحة مروراً بدالة createRoot وحتى تغليف App داخل StrictMode
الصف 3 كود برمجي
HTML
import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';

function App() {
  return <p>Guarded by React StrictMode in Dev</p>;
}

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <App />
  </StrictMode>
);
الصف 4 ملاحظة هامة