0Pricing
React Academy · درس

ما الذي يفعله StrictMode

افهموا الاستدعاء المزدوج وتحذيرات واجهات API المهملة أثناء التطوير

ما الذي يفعله StrictMode درس مجاني في React Academy على CoddyKit. هذا هو الدرس 1 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في React Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة React Academy 4 دروس في المجموع.

مرحباً

في هذا الدرس ستتعلّم وظيفة React.StrictMode أثناء التطوير، والتحذيرات التي يعرضها، وكيف يساعدك على كتابة شيفرة React أكثر أماناً.

ما هو StrictMode؟

StrictMode مكوّن خاص في React يغلّف جزءاً من شجرة المكوّنات ويمكّن عمليات تحقق إضافية **أثناء التطوير فقط**. ولا يؤثر إطلاقاً في إصدار الإنتاج.
import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <App />
  </StrictMode>
);

الاستدعاء المزدوج لدورة الحياة

في Strict Mode، يستدعي React دالة المكوّن وبعض أساليب دورة الحياة **مرتين** عمداً أثناء التطوير. يهدف ذلك إلى كشف الآثار الجانبية التي لم تُنظَّف بصورة صحيحة.

لماذا الاستدعاء المزدوج؟

يمكن لـ React 18 والإصدارات الأحدث إعادة تركيب المكوّنات مستقبلاً، مثلاً من أجل Fast Refresh وواجهة Offscreen API. يحاكي الاستدعاء المزدوج هذا السلوك أثناء التطوير، كي تكتشف أخطاء مثل تراكم الاشتراكات أو تنفيذ تعديلات DOM مرتين.

تركيب التأثير وإلغاء تركيبه وإعادة تركيبه

مع StrictMode في React 18، يُنفَّذ كل useEffect، ثم تُنفَّذ عملية التنظيف الخاصة به، ثم يُنفَّذ مرة أخرى عند التركيب الأولي. إذا كانت دالة التنظيف صحيحة، فلن يسبب التنفيذ المزدوج أي ضرر. وإذا تعطل تطبيقك، فهذا يعني أن التنظيف مفقود أو غير صحيح.
useEffect(() => {
  const id = setInterval(() => setTick(t => t + 1), 1000);
  return () => clearInterval(id); // cleanup required!
}, []);

اكتشاف واجهات API المهجورة

يحذّر StrictMode عندما تستخدم شيفرتك واجهات React المهجورة، مثل `componentWillMount` و`componentWillReceiveProps` والمراجع النصية. تظهر هذه التحذيرات في وحدة تحكّم المتصفح على شكل تحذيرات صفراء.

تحذير واجهة Context API القديمة

إذا كانت أي مكتبة خارجية تستخدم واجهة Context API القديمة (`childContextTypes` / `getChildContext`)، فسيصدر StrictMode تحذيراً. ويشير ذلك إلى ضرورة تحديث المكتبة لاستخدام واجهة `React.createContext` الحديثة.

آمن لتمكينه في التطبيقات الحالية

يمكنك تغليف جزء من شجرة المكوّنات فقط باستخدام StrictMode لتمكينه تدريجياً في تطبيق موجود. ابدأ بالأقسام الجديدة، ثم وسّع نطاقه كلما أصلحت التحذيرات.
function App() {
  return (
    <>
      <LegacyPart />  {/* not wrapped */}
      <StrictMode>
        <NewFeature />
      </StrictMode>
    </>
  );
}

لا اختلاف مرئي

لا يصيّر StrictMode أي واجهة مستخدم مرئية. إنه أداة تطوير فحسب. لن ترى أي عناصر إضافية في DOM — بل سترى تحذيرات إضافية في وحدة التحكّم وسلوك الاستدعاء المزدوج فقط.

تمكينه منذ اليوم الأول

أفضل ممارسة هي تمكين StrictMode منذ بداية المشروع. فإصلاح مشكلات الاستدعاء المزدوج مبكراً أقل تكلفة بكثير من اكتشافها لاحقاً عندما تصبح قاعدة الشيفرة كبيرة.

تحقّق سريعاً

ما الغرض من الاستدعاء المزدوج لدوال المكوّنات في React StrictMode؟

مراجعة

StrictMode أداة تطوير من دون تكلفة، تستدعي عمليات التصيير والتأثيرات مرتين لاكتشاف الشيفرة غير النقية، وتحذّر من واجهات API المهجورة، وتجهّز تطبيقك لميزات React المستقبلية.

التالي

الدرس التالي: **المكوّنات النقية وتجنّب الآثار الجانبية أثناء التصيير** — ستتعلّم كتابة دوال تصيير خالية من التعديلات والقراءات الخارجية.

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

هل درس «ما الذي يفعله StrictMode» مجاني؟

نعم — نص درس «ما الذي يفعله StrictMode» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة React Academy، انتقل إلى CoddyKit PRO. تتضمن دورة React Academy 4 دروس في المجموع.

ماذا ستتعلم في «ما الذي يفعله StrictMode»؟

افهموا الاستدعاء المزدوج وتحذيرات واجهات API المهملة أثناء التطوير تتمرن على React Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ React Academy؟

لا تُشترط خبرة سابقة. React Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 1 من أصل 4.

كم من الوقت يستغرق درس «ما الذي يفعله StrictMode»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس React Academy هذا؟

نعم. كل درس في React Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

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

  1. ما الذي يفعله StrictMode
  2. المكوّنات النقية وتجنّب الآثار الجانبية أثناء التصيير
  3. أفضل ممارسات Key وRef
  4. بنية المجلدات واصطلاحات التسمية
← العودة إلى React Academy