رد فعل useEffect () Hook: الاستخدام ، كيف ومتى تستخدمه

مقدمة عن الخطاف useEffect ()

استخدام تأثير ربط عنصر رئيسي.إنه يتعامل مع مهام مثل جلب البيانات أو إعداد مستمعين للأحداث أو تعديل DOM ويسمح للمستخدمين بتنفيذ الآثار الجانبية باستخدام المكونات الوظيفية. كما أنه يتحكم في دورة حياة المكون.

يستخدم خطافتأثير الاستخدام وسيطتين ، دالة ومجموعة تبعية اختيارية.يتم تنفيذ الوظيفة التي تم تمريرها كأول وسيط عرض ما بعد الأولي للمكون ثم مرة أخرى بعد كل تحديث. يمكنك الإشارة إلى المتغيرات التي يعتمد عليها التأثير باستخدام مصفوفة التبعية. يتم تنفيذ تشغيل جديد للتأثير إذا تغير أي من متغيرات مصفوفة التبعية.

بطبيعتها ، تم إنشاءخطاف تأثير الاستخدام لمواجهة التحديات التي تواجهها دورة حياة مكونات فئة ES6.ومع ذلك ، فقد أصبح الآن أحد مفاهيم التفاعل الأساسية.

مع هذا الموجز حولماهية تأثير الاستخدام في التفاعل ، فلنلقِ نظرة الآن على تركيبه.

بناء الجملة الأساسي useEffect () Hook

يدعم useEffect وسيطين ؛ الوسيطة الثانية اختيارية. بناء الجملة على النحو التالي:

useEffect (<وظيفة> ، <الاعتماد>)

تتضمن الوظيفة منطق الآثار الجانبية. يثير تنفيذ رد الاتصال مباشرة بعد تحديث DOM.

تحتوي التبعية على مصفوفة اختيارية من التبعيات لآثارك الجانبية ، أي الحالة وقيم الدعائم. لاحظ أنربط تأثير الاستخدام يقوم بتشغيل رد الاتصال فقط إذا تغيرت التبعيات أثناء عمليات التصيير.

يخدم بناء الجملة الغرض الوحيد من useEffect (). يتيح لك وضع منطق التأثير الجانبي الخاص بك داخل وظيفة رد الاتصال ثم استخدام وسيطة التبعيات للتحكم عندما تحتاج إلى تشغيل التأثير الجانبي.

يمكنك مراعاة بناء الجملة التالي عند تنفيذ الخطاف useEffect ():

// استيراد useEffect

استيراد {useEffect} من "رد فعل" ؛

الوظيفة MyComponent () {

// يسميها فوق JSX المرتجع

// يمرر إليها وسيطين ، أي مصفوفة ووظيفة

useEffect (() => {

// وظيفة التأثير

العودة () => {

// وظيفة التنظيف

} ؛

} ، [/ * مصفوفة التبعية * /]) ؛

// منطق تقديم المكون

}

}

تحقق مندوراتنا التكنولوجية المجانيةلتتفوق على المنافسة.

تركيب المكونات وفكها باستخدام خطاف useEffect ()

تصاعد

تتضمن المرحلة الأولى من دورة حياة مكون React إنشاء وإدخال مكونات في DOM. تتضمن مرحلة دورة حياة تأثير استخدام التفاعل طريقة دورة حياة componentDidMount ، والتي يتم تنفيذها عند تركيب المكون.

فيما يلي مثال على تركيب المكونات باستخدام الخطاف useEffect ().

componentDidMount () {

console.log ("تم تركيب المكون بنجاح") ؛

this.setState ({

محملة: صحيح

})

}

في المثال أعلاه ، يتيح لك componentDidMount إمكانية استخدام setState. لذلك ، يمكنك بسهولة ضبط الحالة وتغييرها في طريقة دورة الحياة. تستخدم الطريقة المقابلة استدعاءات API واستدعاء نقاط النهاية البعيدة وجلب البيانات.

الفتح

يتعامل أسلوب دورة حياة استخدام رد الفعل هذا مع عملية التنظيف في DOM.إنها مثلوظيفة تنظيف أثر الاستخدام التي تزيل مكونًا من DOM.يطلق عليه unmounting في React. يستخدم إلغاء التثبيت طريقة دورة حياة واحدة فقط ، مثل componentWillUnmount. يتم استدعاؤه عندما تريد إزالة مكون من DOM.

componentWillUnmount () {

console.log (“تم إلغاء تحميل المكون بنجاح”) ؛

}

استخدام تأثير () خطاف لمعالجة تغييرات الحالة

يتم تنفيذ تأثير الاستخدام بعد كل تصيير.يتم استخدامه أيضًا لتشغيل أكواد معينة في إقرار تغيير الحالة. يمكنك التحكم في وقت تنفيذ التأثير بتمرير الوسيطة الثانية في الخطاف useEffect (). تعمل الوسيطة الثانية كمصفوفة من التبعيات ، أي إذا تم تغيير المتغيرات المقابلة ، فيجب إعادة تشغيل التأثير. لاحظ أن الحالة هي أحد أنواع المتغيرات.

يوضح القسم التالي مثالاً لشرح كيفيةتعامل تأثير الخطاف مع تغيرات الحالة.

على سبيل المثال ، قد ترغب في تشغيل تأثير جانبي بناءً على قيمة "اليوم". افترض أن لديك تأثيرًا جانبيًا لعرض رسالة ترحيب اعتمادًا على قيمة اليوم. يتم حفظ قيمة اليوم في متغير الحالة.

كلما اخترت يومًا ، يتم تحديث الحالة. يتيح لك التغيير في قيمة الحالة تحديث رسالة الترحيب. يجب عليك تمرير متغير الحالة إلى الخطاف useEffect كمجموعة فرعية من مصفوفة التبعية.

useEffect (() =>

{

// أثر جانبي

}، [ولاية])؛

في المثال أعلاه لتفاعل useeffect الأصلي ، سيتم تشغيل التأثير الجانبي إذا تم تحديث قيمة متغير الحالة.

استكشف دوراتنا التدريبية الشهيرة في هندسة البرمجيات

استخدام الخطاف useEffect () مع واجهات برمجة التطبيقات وطلبات الشبكة

يمكنك استخدام الخطاف "useEffect ()" مع واجهات برمجة التطبيقات وطلبات الشبكة لجلب البيانات من الخادم ومعالجة الأخطاء. فيما يلي مثال على كيفية استخدام "useEffect ()" مع واجهة برمجة التطبيقات ومعالجة أخطاء الشبكة:

import React، {useState، useEffect} من 'رد فعل'؛

الوظيفة MyComponent () {

const [data، setData] = useState (خالية) ؛

const [error، setError] = useState (خالية) ؛

useEffect (() => {

دالة غير متزامنة fetchData () {

يحاول {

استجابة const = انتظار الجلب ('https://api.example.com/data') ؛

إذا (! response.ok) {

طرح خطأ جديد ("استجابة الشبكة لم تكن على ما يرام") ؛

}

const json = انتظار الاستجابة. json () ؛

setData (json) ؛

} catch (خطأ) {

setError (خطأ) ؛

}

}

ابحث عن المعلومة()؛

} ، []) ؛

إذا (خطأ) {

إرجاع <div> خطأ: {error.message} </div>؛

}

إذا (! بيانات) {

عودة <div> تحميل… </div> ؛

}

يعود (

<div>

<p> {data.message} </p>

</div>

) ؛

}

يمكنك تعديل هذا المثال ليشمل أي وظائف إضافية تحتاجها للتعامل مع طلبات الشبكة واستجابات واجهة برمجة التطبيقات.

useEffect المتقدمة () تقنيات الخطاف

الحفظ هو أحد الأساليب المتقدمة لتفاعل الاستخدام المتطور .إنها تقنية تحسين حيث يتم تخزين إخراج استدعاء الوظيفة مؤقتًا. بعد ذلك ، تقومدالة إرجاع useeffect بإعادتها عند تغذية نفس الإدخال مرة أخرى.

استخدام آخر مشهور هو تقنية الخطاف useMemo Hook. يتيح لك حساب القيمة وحفظها. تركيبها هو:

استيراد {useMemo} من "رد فعل"

const memoizedValue = useMemo (() => computeExpensiveValue (x، y)، [x، y])

useEffect () هوك التبعيات

useEffect () تحتوي تبعيات الخطاف على قائمة من التبعيات لأثرك الجانبي بينما تشتمل أيضًا على قيم الحالة أو الخاصية. تسمح لك وسيطة التبعيات بإمساك بعض أحداث دورة حياة المكون مثل تثبيت أحد المكونات أو تحديث حالة / قيمة خاصية معينة.

تتيح لك وسيطة التبعيات التحكم في الوقت الذي يتم فيه استدعاء التأثير الجانبي ، بغض النظر عن دورة عرض المكون.

العرض الشرطي باستخدام الخطاف useEffect ()

الخطاف useEffect يسمح لك بوضع الشروط داخل الخطاف. هنا مثال.

useEffect (() => {

إذا (ينبغي التنفيذ) {

// (قائمة الشروط)

}

} ، [shouldExecute])

تحتاج إلى ذكر الشروط الإلزامية التي تريد تنفيذها ضمن دالة shouldExecute.

استخدام التأثير () Hook vs ComponentDidMount () و ComponentDidUpdate ()

useEffect () Hook مقابل componentDidUpdate ():

useEffect () Hook vs componentDidMount ():

الأخطاء الشائعة وأفضل الممارسات مع useEffect () Hook.

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

1. عدم تحديد التبعيات

يتم تشغيل useEffect عندما يتم تقديم مكون. ومن ثم ، يجب عليك تحديد القيم التي يجب أن تؤدي إلى إعادة تصيير. خلاف ذلك ، يمكن أن تؤدي وظيفة useEffect إلى حدوث مشكلات في الأداء.

2. عدم التنظيف بعد تنفيذ خطاف useEffect

قد يُعيد useEffect وظيفة تنظيف يتم تنفيذها عند عدم تحميل المكون. عدم التنظيف بعد useEffect يمكن أن يؤدي إلى تسرب الذاكرة ومخاوف أخرى. لذلك ، من المهم استخدام وظيفة التنظيف بتأثير الاستخدام .

3. استخدام setState في دالة useEffect بدون تبعية

إذا قمت بتحديث الحالة في useEffect ، فسيؤدي ذلك إلى تشغيل تصيير آخر. هذا يمكن أن يؤدي إلى حلقة لا نهائية. لمنع هذا ، يجب عليك دائمًا تحديد متغير الحالة الذي تقوم بتحديثه باعتباره تبعية في خطاف useEffect.

استكشف دوراتنا المجانية في تطوير البرمجيات

أفضل الممارسات:

• إذا كنت تريد استخدام الخطاف useEffect ، فتأكد من استخدام واحد فقط لكل مكون. في حالة خطافات useEffect المتعددة ، ستعمل جميعها كلما تم عرض أحد المكونات. لذلك ، يمكن أن يؤدي إلى مشاكل في الأداء وسلوك غير متوقع.
• تأكد من عدم استخدام الخطاف useEffect داخل الظروف أو الحلقات أو الوظائف المتداخلة. إذا كنت تستخدم State inside for loop ، فإن React ستنشئ متغير حالة جديدًا في كل مرة تعمل فيها الحلقة. وبالتالي ، فإنه يؤدي إلى سلوك غير متوقع.
• تأكد من عدم الإفراط في استخدام خطاف useEffect. يمكن أن تجعل قراءة التعليمات البرمجية الخاصة بك صعبة وقد تؤثر على الأداء إذا تم استخدامها بشكل مفرط.
• يجب عليك فقط استدعاء الخطاف useEffect من دوال React. إذا اتصلت به من مكون فئة ، فسترى خطأ.

خاتمة

من الأفضل استخدام useeffect في التفاعل إذا كنت تريد الوصول بسهولة إلى دعائم المكونات والحالة دون كتابة أي كود إضافي.إنه يبسط بشكل كبير الآثار الجانبية في المكونات لأنه يجعل من السهل تنفيذ الآثار الجانبية عندما تتغير الحالة أو الدعامة. يمكنك التفكير في الجوانب وأفضل الممارسات التي تمت مناقشتها أعلاه لضمان أداء مكونات React على النحو الأمثل.

يعد تعلم مهارات تطوير البرمجيات التي تتطلب طلبًا بالغ الأهمية في العصر الحالي. يمكنك تزويد نفسك بهذه المهارات المتطورة من خلال متابعة ماجستير العلوم في upGrad's في علوم الكمبيوتر من جامعة جون مورس بليفربول . تجعلك الدورة التدريبية مطور برامج خبيرًا من خلال نقل مهارات مثل Java و Python والتخصص في المجالات ذات الصلة. يساعدك التعلم الكامل للجوانب التي تتناولها هذه الدورة على استكشاف فرص العمل مثل مطور جافا سكريبت ومهندس البرمجيات ومهندس الخلفية.

إلى جانب إتقان مهارات تطوير البرامج ، تساعدك upGrad أيضًا على الارتقاء بحياتك المهنية كمطور متكامل من خلال دورات مثل برنامج Executive PG في Full Stack Development من IIITB و Full Stack Software Development Bootcamp . توفر هذه البرامج منصات تعليمية غامرة تتيح للمرشحين اكتساب مهارات تطوير متكاملة وتمهيد الطريق بفعالية لمهنة ناجحة!