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

یک کامپوننت React می تواند چهار مرحله از زندگی خود را به شرح زیر طی کند.

۱- (Initialization) مقدار دهی اولیه :

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

۲ - (Mounting) اجرای کامپوننت:

نصب و راه اندازی مرحله ارائه JSX است که به روش خود رندر برگشته است.به طور ساده مقدار عبارت (رشته ای ) که DOM برگردادنده است 

۳ ـ (Updating) آپدیت شدن کامپوننت ها :

به روز رسانی مرحله ای است که وضعیت یک کامپوننت به روز می شود و مقدار جدیدی بعد از رندر شدن برگشت داده  میشود .

۴ ـ (Unmounting) حذف شدن مقادیر :

همانطور که از نام آن برمی آید ، Unmounting آخرین مرحله از چرخه عمر جزء است که در آن مؤلفه از صفحه حذف می شود.

متدهای چرخه ی عمر در ReactJS :

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

componentDidMount  پس از اولین رندر و تنها در سمت کلاینت اجرا می شود. در همین مکان است که درخواست های AJAX و DOM یا به روز رسانی حالات رخ می دهد. این متد در یکپارچه شدن با فریمورک های جاوا اسکریپت دیگر و هر تابعی که اجرای آن با تأخیر همراه است، مثل setTimeout و setInterval کاربرد دارد. ما برای به روز کردن حالت از این متد استفاده می کنیم تا بتوانیم متدهای چرخه ی عمر دیگر را فعال کنیم.

componentWillReceiveProps به محض به روز شدن ویژگی ها قبل از فراخوانی رندر دیگر احضار می شود. ما این متد را از setNewNumber و زمانی که حالت را به روز کردیم، فعال کردیم.

shouldComponentUpdate مقدار true یا false را برگشت می دهد. این متد به روز بودن یا نبودن جزء را مشخص می کند و به صورت پیش فرض بر روی true قرار دارد. اگر مطمئن هستید که جزء مورد نظر شما پس از به روز شدن حالت یا ویژگی ها نیازی به رندر ندارد، می توانید مقدار false را برگشت دهید.

componentWillUpdate درست قبل از رندر شدن فراخوانی می شود.

componentDidUpdate درست بعد از رندر شدن فراخوانی می شود.

componentWillUnmount پس از جدا شدن جزء از DOM فراخوانی می شود. ما جزء خود را در main.js از DOM جدا می کنیم.

mount  کردن یعنی چه ؟

هنگامی که از mount صحبت می کنیم، منظور ما همان روند تبدیل مولفه های مجازی به عناصر DOM واقعی است که توسط ری اکت در DOM صفحه قرار می گیرد . این قابلیت برای کارهایی از قبیل واکشی (بازیابی) داده ها برای کامپوننت ها مفید است

به طور ساده یعنی react مقدار DOM اصلی را با DOM مجازی مقایسه میکند و اگر مقدار جدیدی در رشته خروجی باشد کامپوننت را اپدید میکند .

نکته :

متد componentWillUpdate برای مدیریت تغییرات یک کامپوننت، استفاده می شود (به شرطی که از this.setState برای مدیریت تغییرات استفاده نکنیم، چون در اینصورت یک حلقه بی نهایت در برنامه بوجود خواهد آمد).

متد componentWillReceiveProps:

هنگامی که کامپوننت یک props جدیدی دریافت کند، ری اکت یک متد را فراخوانی می کند.

این اولین متدی است که در هنگام دریافت یک props جدید، فراخوانی می شود. بهترین زمان برای تعریف این متد موقعی است که می خواهید محاسبات خاصی را روی بعضی از props ها، انجام دهیم و وضعیت داخلی کامپوننت تان را بروزرسانی کنیم. در این متد می توانیم stateمان را بسته به props های جدید بروزرسانی کنیم. چیزی که در این جا باید به آن توجه کنید این است که حتی اگر متد componentWillReceiveProps فراخوانی شود، مقدار props ممکن است تغییری نکند، در نتیجه بهتر است که تغییرات مقادیر props ها را همیشه بررسی کنید.