۳ اشتباه توسعه‌دهندگان تازه‌کار React به هنگام کار با stateها


۲۳ تیر ۱۳۹۹
۳ اشتباه توسعه‌دهندگان تازه‌کار react به هنگام کار با stateها

یکی از موارد مورد علاقه من در رابطه با توسعه برنامه‌های وب، این است که همیشه چیزی برای یادگیری وجود دارد. شما می‌توانید تمام زندگی خود را برای یادگیری زبان‌های برنامه‌نویسی مختلف، کتابخانه‌ها و فریم‌ورک‌های گوناگون صرف کنید، اما هنوز هم به تمام آن‌ها و حتی یکی از آن‌ها را به طور کامل مسلط نخواهید شد.

به دلیل اینکه تمامی ما برنامه‌نویسان در حال یادگیری هستیم، به این معنی است که همگی مستعد ایجاد خطا در کد هستیم. مشکلی ندارد. هدف این است که بهتر باشیم. اگر اشتباهی کنید و از آن درس بگیرید، کار درستی را انجام می‌دهید. اما اگر در یادگیری مبحث جدیدی با شکست روبرو شدید و به تکرار این اشتباه ادامه دادید، به نظر می‌رسد در حرفه و مسیر خود در آینده با مشکل‌های جدی روبه‌رو خواهید شد.

با‌این‌حال، در این مقاله ۳ اشتباه رایجی که میان توسعه‌دهندگان تازه‌کار برنامه‌های React در سروکله زدن با state کامپوننت‌ها (component) وجود دارد را بررسی می‌کنیم. به هر کدام از این اشتباهات نگاهی می‌اندازیم سپس در رابطه با نحوه حل آن‌ها بحث خواهیم کرد.

تغییر state به طور مستقیم

به هنگام تغییر state یک کامپوننت، به این نکته توجه کنید که یک کپی جدید از state را به همراه تغییرات برگردانید، نه اینکه به طور مستقیم state را تغییر دهید. اگر اشتباها state کامپوننتی را مستقیما تغییر دادید، الگوریتم تشخیص تفاوت‌های React قادر به تشخیص تغییرات نخواهد بود، در نتیجه کامپوننت شما به درستی آپدیت نمی‌شود. برای فهم بیشتر به مثال زیر دقت کنید.

در نظر بگیرید که یک state مانند زیر دارید:

this.state = {
  colors: ['red', 'green', 'blue']
}

و حالا قصد افزودن "yellow" به این آرایه از اسامی رنگ‌ها را دارید. شاید این کار را از طریق روش زیر انجام دهید:

this.state.colors.push('yellow')

یا حتی به شکل زیر:

this.state.colors = [...this.state.colors, 'yellow']

اما هر دو روش بالا، راه‌حل‌های اشتباهی هستند. به هنگام آپدیت state در کلاس یک کامپوننت، همیشه باید از متد setState استفاده کنید، همچنین همیشه به این نکته توجه کنید که آبجکت‌ها را تغییر ندهید. روش زیر، طریق صحیح انجام این کار است:

this.setState(prevState => ({ colors: [...prevState.colors, 'yellow'] }))

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

تغییر state که به حالت قبلی‌اش بستگی دارد، بدون استفاده از تابع

۲ راه برای استفاده از setState وجود دارد. راه اول این است که یک آبجکت را به عنوان ورودی به این متد بدهید. راه دوم این است که از تابعی به همراه ورودی، که این ورودی شامل مقادیر state قبل از تغییر است، استفاده کنید. خب، در چه زمان باید از کدام روش استفاده کرد؟

به طور مثال اگر قرار بود یک دکمه (button) بتواند فعال و غیرفعال باشد، احتمالا stateیی با اسم isDisabled دارید که یک مقدار صحیح و یا غلط (boolean) را در خود نگه می‌دارد. اگر بخواهید وضعیت دکمه را از حالت فعال به غیرفعال تغییر بدهید، به احتمال زیاد از روش زیر استفاده می‌کنید، به عباری از آبجکتی برای ورودی متد setState استفاده می‌کنید:

this.setState({ isDisabled: !this.state.isDisabled })

اما مشکل این کد چیست؟ مشکل در اینجا خودش را نشان می‌دهد که می‌توان آپدیت stateهای React را batch کرد، batch به این معنی است که چندین آپدیت state می‌تواند در یک فرآیند بروزرسانی رخ دهد. اگر این اتفاق برای آپدیت‌های شما رخ دهد و شما چندین بروزرسانی برای فعال‌بودن و غیرفعال‌بودن یک state داشته باشید، نتیجه نهایی ممکن است آن چیزی که انتظارش را دارید نباشد.

راه صحیح برای این کار استفاده از تابعی است که ورودی آن، state قبل از تغییر است:

this.setState(prevState => ({ isDisabled: !prevState.isDisabled }))

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

این قضیه برای موردی مثل افزایش یک شمارنده نیز صادق است.

این کار را انجام ندهید:

this.setState({ counterValue: this.state.counterValue + 1 })

به جای آن از روش زیر استفاده کنید:

this.setState(prevState => ({ counterValue: prevState.counterValue + 1 }))

نکته در اینجاست که اگر مقدار جدید یک state به مقدار قبلی آن بستگی دارد، همیشه باید از تابعی با ورودی (state قبل از تغییر) استفاده کنید. اما در غیر صورت، یعنی اگر مقدار جدید یک state به مقدار قبلی‌اش بستگی ندارد، می‌توانید از روش اول استفاده کنید.

عدم توجه به asynchronous بودن متد setState

در انتها مهم است تا بیاد داشته باشید که متد setState از نوع توابع asynchronous است. برای مثال، تصور کنید که کامپوننتی با state زیر داریم:

this.state = { name: 'John' }

در ادامه متدی داریم که مقدار state را آپدیت می‌کند و آن را در کنسول نمایش می‌دهد:

this.setState({ name: 'Matt' })
console.log(this.state.name)

شاید فکر کنید که خروجی در کنسول، 'Matt' باشد، اما اشتباه می‌کنید. خروجی برابر با 'John' خواهد بود.

دلیلش هم آن است که متد setState از توابع asynchronous است. این بدان معنی است که وقتی به خطی می‌رسیم که در آن setState صدا زده می‌شود، مقدار state آپدیت خواهد شد اما برنامه در اینجا متوقف نمی‌شود (non-blocking) و خط بعد به صورت همزمان و به صورت موازی با خط بالایی اجرا می‌شود (asynchronous)(در واقع برنامه منتظر نمی‌ماند تا متد setState به طور کامل اجرا شود، سپس به سراغ خط بعد برود، بلکه بلافاصله سراغ خط بعد می‌رود ).

اگر کدی دارید که می‌خواهید بعد از آپدیت state اجرا شود، React این اجازه را به شما می‌دهد که از یک callback function استفاده کنید تا به محض پایان آپدیت state، کد مدنظرتان اجرا شود.

شیوه درست برای نمایش مقدار state در مثال قبل، روش زیر است:

this.setState({ name: 'Matt' }, () => console.log(this.state.name))

حالا بهتر شد! خروجی هم مانند انتظار ما 'Matt' خواهد بود.

جمع‌بندی

حالا دیگر روش درست را می‌دانید! ۳ اشتباه متداول و چگونگی رفع آن‌ها را بررسی کردیم. به یاد داشته باشید که اشتباه‌کردن طبیعی است. شما در حال یادگیری هستید، من هم همینطور. همگی در حال یادگیری هستیم. بیایید یادبگیریم و روز به روز بهتر شویم.

منبع: https://dev.to/thawkin3/3-react-mistakes-junior-developers-make-with-component-state-1bhd

برچسب‌ها:

خدمات رایگان لیارا

۲.۵ گیگابایت فضای ذخیره‌سازی ابری رایگان

۲.۵ گیگابایت Object Storage سازگار با پروتکل S3 با دیسک‌های SSD به‌صورت رایگان دریافت کنید.

هاست رایگان برای دیتابیس‌

دیتابیس‌های MariaDB، PostgreSQL و Redis را فقط با یک کلیک و به‌صورت رایگان تهیه کنید.

سرویس DNS رایگان

به سادگی دامنه‌تان را اضافه کنید و به صورت رایگان رکورد‌های آن را مدیریت کنید.

۱۰۰ هزار تومان اعتبار اولیه

بعد از ثبت نام در لیارا مبلغ ۱۰۰ هزار تومان اعتبار هدیه دریافت می‌کنید که با توجه به ساعتی بودن هزینه سرویس‌ها، می‌توانید تمامی خدمات پولی را برای چندین هفته رایگان استفاده کنید.

ارسال ۱۰۰ ایمیل تراکنشی رایگان در هر ماه

در سرویس ایمیل لیارا شما می‌توانید تا ۱۰۰ ایمیل رایگان در هر ماه ارسال کنید و فقط برای بیش از آن هزینه پرداخت کنید. (به‌همراه دسترسی SMTP)

هاست رایگان برای انواع وبسایت

تفاوتی ندارد برای وبسایت خود از Node استفاده می‌کنید یا Laravel و Django، در لیارا می‌توانید به صورت کاملا رایگان آن را میزبانی کنید.

توسعه‌دهندگان درباره‌ی ما چه می‌گویند

تجربه کار باliara_cloud@امروز خیلی خوب بود. یکی از سرویس هام رو منتقل کردم روش و راضیم. انقد سریع و جذاب کارم راه افتادم اصن باورم نمیشد! برعکس سرویس های PaaS دیگه با اون همه پیچیدگیشون. دمتون گرم
...

MohammadReza
liara testimonial
keikaavousi

بعد از بسته شدن @fandoghpaas و ناراحتی همه‌مون از اینکه یه سرویس خوب و صادق نمی‌تونه از پس هزینه‌ها بر بیاد، سرویسم رو منتقل کردم به پاس لیارا (https://liara.ir @liara_cloud) . تجربه راحت و خوب. تفاوت‌هایی داشت که کمی کار می‌خواست ولی تا الان کاملا راضی.

jadi
liara testimonial
jadi

یه خسته نباشید باید به تصمیمliara_cloud@بگم،
بعد از چندین روز سرکله زدن با سرویس های مشابه بالاخره تصمیم گرفتم لیارا رو امتحان کنم و باور نمیشه ۱۰ دقیقه بیشتر وقت نبرد،
دمتون گرم.

Arch
liara testimonial
EbadiDev

واسه سرویس PaaS با اختلاف لیارا بهترین رابط کاربری داره و یکی از مزیت‌های سرویس دیتابیس‌شون اینه که خودشون به صورت دوره‌ای بکآپ میگیرن.
...

Ali Najafi
liara testimonial
me_ali_najafi

یکی از کارهای خوبی که جدیداً میکنم اینه که یه دیتابیس روی لیارا میسازم و به پروژه وصل میکنم اینطوری هم خونه و هم محل کار دیتابیس بروز رو دارم و راحت میتونم ادامه بدم کار روliara_cloud@

Navid
liara testimonial
1navid

عاشقliara_cloud@شدم درسته در حد AWS نیست ولی خب تجربه خوبی واسه پروژه های داخل ایران ارائه میده، میتونم رو CD هم اجراش کنم

Amir H Shekari
liara testimonial
vanenshi