چرخه حیات در ری اکت:)

سلام بچهااا امروز می خوام راجب life cycle هر چی فهمیدم برای شما و خودم بنویسم که تا الان اون قدر زیاد نیازی بهش نداشتم ولی موقع یادگیری هوک ها یکم گیج کرد منو تفاوت اینهااین عکس های پایین معمولا همه جا هستن ولی داستانشون چیه؟ چه فرقی می کنند ؟ اینجور که من فهمیدم اولی کامل ترعه و عکس دومی فقط قسمت های اصلی عه که ما بیشتر تو برنامه نویسی باهاش سرکار داریمدر این حین یه سری متدها از قبل منسوخ شدن که ایجا ممکن نبینید مثلcomponentWillMount,componentWillReceiveProps,componentWillUpdateو یه سری صحبت ها هم هست که میگه متد getSnapshotBeforeUpdate به زودی منسوخ میشه ولی فعلا در حدعه حرف عه این جور که من فهمیدممن می خوام عکس دومی که کاربردی ترعه را اول بنویسم و بعد عکس دومیراسی اگه دیر این ویرگول می خونی بهترعه که بری تو این سایت اونجا اگه متدی منسوخ بشه و کلا ازlife cycle حذف بشه می تونی ببینی و تفاوت ورژن ها را بفهمیهنگامی که یک کامپوننت روی یک صفحه برنامه مون تعریف می شود، نمی توانیم بلافاصله به عنصرهای DOM آن دسترسی داشته باشیم، چون ما DOM مجازی تعریف کردیم.بنابراین باید تا زمانی که کامپوننت خودش را بطور کامل در مرورگر قرار دهد (mount می شود)، صبر می کنیم. پس در واقع mounting ؟!هنگامی که از mount صحبت می کنیم، منظور ما همان روند تبدیل مولفه های DOM مجازی به عناصر DOM واقعی است که توسط ری اکت در DOM صفحه قرار می گیرد.Constructorهر وقت یک component ساخته می‌شود اولین متدی که فراخوانی می‌شود constructor است. این متد فقط یکبار در طول چرخه‌ حیات فراخوانی می‌شود و این تابع فقط داخل کلاس کامپوننت ها کاربرد دارد در ری‌اکت constructor تنها جایی است که می توان از this.state استفاده کرد، در بقیه متدها فقط می‌توان با استفاده از this.setState مقدار آن را تغییر داد.Renderاین یک متد ضروری در component های ری‌اکت است، در این متد المنت‌ها آماده‌ی نصب در DOM می‌شوند. متد render یک JSX را برای نمایش در UI باز می‌گرداند. یک متد render می‌تواند وقتی چیزی برای نمایش ندارد مقدار null را بازگرداند.ما در function component ها این متد نمی بینیم و خود فانکشن همون رندرمونه و همون فانکشن را صدا میزنه(اگه اطلاعات بشتری می دونید کامنت کنید) در همین حد تونستم فقط راجب این که رندر چرا توی فانکشن کامپونت ها نیست بفهمم-.- اگه چیزی فهمیدم اپدیت می کنمcomponentDidMountبعد از این که ما برای اولین بار component خود را render کردیم ینی کامپونت به صورت کامل بارگذاری شد این متد فراخوانی می‌شود. در این متد ما می‌توانیم به DOM دسترسی داشته باشیم.کاربرد : یکی از مهم‌ترین کاربردهای این متد استفاده از آن برای درخواست های Ajax و API است یا وقتی که یه درخواست get یا post داریم و یا هر تابعی که اجرای آن با تأخیر همراه است، مثل setTimeout و setInterval کاربرد دارد یا DOM رو میخوایم به روز رسانی کنیم از این متد استفاده میکنیم.componentDidMount() { fetch('url') .then(response => response.json() ); .then(data => this.setState({ info: data }) ); }componentDidUpdateحالا که به این بخش رسیدیم یعنی تغییرات ما در DOM اعمال شد. بیشترین مورد استفاده از این متد برای به‌روزرسانی DOM با تغییرات props و state است و با هربار صدا زدن setState چون یه بار دیگر رندر میشه این متدهم کال میشهدر این متد ما به سه چیز دسترسی داریم، props موجود، State موجود و مقداری که متد getSnapshotBeforeUpdate(پایین تر گفتم راجبش) بازگردانده است.componentDidUpdate(prevProps, prevState, snapshot) { if (this.props.userName !== prevProps.userName) { this.fetchData(this.props.userName); } }در مثال بالا ما مقدار props جدید را با props موجود مقایسه کردیم و اگر مقدار آن متفاوت بود آن را به fetchData پاس می‌دهیم. (البته حالا لازم نیست این پارامترها را بهش پاس داد و به صورت()componentDidUpdate خالی هم میشه )این تابع برای کلاس کامپوننت های نوشته شده است و برای فانکشن کامپونت ها باید از useEffect که معادل این تابع است استفاده کنیم . Unmounting (componentWillUnmount() )این مرحله فقط شامل یک متد به نام ()componentWillUnmount است. همان طور که از نامش پیداست این متد قبل از نابود شدن component اجرا می‌شود. اگر نیاز به هرگونه عملیات پاکسازی برای component خود دارید می‌توانید از این متد استفاده کنید.شما در این متد اجازه‌ی استفاده از ()setState برای تغییر state را ندارید.به عنوان مثال برای این متد، وقتی که می‌خواهید یک ثانیه شمار بسازید و از ()setInterval استفاده می‌کنید باید راهی وجود داشته باشد که وقتی دیگر از این component در پروژه‌ی خود استفاده نمی‌کنیم بتوانیم جلوی اجرا شدن آن را با ()clearInterval بگیریم.this.state = { stopWatch: 0 } stopWatchHandler = () => { this.setState(prevState => { return { stopWatch: prevState.stopWatch + 1 } }); } componentDidMount() { setInterval(this.stopWatchHandler, 1000); } componentWillUnmount() { clearInterval(this.stopWatchHandler); }برای ساخت ثانیه شمار در مثال بالا ابتدا یک متغیر state با نام stopWatch و مقدار اولیه 0 در کامپوننت خود تعریف کرده‌ایم. سپس در متد stopWatchHandler یک واحد به مقدار stopWatch اضافه می‌کنیم. مرحله ی بعد در متد componentDidMount با استفاده از setInterval متد stopWatchHandler را هر یک ثانیه اجرا می‌کنیم و مقدار stopWatch را یک واحد افزایش می‌دهیم.حالا فرض کنید که ثانیه شمار بخشی از پروژه شما است. که پس از استفاده دیگر به آن احتیاج ندارید اگر تابع setInterval را با استفاده از clearInterval غیرفعال نکنید این تابع هر یک ثانیه اجرا می‌شود و یک واحد به stopWatch اضافه می‌کند. این یعنی حتی وقتی که دیگر نیازی به ثانیه شمار در پروژه‌ی خود ندارید، ثانیه شمار همچنان در حال اجرا در پروژه‌ی شما است و از منابع استفاده می‌کند.دیگر کاربردها : از این متد می توانیم برای هر نوع عملیات پاکسازی از قبیل: پاکسازی متدهای timeout، پاکسازی داده ها، قطع اتصال های وب سوکت و … استفاده کنیم.خوب رسیدیم به بخش با جزئیات بیشتر چندتا متد اضافه شده که اینجا می خواییم بفهمیم چی به چیه؟!static getDerivedStateFromPropsهمان گونه که در تصویر بالا نمودار چرخه‌ی حیات را مشاهده می‌کنید. می‌توانید ببینید که متد getDerivedStateFromProps در مرحله اول (mounting) و دوم(updating)مشرک است. متد getDerivedStateFromProps درست قبل از render فراخوانی می‌شود. این متد می‌تواند یک Object برای به‌روزرسانی state و یا مقدار null را برای جلوگیری از به‌روزرسانی بازگرداند.ما وقتی از این متد استفاده می‌کنیم که بخواهیم state خود را به وسیله‌ی props به‌روزرسانی کنیم که البته کار خوبی نیستاین یک متد static است پس به کلید واژه‌ی this دسترسی ندارد. این متد می‌تواند به state و props دسترسی داشته باشد. از این رو وقتی یک state وابسته به props تعریف می‌کنیم با استفاده از این متد می‌توانیم آن را به‌روزرسانی کنیم.this.state = { name: 'Harry' }; static getDerivedStateFromProps ( nextProps, prevState ) { if (prevState.name !== nextProps.name) { return { name: nextProps.name } } return null; }در مثال بالا ابتدا یک متغیر state با نام name و مقدار 'Harry' تعریف کرده‌ایم، با پاس دادن آرگومان‌های nextProps و prevState به getDerivedStateFromProps به props جدید و state موجود دسترسی پیدا کردیم و سپس با استفاده از دستور if چک می‌کنیم که اگر مقدار props جدید با state موجود متفاوت بود آن را به‌روزرسانی کن و اگر با هم مساوی بودند نیاز به به‌روزرسانی نیست و مقدار null را بازگردانده می‌شود.shouldComponentUpdateزمانی که یک props جدید دارید یا از ()setState استفاده می‌کنید، component شما به طور خودکار توسط ری‌اکت دوباره رندر می‌شود. تا شما بتوانید تغییرات را در UI مشاهده کنید.اما با استفاده از این متد شما می‌توانید به component خود اجازه ندهید که دوباره رندر شود.به طور کلی این متد وقتی می‌تواند مفید باشد که شما نمی‌خواهید ری‌اکت تغییرات جدید state و props را رندر کند.شما نمی‌توانید در این متد از ()setState برای به‌روزرسانی state استفاده کنید.shouldComponentUpdate(nextProps, nextState) { return this.props.title !== nextProps.title || this.state.input !== nextState.input; }همان طور که در مثال بالا مشاهده می‌کنید این متد مقادیر nextProps و nextState را به عنوان آرگومان می‌پذیرد و باید یک Boolean را در جواب سوال "آیا باید دوباره رندر کنم؟" بازگرداند که به طور پیش فرض مقدار true را باز می‌گرداند. اگر مطمئن هستید که جزء مورد نظر شما پس از به روز شدن حالت یا ویژگی ها نیازی به رندر ندارد، می توانید مقدار false را برگشت دهید.معمولا زیاد از این متد استفاده نمی کننgetSnapshotBeforeUpdateمتد ()getSnapshotBeforeUpdate یکی دیگر از متد‌های چرخه‌ی حیات ری‌اکت است getSnapshotBeforeUpdate(revProps, prevState) { // ... }این متد درست قبل از به‌روزرسانی DOM فراخوانی می‌شود. هر مقداری که بازمی‌گرداند به عنوان آرگومان به متد ()componentDidUpdate پاس داده می‌شود.یادتون باشه که این متد به ندرت استفاده می‌شود یا اصلا استفاده نمی‌شود. مگر این که بخواهید به یکی از attribute های DOM دسترسی داشته باشید و اون رو به عنوان آرگومان به ()componentDidUpdate پاس بدهید.منبع ها را تصادفا پاک شدن به خوبی خودتون ببخشید و اگه جایی اشتباهه ممنون میشم بگید :)