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

Declaring Reactive Dependencies تحديد مصفوفة الاعتماديات بدقة

أتقن استخدام خطاف useEffect لمزامنة مكونات React مع الأنظمة الخارجية بعد رسم الشاشة، وتحديد مصفوفة الاعتماديات بدقة، ومنع حلقات التصيير اللانهائية.
4 صفوف تعليمية
ReactJS
0 مشاهدة

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

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

لا تُختار عناصر مصفوفة الاعتماديات عشوائياً، بل يجب إدراج كل قيمة تفاعلية تقرؤها دالة التأثير بداخلها (سواء كانت من props أو state أو متغيراً مشتقاً منهما داخل المكون) ضمن المصفوفة [dep1, dep2] دون إخفاء.

وعندما تتغير حالة أخرى غير مدرجة لأن التأثير لا يستخدمها — ككتابة مسودة رسالة بينما معرّف الغرفة roomId ثابت — تتخطى React إعادة تشغيل التأثير بكفاءة تامة.

الصف 2 صورة توضيحية
مخطط رباعي المراحل يوضح دورة عمل useEffect: تصيير JSX ثم رسم المتصفح ثم مقارنة الاعتماديات ثم تشغيل دالة المزامنة
الصف 3 كود برمجي
HTML
useEffect(() => {
  setSyncCount((c) => c + 1);
}, [roomId]);
// Typing in draft input never re-triggers room sync!
الصف 4 ملاحظة هامة