campaign-edianeh-98

مفاهیمی که باید در React اونا رو بدونین (بعد از یادگیری مقدماتی) - قسمت 1 - lifeCycle در React



visibility  
mode_comment   ۰

مفاهیمی که باید در React اونا رو بدونین (بعد از یادگیری مقدماتی)در این مطلب میخوام برخی از مفاهیم مهمی که باید در React اونا رو بدونین رو در اختیارتون قرار بدم و شما رو با اونا آشنا کنم.

فرض کنید که شما React رو بصورت مقدماتی با استفاده از دوره آموزشی یا ... یاد گرفته باشید. حالا باید چکار کنید؟ در این قسمت و قسمتهای بعد 4 مفهموم که با دونستن اونا سطح شما ارتقاء پیدا میکنه رو در اختیارتون قرار میدم.

مفاهیمی که در مورد اونا توضیح داده میشه، به صورت زیر هستند:

  • lifecycle یا چرخه زندگی Component
  • Higher-order component
  • state و setState
  • React context

1. lifecycle یا چرخه زندگی Component در React

مهمترین مفهمومی که توضیح داده میشه و در React باید اون رو به خوبی بلد باشید، Lifecycle مربوط به Component هست. همونطور که از اسم این مفهموم مشخصه، جزئیات مربوط به زندگی Component رو نشون میده. همانند جانداران، Component ها نیز متولد میشن (به وجود میان) و در طول زندگی خودشون کارهایی رو انجام میدن و در نهایت هم میمیرن و زندگی اونا به پایان میرسه. اما برخلاف ما انسان‌ها، مراحل زندگی Component ها کمی متفاوت هست. تصویر زیر جزئیاتی در مورد Lifecycle مربوط به Component در React رو بهتون نشون میده:

حالا میخوایم این تصویر رو بشکونیم و اطلاعات دقیقی در مورد هر مرحله در اختیارتون قرار بدیم.

هر مستطیل افقی رنگی که در تصویر بالا میبینید، یک متد Lifecycle هست (بجز React updates DOM and refs). ستونها نیز مراحل مختلف زندگی Component رو نشون میدن.

هر Component در هر لحظه فقط میتونه در یک مرحله یا Stage باشه. در ابتدا در مرحله Mounting قرار میگیره و بعد از اون وارد مرحله updating میشه. این component تا لحظه‌ای که از Virtual dom حذف نشه، میتونه دائما Update یا بروز رسانی بشه. در این حالت وارد مرحله unmounting میشه و از DOM حذف میشه.

متدهای Lifecycle به ما این امکان رو میدن که کد خاصی رو در مرحله مشخصی از چرخه زندگی Component اجرا کنیم. حالا میخوایم هر مرحله از زندگی Component رو با جزئیات بیشتری توضیح بدیم و متدهای مربوط به اونا رو با هم بررسی کنیم.

مرحله Mounting

در class-based component ها که با استفاده از class اونا رو تعریف میکنیم، اولین متدی که اجرا میشه، همون متد constructor هست. معمولا در Constructor کارها و حالات مقدماتی مربوط به Component رو مقداردهی اولیه میکنیم.

در مرحله بعد Component متد getDerivedStateFromProps رو اجرا میکنه. بخاطر استفاده محدود از این متد بیخیال اون میشیم و در مورد اون توضیح نمیدم.

حالا به متد render میرسیم که در اون کدهای JSX شما return میشن. اینجا هست که React در DOM بصورت Mount در میاد. در نهایت نیز متد componentDidMount اجرا میشه. در اینجا هست که شما میتونین درخواست Ajax برای دریافت اطلاعاتی از Database یا تغییرات دستی در DOM در صورت نیاز رو انجام بدین. پس با گذشت این مراحل هست که Component متولد میشه و در DOM قرار میگیره.

مرحله Updating

این مرحله هر بار که state یا props تغییر بکنه، اجرا میشه. در این مرحله constructor دیگه فراخوانی نمیشه و همانند mounting متد getDerivedStateFromProps مجددا فراخوانی میشه.

متد بعدی که اجرا میشه، shouldComponentUpdate هست. در این متد شما میتونین state و props های جدید و قدیمی رو با هم مقایسه کنید و میتونین با برگشت دادن true و false، تصمیم بگیرید که نیاز به re-render شدن component هست یا خیر. با جلوگیری از re-render های اضافی میتونین performance اپلیکیشن خودتون رو بالاتر ببرید.

اگر shouldComponentUpdate مقدار false برگشت بده، باعث میشه که این مرحله از updating به پایان برسه و منتظر updating بعد بمونه.

اگر مقدار true رو برگشت بده و یا اصلا از این متد استفاده نکنید، مرحله updating ادامه پیدا میکنه و متد getSnapshotBeforeUpdate بعد از اون فراخوانی میشه. این متد نیز استفاده محدود داره و خیلی از اون استفاده نمیشه. React بعد از اون متد componentDidUpdate رو فراخوانی میکنه. همانند componentDidMount میتونین در اینجا نیز هر درخواست async یا تغییر در DOM رو انجام بدین.

مرحله Unmounting

عمر component بعد از مدتی به سر میرسه و اینجا هست که وارد آخرین مرحله از چرخه زندگی component میشیم و وارد مرحله unmounting میشیم. زمانی که شما یک Component رو از DOM حذف میکنید، React قبل از حذف اون، متد componentWillUnmount رو فراخوانی میکنه.

شما در این متد میتونین هر کاری که در component کردید رو پاک کرده و همه چیز رو به حالت قبل برگردونین. مثلا اگر با socket یک ارتباط رو برقرار کردید، در اینجا باید اون رو disconnect یا قطع کنید و اگر interval یا رویدادی رو تعریف کردید، با استفاده از clearTimeout یا removeEventListener اونا رو حذف کنید و از Memory leak جلوگیری کنید.

متدهای دیگر LifeCycle

قبل از اینکه وارد موضوع بعد بشیم، بهتره که بصورت خلاصه در مورد forceUpdate و getDerivedStateFromError صحبت کنیم. forceUpdate یک متد هست که با استفاده از اون میتونین مستقیما component رو مجبور به re-render شدن کنید. در حالی که کاربردهای بسیار محدودی داره و بعضی وقتا مجبور به استفاده از اون میشیم، بهتره تا جایی که میشه از استفاده از اون خودداری بشه.

getDerivedStateFromError یک متد lifecycle هست که مستقیما در چرخه زندگی component وجود نداره. زمانی که یک Error یا خطا در component به وجود میاد، این متد فراخوانی میشه و شما میتونین متناسب با این ارور state رو تغییر بدین و نشون بدین که یک خطا به وجود اومده است. بعضی وقتا استفاده از این متد به ما کمک میکنه.

برای مشاهده مثال، میتونین این Codepen رو مشاهده کنید. کدها بصورت زیر هستند:

همونطور که میبینید متدهای مربوط به Mounting رو قرار دادیم و در هر کدام از این متدها یک console.log رو قرار دادیم تا ببینیم که اجرا شدند یا خیر. حالا اگر Console رو باز کنیم، خروجی بصورت زیر خواهد بود و میتونیم ترتیب فراخوانی شدن متدها رو ببینیم:

فهمیدن نحوه رفتار Lifecycle مربوط به Component به شما این امکان رو میده که به خوبی داده‌ها و رویدادها رو در application خودتون مدیریت کنید و بهتر از قبل کدنویسی کنید. اگر این موارد رو به خوبی بلد نباشید، ممکنه که کدی که مینویسید خروجی داشته باشه و کار بکنه ولی در واقع بهینه نیست و render های اضافه داره و Performance برنامتون تا حدی کاهش پیدا میکنه.

در قسمت بعدی مباحث دیگر رو بهتون توضیح میدم و شما رو بیشتر با قدرت React آشنا میکنم.

متخصص جاوا اسکریپت
با جاوا اسکریپت جادوگری کنید! آیا می دونید با زبان جاوااسکریپت می تونید، برای فرانت اند و بک اند وبسایت ها برنامه نویسی کنید؟ همینطور اپلیکیشن دسکتاپ و موبایل بسازید؟ اگر دوست داری اینکارها رو انجام بدی و React, ElectronJS, ReactNative, NodeJS,MongoDB و ... رو تو یه دوره یاد بگیری، متخصص جاوااسکریپت سون لرن رو حتما ببین : متخصص جاوا اسکریپت arrow_back
comment دیدگاه کاربران

add_circle ارسال دیدگاه

خوشحال میشیم دیدگاه و یا تجربیات خودتون رو با ما در میون بذارید :