کامپوننت های ری‌اکت چند متد لایف سایکل بیشتر ندارن، ولی خیلی مهمه که درست و بجا ازشون استفاده بشه. خیلی کوتاه بخونیم این متد ها کدوما هستن و هر کدوم چه کاری رو انجام میدن.
به طور کلی متد های لایف سایکل به سه دسته اصلی تقسیم میشن، Mount ،Update ،Unmount.
کلا وقتی ری‌اکت یه نسخه از کامپوننت رو میسازه و توی DOM قرار میده عملا mount انجام داده . Mount چهار متد داره.
constructor()
componentWillMount()
render()
componentDidMount()
زمانی که state یا props کامپوننت تغییری میکنن، آپدیت کامپوننت انجام میشه. آپدیت کامپوننت به این معناست که کامپوننت باید دوباره رندر بشه. به همین دلیل متد های زیر استفاده میشن:
componentWillReceiveProps()
shouldComponentUpdate()
componentWillUpdate()
render()
componentDidUpdate()
زمانی که عمر کامپوننت تموم میشه و باید از DOM حذف بشه متد زیر استفاده میشه:
componentWillUnmount()
اگه به ترتیب به متد ها نگاه کنیم میبینیم کاملا منطقیه. یکبار دیگه به اسم متد ها پشت هم دقت میکنیم.
componentWillMount
componentDidMount
componentWillReceiveProps
shouldComponentUpdate
componentWillUpdate
componentDidUpdate
componentWillUnmount
اگرچه تعداد متد ها زیاد نیست، اما مهمه بجا استفاده بشن. برای همین به طور دقیق به تک تک متد ها میپردازیم.
وقتی ری‌اکت میخواد یه کامپوننت رو رندر کنه این متد رو صدا میزنه. این متد فقط یک بار صدا زده میشه. با توجه به اینکه این متد قبل از متد render صدا زده میشه، componentWillMount تنها متد لایف سایکله که برای سرور ساید رندرینگ سمت سرور صدا زده میشه.
توی این متد میتونیم از this.setState استفاده کنیم. البته مهمه بدونیم که ممکنه re-rendering انجام نشه وقتی syncronous استیت رو ست میکنیم. بهتره مقدار پیش فرض استیت رو توی constructor ست کنیم بجای componentWillMount.
وقتی این صدا زده میشه ری‌اکت کامپوننت ها رو رنده کرده و توی DOM قرار داده. البته اگه مقدار دهی هست که به DOM نیاز داره باید همینجا انجام بدیم.
توی این متد هم میتونیم از this.setState استفاده کنیم، و بعدش کامپوننت re-render میشه.
از componentDidMount میتونیم برای گرفتن دیتا از سرور با AJAX استفاده کنیم، یا مثلا برای اضافه کردن event listener ها.
وقتی کامپوننت مجموعه جدیدی از prop ها میگیره این متد صدا زده میشه. البته باید بدونیم که ری‌اکت خودش اینو صدا میزنه، حتی اگه prop ها تغییری نکرده باشن، پس حتما باید this.props رو با nextProps مقایسه کنیم که بیخودی استیت رو باز ست نکنیم.
توی این متد هم میتونیم از this.setState برای ست کردن استیت استفاده کنیم.
اگه استیتی داریم که نتیجه محاسبه روی چند prop میتونیم محاسبه رو اینجا انجام بدیم.
به طور پیش فرض این متد پیاده سازی شده نیست، پس هر تغییر توی props یا states باعث میشه کامپوننت re-render بشه، برای همین اگه بخوایم از رندر های غیر ضروری جلوگیری کنیم میتونیم اینجا انجامش بدیم. قابل توجه که این متد برای رندر اولیه صدا زده نمیشه.
توی shouldComponentUpdate نمیتونیم از setState استفاده کنیم.
این متد دقیقا قبل از هر re-render فراخوانی میشه و برای رندر اولیه صدا زده نمیشه.
توی componentWillUpdate نمیتونیم از setState استفاده کنیم. اگه برای تغییرات props مجبور بودیم، میتونیم از componentWillReceiveProps استفاده کنیم.
اینجا میتونیم آماده سازی قبل از رندر رو انجام بدیم. و البته، از اونجایی که قبل از متد render صدا زده میشه نمیتونیم کاری رو که نیاز به DOM داره انجام بدیم.
دقیقا بعد از آپدیت شدن کامپوننت، ری‌اکت componentDidUpdate رو صدا میزنه. این متد برای رندر اولیه صدا زده نمیشه.
توی این متد میتونیم از setState استفاده کنیم.
اگه باید روی DOM بعد از آپدیت کاری بکنیم، از این متد استفاده میکنیم. برای مثال آپدیت رابط کاربری با لایبرری های 3rd party.
دقیقا بعد از اینکه ری‌اکت کامپوننت رو از بین برد این متد فراخوانی میشه.
این متد جای مناسبیه برای اینکه تمیزکاری نهایی کامپوننتو انجام بدیم، مثلا event listeners ها رو حذف کنیم یا تایمر رو قطع کنیم یا المنت های DOM رو که با componentDidMount ساختیم رو از بین ببریم و...
