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

يمكنك تنفيذ هذا عن طريق استخدام 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) => {
     // المكون الخاص بك
   });

    

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

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

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

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