نوشته های رضا باسره

استفاده از متد lodash debounce در ReactJS

رضا باسره — Fri, 30 Jun 2023 22:43:52 +0330

خب بیاین اول ببینیم lodash چیه؟ lodash یک JavaScript utility library ه که اگه سری به سایت lodash بزنید متوجه میشید منظورم چیه، lodash مجموعه بهینه و کاملی از متد ها رو در اختیارمون قرار میدهد که میتونیم از اونها بنا به نیازمون توی پروژه هامون استفاده کنیم که اینجا میخوایم درباره متد debounce و نحوه استفاده ازش توی پروژه های ReactJS صحبت کنیم.حالا بریم سراغ سوال اصلی مون! debounce چیه؟! لابد می دونید که دارین این مقاله رو میخونید، متد debounce برای جلوگیری از call شدن مجدد یه تابع تا یه زمان مشخص بعد اخرین callشدنش استفاده میشه. تا به حال شده یه سرچ باکس پیاده کنید و بخواید ریکوستتون رو به جای اینکه با تایپ هر یک حرف بفرستید، صبر کنید تا کاربر متن مورد نظرش رو تایپ کنه و بعد ارسال کنید؟ اگه تو ویرگول تجربه ی نوشتن داشته باشید حین نوشتن، بالای صفحه کنار لوگوی ویرگول عبارت «در حال ذخیره...» نوشته شده و وقتی تایپ رو متوقف میکنید به «ذخیره شد» تغییر میکنه که دقیقا داره همین کاری که چند خط بالاتر گفتم رو انجام میده.بیاید ببینیم ساختار این متد به چه شکله؟ سایت lodash ساختار این متد رو به این شکل معرفی کرده:_.debounce(func, [wait=0], [options={}])بیاین اول یه چیزی بهتون بگم! شاید فکر کنید این «_» چیه؟ معمولا موقع اضافه کردن lodash به پروژه به این شکل importش میکنن:var _ = require('lodash');پس اون «_» اول خود lodashه که اومده متد debounceش رو call کرده! البته ما به این شکل اون رو import نمی کنیم!خب دور نشیم از بحث! همونطور که توی ساختار متد debounce مشاهده می کنین اولین پارامتر یه تابع‌ه که همون تابع اصلی‌مونه که میخوایم از کال شدنش توی یه بازه مشخص جلوگیری کنیم، پارامتر دوم wait timeه که مقدار پیش فرضش 0 ه و واحدش میلی ثانیه‌س و بر اساس نیازمون توی پروژه میتونیم اون رو هر مقداری بذاریم و پارامتر سوم یه سری optionهایی هستن که میخوایم اعمال کنیم. توجه کنید که دوتا آرگومان آخر اختیاری ان.سه تا option رو میتونیم روی این متد اعمال کنیم:leading(boolean)trailing(boolean)maxWait(number)که واسه جزییات بیشتر ارجاعتون میدم به سایت lodash :)نحوه استفاده از debounce :بیاید همون سرچ باکس‌ی که بالا ازش حرف زدیم رو پیاده کنیم. نمونه ای که بدون استفاده از debounce خواهیم داشت به این شکله:اگه دقت کنید با هر تغییر مقدار inputمون یه بار تابع handleChange صدا زده میشه و یه ریکوست فرستاده میشه، حالا اگه بخوایم این مورد رو به صورت بهینه تر با deblounce پیاده کنیم نتیجه به شکل زیر میشه:به همین سادگی تونستیم کدمون رو تا حد زیادی بهینه کنیم و از ریکوست ها و رندرهای اضافی جلوگیری کنیم. نکته ای که اینجا لازمه حواستون بهش باشه قرار دادن debounce داخل useCallback‌ یا ترجیحا useMemo ه چرا که از ساخت مجدد debounce جلوگیری میکنه.

ارتباط بدون خشونت: زبان زندگی

رضا باسره — Wed, 03 Aug 2022 15:00:04 +0430

ارتباط بدون خشونت(Non-Violent Communication) یا به صورت اختصار ان. وی. سی.[ تو کتاب اینجوری نوشته :) ] یه شیوه ارتباطیه که ما رو به این سمت میبره که به قول کتاب، از صمیم قلب نثار کنیم و ببخشیم. این کتاب بهمون کمک می‌کنه که توی ارتباطات‌مون با بقیه طرف مقابل‌مون رو درست درک کنیم، چه تو ناراحتی هاش، چه تو حال خوبش، چه توی مشکلات‌ی که باهم داریم و ... و همچنین خودمون رو هم توی شرایط مختلف درک کنیم. همدلی کلمه‌ایه که بارها و بارها توی متن این کتاب تکرار شده و میشه گفت شالوده اصلی این کتاب همدلی‌ه و اینکه چطور می‌تونیم همدلی کنیم، چه با خودمون و چه با بقیه افراد حتی اگه کسی باشه که اصلا نشناسیمش!مراحل ان. وی. سی.در واقع کل مطالب کتاب حول این مراحل و نحوه استفاده ازشون توی ارتباطات‌مون با خودمون و بقیه می‌چرخه. ان. وی. سی. چهار مرحله داره که به ترتیب زیر هستند:۱ - مشاهده‌ها تو این مرحله آنچه که تو یه موقعیت اتفاق افتاده رو بیان می‌کنیم، بدون هیچ ارزیابی و قضاوتی. دقیقا بیان میکنیم چی شنیدیم؟ چی دیدیم؟‌یه نقل قول توی کتاب از فیلسوف هندی کریشنامورتی هست که میگه:‌ «مشاهده بدون ارزیابی بالاترین تجلی هوش انسانی‌ه».مشاهده چه کمکی به ما میکنه؟ فرض کنید تو رابطه‌تون با همکارتون دچار مشکل شدید و به نظر شما همکارتون فرد بسیار پرحرفی‌ه (این قضاوت شماست) اگه ازتون بپرسن مشاهده‌تون چی بوده؟ شاید جواب بدید که وقتی درباره یه موضوعی صحبت میکنید باهاش کلی شاخ و برگ میده به موضوع و چیزایی میگه که میره سراغ چیزایی که از موضوع اصلی دورتون می‌کنه، همین مشاهده بهتون کمک میکنه که درخواست واضحی رو از طرف مقابلتون داشته باشید که کاری که واقعا میخواید رو براتون انجام بده نه اینکه با بیان اینکه «تو چقدر پرحرفی؟» صرفا کاری کنید که فرد مقابل در برابر ابراز نظر شما حالت دفاعی بگیره و بخواد بحثی پیش بیاد.۲ - احساس هانکته مهمی که اینجا وجود داره اینه که ما غالبا فکر و احساس رو اشتباه می‌گیریم! ینی چی؟ مثلا شاید این جمله رو شنیده باشید که «احساس می‌کنم مثل یک شکست خورده‌ام» یا «احساس می‌کنم با من عادلانه رفتار نشد» این دو جمله احساس واقعی ما رو بیان نمی‌کنن و اگه به جای «احساس می‌کنم» عبارت «فکر می‌کنم» رو قرار می‌دادیم معنای درست تری داشت. لازمه تو این مرحله احساس واقعی خودتون رو بیان کنید، مثلا «احساس نا‌امیدی میکنم» یا «ناامیدم» و ... .توی کتاب لیست طولانی از احساس هایی که میتونیم داشته باشیم نوشته شده و علاوه بر این یه سری معیار برای تفکیک فکر از احساس پیشنهاد داده که خیلی مفید هستن.۳ - نیاز هادلیل احساسی که تو مرحله قبل داشتیم، نیاز پاسخ داده نشده‌ایه که درون ما وجود داره و لازمه بهش پاسخ بدیم. تو این مرحله صرفا اون نیاز رو پیدا میکنیم که بتونیم به درستی متوجه بشیم که چه نیازی در درون ما باعث این احساس شده. مثلا در موقعیتی که پیش اومده و من احساس نا‌امیدی میکنم شاید نیاز من «ارزشمند بودن» باشه.۴ - تقاضا هاو مرحله آخر ان. وی. سی. تقاضا‌ هست. تقاضا در واقع چیزیه که ما میخوایم که به واسطه اون به نیاز پاسخ داده نشده‌مون پاسخ بدیم. نکته ای که تو این مرحله حائز اهمیته اینه که ما فرق بین «تقاضا» و «درخواست آمرانه» رو متوجه بشیم. درخواست آمرانه در واقع یک نوع تقاضاست که با انتظار اجابت همراهه! خب این یعنی چی؟ یعنی طرف مقابل از ما انتظار داره اون رو انجام بدیم و اگه انجامش ندیم از دستمون دلخور میشه. واکنشی که طرف مقابل در برابر رد تقاضا از خودش نشون میده(در صورت آمرانه بودن خواسته فرد حس منفی،‌ احساس گناه و دلخوری رو مشاهده می‌کنیم) بهمون کمک میکنه که متوجه بشیم فرد مقابل تقاضا داره یا درخواست آمرانه.اطلاعات کتابنام: ارتباط بدون خشونت: زبان زندگینویسنده: مارشال روزنبرگمترجم: کامران رحیمیاننشر:‌ اخترانوبسایت: http://www.zabanezendegi.com

استفاده از React Query

رضا باسره — Wed, 27 Jul 2022 00:10:03 +0430

یکی از قسمت های اصلی هر پروژه فرانت‌اندی اینه که بلد باشیم چطور requestها رو هندل کنیم.به طور معمول میشه با axios یا fetch ریکوست ها رو هندل کرد ولی می دونیم که یکی از کارهایی که لازمه انجام بدیم اینه که توی پروژه‌مون وضعیت های مختلف ریکوست رو داشته باشیم یا data رو cache کنیم که بتونیم یه مقدار پیش‌فرض موقع mount شدن صفحه داشته باشیم و کارهای دیگه‌ای که توی پروژه نیازه با API ها انجام بدیم.خب React Query ساخته شده که این کارها رو برامون آسون‌تر کنه، قابلیت‌هایی داره که خیلی مدیریت request ها رو راحت‌تر می‌کنه،‌ مثلا پارامتری با عنوان state برمی‌گردونه که وضعیت درخواست رو توی خودش داره یا پارامتر data رو داره که response دریافتی رو میشه ازش کشید بیرون و به صورت خودکار هم data رو cache می‌کنه.حالا چطور میشه ازش استفاده کرد؟نصب واسه نصب این package با npm دستور زیر رو لازمه توی پروژه‌تون وارد کنید:$ npm i @tanstack/react-query # or $ yarn add @tanstack/react-queryهمچنین می‌تونین CDN اون رو به پروژه‌تون اضافه کنید: