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

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

2000 800 سینا

در این آموزش درباره چرخه زمانی (Lifecycle) یک کامپوننت توضیحاتی خواهیم داد و در مقالات بعدی هر کدام از توابع را بیشتر بررسی خواهیم کرد.

کامپوننت های React یک چرخه زمانی دارند که در واقع متدهایی هستند که با رخ دادن اتفاقات مختلف فراخوانی می شوند. این متدها در نسخه های مختلف React در حال تغییر هستند اما ما در اینجا به مهم ترین این متدها اشاره خواهیم کرد.

1. چرخه شروع کامپوننت

constructor: در شکل بالا چرخه شروع کامپوننت مشخص شده است. اولین متدی که قبل از render شدن المنت های یک کامپوننت رخ می دهد متد constructor است که با آن در آموزش های قبلی اندکی آشنا شدیم و در مقالات بعدی کامل تر توضیح داده خواهد شد. به صورت کلی در این متد تعاریف و مقدار دهی های اولیه انجام می شود.

componentWillMount: پس از constructor متد componentWillMount فراخوانی می شود. همانطور که از نام این متد مشخص است این متد قبل از Mount شدن کامپوننت اجرا می شود. اصطلاح mount در ری اکت به این معنی است که کامپوننت شما درون DOM قرار داده می شود. پس componentWillMount به این معنی است که کارهایی که نیاز دارید قبل از قرار داده شدن کامپوننت درون DOM انجام شود در این متد باید انجام دهید.

render: در ادامه متد render صدا زده می شود که مسئول قرار دادن کامپوننت درون DOM یا به اصطلاح mount کردن کامپوننت است. با این متد نیز تا حدودی در آموزهای قبلی کار کردیم. این متد با هر تغییر state یا props فراخوانی خواهد شد. البته در مورد تغییر props در ادامه توضیحات بیشتری خواهیم داد.

create all direct-child components: درون render تمامی کامپوننت های child استفاده شده نیز ساخته و mount خواهند شد که در شکل مشخص است.

componentDidMount: پس از mount شدن کامپوننت متد componentDidMount فراخوانی می شود. این متد به صورت تضمینی فقط یک بار فراخوانی می شود و بهترین مکان برای اجرای درخواست های ajax است.

 

2. چرخه رندر کردن مجدد (re-rendering) در صورت تغییر props

چرخه قبلی که دیدیم فقط در ابتدای شروع mount شدن کامپوننت رخ می دهد. اما چرخه ای که در این قسمت با آن روبرو هستیم چرخه ایست که بارها و بارها و در اثر تغییر props رخ می دهد. نحوه استفاده از این متدها در آموزهای بعدی ارائه خواهد شد.

componentWillReceiveProps: این متد اولین جایی است که بعد از تغییر props فراخوانی می شود. مزیت اسامی این متدها این است که کاملا از روی اسم متدها می توان حدس زد که چه زمانی فراخوانی می شوند.

shouldComponentUpdate: متد بعدی که فراخوانی می شود این متد است. در این متد باید یک boolean بازگشت داده شود. در صورتی که return false انجام شود کامپوننت مجددا render نخواهد شد. شاید بپرسید که چرا باید false برگشت داده شود. این کار برای جلوگیری از render مجدد و در نتیجه بهبود performance برنامه خواهد شد. برای مثال شما درون این متد props جدید را بررسی خواهید کرد و درصورتی که این props جدید با props قبلی یکی باشد شما return false می کنید تا هیچ تغییری در صفحه ایجاد نشود. اما در صورتی که بخواهیم render مجدد اتفاق بیوفتد می بایست مقدار true برگشت داده شود.

componentWillUpdate: این متد در صورتی فراخوانی می شود که نتیجه shouldComponentUpdate مقدار true باشد. در صورتی که کلا شما shouldComponentUpdate را استفاده نکنید نیز این متد فراخوانی می شود. در این متد نیز باید کارهایی که میخواهیم قبل از render مجدد اتفاق بیوفتد انجام می شود.

render: در ادامه این متد فراخوانی می شود که نیازی به توضیح آن دیده نمی شود. در این متد در صورتی که کامپوننت های فرزند props جدید را بگیرند این چرخه برای آن کامپوننت ها نیز اجرا خواهد شد.

componentDidUpdate: در نهایت پس از رندر مجدد کامپوننت این متد فراخوانی می شود. این متد نیز مانند componentDidMount به صورت تضمینی یک بار در این چرخه اجرا می شود و مکان مناسبی برای اجرای دستوراتی است که ممکن است side effect داشته باشند. مانند فراخوانی api با استفاده از ajax.

3. چرخه رندر کردن مجدد در صورت تغییرات داخلی کامپوننت (مانند فراخوانی setState)

این چرخه مانند چرخه قبل است فقط componentWillReceiveProps در این چرخه فراخوانی نمی شود. پس در این قسمت نیازی به توضیح این چرخه نیست.

 

4. چرخه رندر مجدد پس از فراخوانی forceUpdate

تابع forceUpdate را زمانی که میخواهیم کامپوننت را مجبور کنیم که مجددا render شود فراخوانی می کنیم. البته ترجیحا نباید از این تابع استفاده شود اما بعضا بالاجبار از این تابع استفاد می شود.

این چرخه نیز مانند چرخه قبل نیازی به توضیح بیشتر ندارد.

 

5. چرخه خطا

این چرخه از نسخه 16 ری اکت اضافه شده است و برای زمانی است که در قسمت های مختلف کامپوننت خطایی ایجاد شده است. در این چرخه یک متد وجود دارد که فراخوانی می شود و آن componentDidCatch است. در صورتی که در هر کدوم از متدهای چرخه کامپوننت های child خطایی رخ دهد این متد فراخوانی می شود و می توان با استفاده از آن خطا را نمایش داد. شاید در حال حاضر کم کاربرد ترین چرخه همین چرخه باشد ولی برای کنترل خطاها توصیه می شود استفاده شود.

۳ دیدگاه

دیدگاهی بگذارید