تا به حال در مورد React.js زیاد باهم صحبت کردیم و طبیعتا شمایی که این پست رو می خونید اطلاعاتی در مورد این کتابخانه ی محبوب جاوا اسکریپتی دارید.

در این قسمت تصمیم داریم در مورد چرخه حیات کامپوننت ها در React با هم صحبت کنیم.

و اما اصلا فایدش چیه که ما بدونیم چرخه ی حیات یک کامپوننت به چه صورته؟🤔

خب حالا که چی؟

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

یا مثلا خیلی وقت ها نیازه که بعد از اینکه برنامتون رندر شد یک کاری رو انجام بدید.

خب این کار ها رو باید در چرخه حیات های مختلف یک کامپوننت انجام بدیم.

مقدمه کافیه بریم سراغ اصل مطلب 😁

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

قبل از هر چیزی ابتدا دعوتتون می کنم که عکس زیر رو مشاهده کنید ( با کلیک روی عکس می تونید در سایز اصلی مشاهده کنید)

 

 

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

 

خب این کل چرخه حیات کامپوننت ها در React هست که می خوایم تک تک متد ها رو بررسی کنیم و بگیم هر کدوم کجا کاربرد داره.

توجه داشته باشید که این کامپوننت به زبان چینی اورده شده و ممکنه تعجب کنید چرا اون Start نیست و اون جمله چینی وسط عکس چیه که باید بهتون بگم نگران نباشید چیز خاصی نیست معنی اجرا شدن یا Run رو میده 😁

 

  • getDefaultProps

همونطور که از اسمش پیداست وظیفه ی جمع آوری prop های اولیه ی هر کامپوننت رو داره !

هر کامپوننتی که class Component باشه یک constructor یا سازنده داره ( برای همه کلاس ها در تمام زبان های برنامه نویسی این قاعده وجود داره )

شما اگر در سازنده ی کلاستون یک console.log برای getDefaultProps انجام بدید می تونید prop هایی که قبل از رندر شدن به کامپوننت اختصاص داده میشه رو مشاهده کنید.

  • getInitialState

وقتی prop های اولیه و ورودی به یک کامپوننت داده شد ما می تونیم از prop ها در state ها استفاده کنیم !

مثلا خط کد زیر رو در نظر بگیرید :

state = {
    onj: {name:this.props.name}
}

در خط کد بالا ما اومدیم و prop مورد نظری که به کامپوننت داده می شده رو گرفتیم و برای خصیصه ی name در state.obj ست کردیم.

نکته: حواستون باشه اگر در constructor تصمیم دارید که prop ها رو دستکاری کنید حتما قبلش super رو call کرده باشید.

  • componentWillMount

معنی مشخص و معینی داره به این معناست که کامپوننتی که بعد از آن برنامه رندر خواهد شد.

اینکه چه استفاده ای ممکنه این جا داشته باشید بر میگرده به نوع پروژتون اما می تونم بگم بر اساس تجربه وقتی به یه باگ برخورد کنین که منطقی باشه و نه نحوی اون موقع اهمیت LifeCycle ها رو بیشتر درک می کنید چون لاگ گیری ساده تر خواهد شد براتون.

خب حالا در جایی قرار داریم که دیگه کامپوننت و state هاشو به طور کامل داریم و برنامه رندر میشه..!

  • componenetDidMount

اینجا درست یک قدم قبل از run شدن برنامه هستیم.

یکی از جاهای خوب برای fetch کردن دیتا و لاگ گیری های مختلف هست که بعد ها در پست مربوط به React Route باهاش سر و کار داریم.اما بدونید که الان برنامه ی ما درست یک قدم قبل از نمایش عمومی به کاربران قرار داره 🙂

همچنین در این قسمت می تونید درخواست های ajax رو هندل کنید ( مثل ارسال درخواست به http با axios که یک پست مفصل براش حتما در نظر می گیریم)

  • componentWillReceiveProps

خب همونطور که در عکس هم میبینید برنامه داره run میشه تا زمانی که prop ها تغییر بکنند ( یا به اصطلاح prop جدیدی دریافت کنه ) و باید به کامپوننت مورد نظر ارسال بشه! به عنوان مثال شما میخواید زمانی که دکمه ی ای جهت ارسال prop های جدید توسط کاربر کلیک شد اون دکمه غیرفعال و disable بشه که جای متد مورد نظری که می خواید بنویسید اینجاست !

  • shouldComponentUpdate

به اینجا که میرسین برنامه میگه باشه قبوله من یه سری prop جدید گرفتم اما حالا واقعا باید آپدیت بشه کامپوننت من؟🤔

یعنی آیا کامپوننت من نیاز به تغییر داره یا نه؟ خب چی به ذهنتون رسید؟ 😁 درسته ! یکی از جاهایی که میشه validation کار کرد همین متد هست.

و خروجی این متد از نوع boolean هست که اگر true باشه طبق عکس به سراغ مراحل بعدی میره و اگر false باشه خب برمیگرده به صفحه ی حیات برنامه یا همون run بودنِ پیش از این !

ما اینجا فرض می کنیم که خروجی برنامه true هست و ادامه میدیم !

زنگ تفریح : برای اینکه مطالب تکراری نشه براتون می تونید همین الان برید و هرچی تا اینجا یاد گرفتید رو درون ادیتور تست کنید و با یه انرژی خوب برگردید و ادامه ی مطلب رو بخونید !

  • componentWillUpdate

این قسمت به ما میگه که کامپوننت آپدیت خواهد شد ! خب یه لحظه فکر کنین این مرحله درست یک مرحله قبل از render هست

دقیقا مثل componenetWillMount که بالاتر اشاره کردیم! پس چه فرقی دارن؟ هر دوشون state و prop به عنوان ورودی هاشون دریافت می کنن 🤔

جواب این سوال اینه که خب در اصل متد نویسی هیچ تفاوتی ندارن ! 😬 تنها تفاوتشون اینه که componenetWillMount تنها یک بار اجرا میشه اما componentWillMount در چرخه ی حیات می تونه چندین و چند بار اجرا بشه !

خب همونطور که گفتیم در این مرحله ما newState و newProps رو به عنوان ورودی می تونیم داشته باشیم و اعمالی که مد نظرمون هست رو با کمک این ورودی ها پیاده سازی کنیم.

  • componentDidUpdate

خب حالا به جایی رسیدیم که کامپوننت مجددا رندر شد و آپدیت شد و همچنان هم prevState و prevProp رو داریم !

این متد هم مشابه با componentDidMount هست و تفاوتش هم مسلما در این هست که componentDidUpdate می تونه چندین بار اجرا بشه اما componentDidMount تنها یک بار در چرخه ی حیات اجرا میشه !

حالا بریم و به اون قسمت راست عکس برسیم و ببینیم اونور چه جریانی داره 😃

  • componentWillUnmount

خب اولین چیزی که این جا خیلی مشخص هست اینه که توی عکس componentWillMount نوشته شده در حالی که من سرتیتر رو componentWillUnmount نوشتم ! که خب دلیلشم مشخصه چون توی عکس سهوا اشتباه شده که متاسفانه طراحیش هم با من نبوده  😬 ( عکس های مفهومی بیشتری براتون قرار میدیم )

خب و اما وظیفه ی این متد چی هست و چه زمانی run میشه! شما فرض کنین یک دکمه دارید جهت حذف یک المان در صفحه ی سایتتون..! خب زمانی که رو اون دکمه کلیک کنید و المان حذف بشه آیا prop اضافه شده به کامپوننت شما؟! مشخصا نه !!!!

پس در واقع اتفاقی که افتاده unmount شدن بوده که توی گوگل ترنسلیت عزیز نوشته شده باز کردن که ترجمه ی درستی نیست ! بهتره بگیم انجام نشدن، اجرا نشدن و از این قبیل کلمات

خب دوستان به پایان این پست رسیدیم !

آموزش های بیشتری خواهیم داشت اما به طور قطع و یقین میگم که یادگیری و تسلط و نحوه ی کارکرد هر کدوم از این متد ها در چرخه ی حیات به شما بعدا کمک بسیاری خواهد کرد در حرفه ای شدن !

می تونید عکس های مفهومی تر بیشتری رو که قرار دادیم در کانال تلگرام ما ( اینجا کلیک کنید ) ببینید و سوالاتتون رو در اینجا بپرسید !

جاوا اسکریپیتی بمونید ✌

 

ما از اسپم متنفریم

برای شما ارزش زیادی قائلیم و قرار نیست براتون اسپم ارسال کنیم !

تنها داغ ترین و مفید ترین موضوعات برای شما ارسال خواهد شد

با موفقیت عضو شدید!