السابق

التالي

Hooks

مكتمل

Hooks هي نمط شائع في أطر العمل حيث تتغير القيم أو تحدث أحداث أخرى. بطريقة مركزية، يقومون بإدخال التعليمة البرمجية الخاصة بك لتشغيلها عند تغير الحالة، أو في مراحل أخرى في دورة حياة التطبيق.

Effect Hook

في هذه الوحدة، سنُركز على خطاف التأثير. يتم رفع هذا الـ Hook كلما تم تعيين قيمة الحالة. يتم رفعه عند تعيين القيمة الأولية، وكافة التحديثات اللاحقة.

يسمح لك Effect Hook بتشغيل الرموز استجابة لإعدادات القيمة. يمكن أن يكون للتعليمة البرمجية التي تقوم بتشغيلها تأثيرات جانبية؛ لذلك يمكنك تحديث القيم حسب الحاجة.

متى تستخدم Effect Hook

يمكنك استخدام Effect Hook كلما كنت في حاجة إلى تمركز التعليمة البرمجية للاستجابة إلى تغير حالة. تخيل شكل معقد يتضمن العديد من القيم. يجب تعطيل الزر "Submit" فعلياً إلى أن تكون البيانات التي يتعين إرسالها إلى الخادم في حالة صالحة. لنفترض أن لديك أحداثًا للقيم الفردية التي تم تغييرها في البيانات. بعد أن يحدد المستخدم بلدا/منطقة في التطبيق الخاص بك، تحتاج إلى استرداد قائمة بالمقاطعات من الخادم.

لا تريد لكل وحدة استماع للحدث أن تفحص الحالة؛ لمعرفة ما إذا كانت البيانات جاهزة ليتم إرسالها إلى الخادم. هذا الإعداد سيكون غير فعال. بدلاً من ذلك، يمكنك استخدام Effect Hook. يمكن لـ Effect Hook أن يقوم بإنشاء دالة واحدة تبحث في البيانات. إذا كانت البيانات في حالة صالحة، يمكنه تمكين الزر "Submit".

useEffect

لتسجيل وحدة استماع لخطاف التأثير، استخدم useEffect. يسمح useEffect لدالة Parameter-less بأن يتم تشغيلها عند تغير الحالة.

useEffect(() => {
    // code goes here
});

بشكل افتراضي،تعمل useEffect كلما تم تغيير الحالة على أي كائن حالة. يمكنك توفير تبعية لتمكين Hook؛ لمجموعة معينة فقط من العناصر.

useEffect(() => {
    // code goes here
}, [ someStatefulObject ]);

متابعة