چرخه حیات کامپوننت ها در ری اکت

چرخه حیات کامپوننت ها در ری اکت

چرخه حیات کامپوننت ها در ری اکت

Life cycle hook in react js

توسط : admin
هر کامپوننت در ری اکت دارای متدهایی برای کنترل و استفاده از چرخه حیات خود است . این آموزش به شما کمک میکنه که با نحوه استفاده از این متد ها به صورت کامل آشنا بشید .

 

در این مقاله به صورت خلاصه با اصلی ترین متدهای چرخه حیات در ری اکت آشنا میشویم  :

 

componentDidMount  :

 componentDidMount() {
 //body
  }

 

این متد زمانی اجرا میشود که کل المنت های صفحه شما به صورت کامل رندر شده باشد . در واقع این متد و بدنه آن  یکبار پس از رندر کامل صفحه اجرا میشود . معمولا در این متد میتوان کدهای مربوط به دریافت اطلاعات از سرور یا رویدادهای صفحه مانند اسکرول ، تغییر سایز صفحه یا هر رویداد دیگری را قرار داد . این متد عملکردی مشابه دستور زیر در jquery دارد :

$(document).ready();

 

componentWillUnmount :

 componentWillUnmount() {
 //body
  }

 

این متد پس از نابود شدن کامپوننت اجرا میشود. به طور معمول هر وقت رویدادی رو در متد componentDidMount فراخوانی کرده باشید برای استفاده صحیح برنامه از منابع حافظه باید پس از نابودی کامپوننت  متد componentWillUnmount فراخوانی و تمامی منابع استفاده شده از بین بروند . به طور مثال زمانی که دستور setinterval رو در متد componentDidMount استفاده کردید حتما در این متد clearinterval رو فراخوانی کنید تا منابع به کار رفته در حافظه نیز از بین بروند . استفاده از این متد فقط محدود به از بین بردن منابع نمیشود و میتوان هر دستور دیگری را که فکر میکنید باید همزمان با از بین رفتن کامپوننت اجرا شود نیز استفاده نمائید .

 

componentDidUpdate : 

بدنه این متد به صورت زیر است :

componentDidUpdate(prevProps, prevState, snapshot)

 

این متد بلافاصله پس از بروزرسانی ، فراخوانی می شود. این متد برای رندر اولیه فراخوانی نمی شود.  هنگامی که مؤلفه به روز شد ، میتوانید از این متد کنترل اشیاء DOM استفاده کنید. همچنین متدی مناسب  جهت مقایسه props یا  state  قبلی و جدید است . در بدنه این متد اصلا از متد setState استفاده نکنید ، چرا که با هر بار بروز رسانی state این متد فراخوانی شده و شما در یک حلقه بی پایان گرفتار میشوید .

 

componentDidCatch :

componentDidCatch(error,info) {}

این متد پس از بروز خطایی توسط کامپوننتهای فرزند فراخوانی می شود.که شامل دو پارامتر می شود:

 

error :  خطایی که پرتاب شد.

info : یک شی یا  یک کلید که حاوی اطلاعاتی در مورد اینکه کدام عنصر باعث برزو خطا شده است .

 

 

componentWillMount :

componentWillMount(){}

این متد دقیقا بر خلاف متد componentDidMount  قبل از رندر ، اجرا میشود .

 

componentWillReceiveProps :

componentWillReceiveProps(nextProps){}

این متد با هر بار ارسال props جدید اجرا میشود . دارای یک پارمتر است که شامل props جدید دریافت شده میباشد .

 

 

 

نظرات :

در عرض چند دقیقه برای ایجاد حساب

کاربری خود اقدام کنید


اکنون حساب کاربری خود را ایجاد کنید!


ایجاد حساب کاربری

با ثبت نام در نیلوتک از آخرین بروز رسانی های آموزش ها و مقالات سایت مطلع شوید