كيفية تشغيل الشيفرة باستخدام React useEffect مرة واحدة فقط

Rayden Storm · 21 مارس 2021

في ال class component عند استخدام شيفرة معينة داخل componentDidMount تشتغل لمرة واحدة وانتهى سؤالي هو كيفية تحقيق الكود في الأسفل باستخدام useeffect

class MyComponent extends React.PureComponent {
    componentDidMount() {
        //...الشيفرة
    }
    render() { ... }
}

أحمد حبنكة · 21 مارس 2021

إن useEffect تدمج الـlifecycle methods الثلاثة في تابع واحد، useEffect تستعمل حين تريد تنفيذ كود معين عند كل تغير لمتحولات معينة، فمثلاً الكود التالي:

useEffect(() => { console.log(name); },[name])

سيطبع name كلما تغير، قد يكون name هذا prop من أب وقد يكون state ، لا يهم كيف يتغير كل ما يهم أنه كلما تغير سنقوم بطباعته، طبعاً الكود بداخل useEffect ينفذ مرة واحدة على اﻷقل ولذا يمكن استعماله بديلاً عن componentDidMount هكذا:

useEffect(() => { 
  // do something 
},[]);

لاحظ المصفوفة الفارغة، تلك طريقة نخبر فيها useEffect أن الكود لا يعتمد على أية متحولات لذا ينفذ مرة واحدة عند كل mount للـcomponent.

طبعاً يمكننا تمرير عدة متحولات داخل المصفوفة مثل اﻵتي:

useEffect(() => { console.log(a+b); },[a,b]);

الكود السابق يطبع مجموع a وb كلما تغير a أو تغير b.أخيراً يمكن للتابع الممرر كـcallback للـuseEffect أن يرد ما يسمى cleanup function ، كما في المثال التالي:

useEffect(() => { 
  if(name === 'ahmad'){ 
    window.addEventListener('mousemove',mousemovelistener);
    return () => { 
      window.removeEventListener('mousemove',mousemovelistener); 
    }  
  } 
},[name]);

الكود السابق يفحص name إن كان يساوي ahmad يضيف listener للحدث mousemove ، عندما يتغير name إلى قيمة مثل "a" نريد للـmousemovelistener أن يزال لذلك كتبنا الكود التالي:

return () => { 
  window.removeEventListener('mousemove',mousemovelistener); 
}

عندما ترد تابعاً هكذا يفهم useEffect أن عليه تنفيذ هذا التابع أولاً ثم نغير dependency (والتي في المثال السابق هي name) ثم ننفذ الكود داخل useEffect من جديد.

أعتقد أنك قد لاحظت أن useEffect أفضل وأقوى من lifecycle methods ، ليس ذلك فقط بل يمكنك كتابة عدة useEffect في component هكذا:

useEffect(() => { 
  console.log(name); 
},[name]); 
useEffect(() => { 
  console.log(a+b); 
},[a,b]);

كل effect في المثال السابق مستقل تماماً عن غيره، أليس هذا رائعاً؟!!!

Salah Eddin Beriani2 · 21 مارس 2021

يمكنك تشغيل الشيفرة مرة واحدة باستخدام useeffect بهذه الطريقة

import React from 'react'

export default function MyComponent() {
useEffect(() => {
   // الشيفرة
}, []) // أبقي قائمة المعايير هنا فارغة 

    return (
        <div>
            ....
        </div>
    )
}

و للاطلاع أكثر على كيفية استخدام useeffect يمكنك الرجوع الى هذا السؤال ومراجعة الاجابات هناك

https://academy.hsoub.com/questions/13679-استخدام-lifecycles-في-react-useeffect