• 0

تطبيق lifecycle hooks في functional component في React؟

كيف أقوم بتطبيق lifecycle hooks في functional component، في Class Component يمكنكي إستخدام الدوال مثل:

  • componentWillUnmount

  • componentDidMount

  • componentDidUpdate

  • shouldComponentUpdate

هل يمكن تطبيق نفس ما تفعله الدوال السابقة في functional component بأي طريقة مثل useEffect أم يجب علي أن أستعمل Class Component؟

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
شارك على الشبكات الإجتماعية
  • 1

يمكنك تنفيذ هذا عن طريق استخدام useEffect hook

  1. componentDidMount
    useEffect(() => {
    	// الكود البرمجي هنا
    }, []); // هنا المصفوفة يجب أن تكون فارغة

     

  2. componentDidUpdate

    useEffect(() => {
    	// الكود البرمجي هنا
    }, [a, b]); //هنا المصفوفة يجب أن تحتوي على المتغيرات  التي بناء عليها سيتم عمل تحديث
    
    المتغيرا ت هي
    props - state

     

  3. componentWillUnmount

    useEffect(() => {
    	// الكود البرمجي هنا
      
      return () => { // قم باستخدام الدالة
      	// الأشياء التي تريد تنفيذها عند الخروج من المكون 
      }
    }, [a, b]); //هنا المصفوفة يجب أن تحتوي على المتغيرات  التي بناء عليها سيتم عمل تحديث
    
    المتغيرا ت هي
    props - state

     

  4. قم بإحاطة المكون الخاص بك ب React.memo حسب التوثيق الرسمي

    const Button = React.memo((props) => {
      // المكون الخاص بك
    });

     

2 اشخاص أعجبوا بهذا

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
شارك على الشبكات الإجتماعية
  • 0
useEffect(() => {
 alert('سيتم الإستدعاء بعد كل ظهور ');
});
 
useEffect(() => {
 alert('سيتم الإستدعاء بعد الظهور الأول فقط');
}, []);
 
useEffect(() => {
 alert('سيتم الإستدعاء بعد أن تتغير قيمة أحد المتغيرين اللذين في المصفوفة');
}, [a, b]);

في الإستدعاء الثالث يمكنك إضافة متغير واحد على الأقل أو أكثر في المصفوفة

هناك أيضا ما يسمى بدالة التنظيف وتكون بعد return في دالة useEffect وفي دالة التنظيف تقوم بإزالة وتنظيف أشياء مثل eventListener أو setTimeOut بعد التخلص من المكون ودالة التنظيف هي مثل دالة ComponentWillUnmount

useEffect(() => {
  document.addEventListener('keydown', handleKeydown); // إضافة مستمع عندالضغط على زر
  return () => document.removeEventListener('keydown', handleKeydown); // دالة التنظيف وتقوم بإزالة المستمع السابق
});

 

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
شارك على الشبكات الإجتماعية

يجب أن تكون عضوًا لدينا لتتمكّن من التعليق

انشاء حساب جديد

يستغرق التسجيل بضع ثوان فقط


سجّل حسابًا جديدًا

تسجيل الدخول

تملك حسابا مسجّلا بالفعل؟


سجّل دخولك الآن