تفاوت تغییر state با این دو روش
سلام استاد وقتتون بخیر باشه
فرضا ما یک دکمه داریم که وقتی روش کلیک میکنیم مقدار count یکی زیاد میشه حالا سوالم اینه فرقه بینه روش تغیر استیت در این دو قطعه کد چیه ؟
this.setState((prevState) => {
return({
count : prevState.count + 1
})
})و
this.setState(() => {
return({
count : this.state.count + 1
})
})
برای شفاف سازی موضوع یک جمله از داکیومنت react رو اول با هم مرور می کنیم:
Because this.props and this.state may be updated asynchronously, you should not rely on their values for calculating the next state.
این جمله به وضوح و شفافیت کامل داره میگه به دلیل اینکه مقادیر this.state و this.props به صورت async تغییر می کنن نباید برای محاسبه مقدار بعدی state از اونها استفاده کرد!
البته این موضوع شاید در عمل در خیلی جاها مشکلی ایجاد نکنه ولی در صورتی که استفاده بشه میتونه باگ ها فراوانی رو ایجاد بکن!
کلا در class component ها به دو روش باید state رو تغییر داد. اگر به مقدار فعلی state یا props نیازی نداریم میتونیم اون بخشی که قرار تغییر بکن رو به صورت یک object مستقیم پاس بدیم به this.setState و به صورت اتوماتیک میره بقیه کارها رو انجام میده و مقدار فعلی رو با قبلی برامون مرج میکنه
حالا اگر به مقدار فعلی state وprops نیاز داشته باشیم نباید مستقیما از اون مقادیر استفاده کرد چون که این عملیات به صورت async انجام میشه و اگر هم زمان در چند باعث تغییر در مقدار اونها بشه ممکن اون مقداری که مد نظر ما نیست در محاسبات استفاده بشه! برای شفاف شدن شدن موضوع یک مثال رو با هم ببینیم:
فرض کنید که مقدار رو داخل state ذخیر کردید که مقدار true یا false میگره و باهاش مشخص میکنید که یک فرم آیا نمایش داده بشه یا نه
برای این مورد هم یک button قرار میدید و برای تغییر وضعیت از مقدار فعلی state به صورت مستقیم استفاده می کنید! اگر به صورت هم زمان از جای دیگه هم stateمقدارش تغییر بکن شما در محاسبات خودتون مقدار غلط رو دریافت می کنید و باعث میشه برنامه مطابق انتظار کار نکن
