0Pricing
React Academy · درس

التأثيرات مقابل التصيير والتبعيات والتنظيف

الفروق بين التصيير والتأثيرات؛ مصفوفات التبعيات ([]، [x]) وكتابة دوال التنظيف.

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

التصيير مقابل التأثير

الهدف: معرفة ما يُنفَّذ أثناء التصيير (بشكل نقي ومن دون آثار جانبية) وما ينتمي إلى التأثيرات (لمزامنة التطبيق مع العالم الخارجي).

  • التصيير: إعادة واجهة المستخدم
  • التأثير: يُنفَّذ بعد الرسم
  • التنظيف: التراجع عن العمل

قواعد التبعيات

تتحكم التبعيات في وقت تشغيل التأثير:

  • []: يُنفَّذ مرة واحدة بعد التركيب
  • [x]: يُنفَّذ عند التركيب وكلما تغيّرت قيمة x
  • حذف التبعيات: يُنفَّذ بعد كل تصيير (يُفضّل تجنّبه للمبتدئين)

مثال: التبعيات قيد العمل

يحدّث تأثير يحتوي على [count] العنوان كلما تغيّرت قيمة count. قارن ذلك بـ [] الذي يُنفَّذ مرة واحدة فقط.


<div id="root"></div>

لماذا يهم التنظيف

أضف تنظيفًا بإعادة دالة من التأثير. يشغّل React هذه الدالة قبل إعادة تشغيل التأثير وعند إزالة المكوّن.

  • إزالة مستمعي الأحداث
  • مسح المؤقتات
  • إلغاء الطلبات

مثال: تنظيف التأثير

نضيف مستمع resize داخل تأثير ونزيله في التنظيف لتجنّب تسرّب الموارد.


<div id="root"></div>

أخطاء ينبغي تجنّبها

الأخطاء الشائعة:

  • تنفيذ آثار جانبية أثناء التصيير — انقلها إلى useEffect.
  • فقدان التبعيات، ما يؤدي إلى استخدام قيم قديمة.
  • نسيان التنظيف لمستمعي الأحداث أو المؤقتات.

التحقق من موضع التنظيف

أين ينبغي وضع منطق التنظيف لتأثير ما (مثل إزالة مستمع أو مسح مؤقت)؟

مراجعة

مراجعة: يظل التصيير نقيًا، وتُنفَّذ التأثيرات بعد الرسم. استخدم مصفوفات التبعيات للتحكم في وقت تشغيلها، وأعد تنظيفًا لإلغاء الاشتراك أو مسح المؤقتات.

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

هل درس «التأثيرات مقابل التصيير والتبعيات والتنظيف» مجاني؟

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

ماذا ستتعلم في «التأثيرات مقابل التصيير والتبعيات والتنظيف»؟

الفروق بين التصيير والتأثيرات؛ مصفوفات التبعيات ([]، [x]) وكتابة دوال التنظيف. تتمرن على React Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

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

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

كم من الوقت يستغرق درس «التأثيرات مقابل التصيير والتبعيات والتنظيف»؟

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

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

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

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

  1. التأثيرات مقابل التصيير والتبعيات والتنظيف
  2. المشكلات الشائعة: الإغلاقات القديمة والتبعيات المفقودة
  3. أساسيات جلب البيانات داخل التأثيرات (الإلغاء والتنظيف)
← العودة إلى React Academy