نوشته های امیر قادریان

context hooks

امیر قادریان — Sat, 01 Apr 2023 02:42:32 +0330

Context hooks:مقدمه: بی مقدمه!?هوک کانتکست کجا استفاده میشه؟?هوک کانتکست یکی از ابزارهای قدرتمند ری اکت هست که به برنامه‌نویسان امکان اشتراک دادن داده‌ها بین کامپوننت‌های مختلف را می‌دهد. با استفاده از هوک کانتکست، می‌تونیم داده‌هایی را که باید به اشتراک گذاشته بشن رو توی یک کانتکست تعریف کنیم بعد ازش توی هر کامپوننتی که خواستیم استفاده کنیم. برای حل مشکل حفاری پراپس ها(prop drilling) ازش استفاده میشهاین عکس رو داشته باشید:با کانتکست مستقیم داده ها رو به کامپوننتی که نیاز داره پاس میدیمفرض کنید میخوایم یه آرایه از اعداد 1تا 3 رو با کانتکست پاس بدیم:ابتدا از createContext برای ایجاد کانتکست استفاده میکنیم سپس در این کانتکست آرایه ای شامل اعداد 1 تا 3 تعریف میکنیم بعد با استفاده از ارائه دهنده NumberContext.Provider این آرایه به عنوان مقدار valueپاس داده شده و در قالب کانتکست قرار میگیرد بعد NumberContext و NumberProvider رو اکسپورت میکنیمبعد اونجایی که می خوایم از این کانتکست استفاده کنیم، به صورت زیر اقدام می‌کنیم:. در انتها با استفاده از useContext، مقدار این کانتکست به عنوان یک state در Component استفاده میشود."آیا این پست برای شما مفید بود؟ با لایک کردن و نظر دادن، به من کمک کنید تا بیشترین استفاده را از این پست داشته باشید."

هوک های استیت

امیر قادریان — Tue, 28 Mar 2023 23:14:14 +0330

مقدمه : بی مقدمه ! ?سوال : هوک های استیت چه کاربردی دارن؟?هوک‌های استیت در ری اکت ، یکی از اصلی‌ترین ابزارهای مدیریت state هستند و به شما امکان می‌دهند که مقادیر استیت رو در کامپوننت‌های ری اکت مدیریت کنید.دو نوع استیت هوک داریم: useState , useReducerهوک useState یکی از پرکاربرد ترین و مهم ترین هوک ها توی ری اکت هست.هوک useStatat: همه ی هوک ها رو باید قبل از استفاده, از ری اکت import کنیم.اینطوری مثلا:import { useState } from 'react';یه نگاه به سینتکس useState بندازید=>سینتکس useStateدر واقع، با استفاده از هوک useState می‌توانید مقدار استیت را در یک تابع کامپوننت ری اکتی تعریف کرده و سپس آن را به عنوان یک آرایه به عنوان خروجی دریافت کنید. این آرایه دو مقدار دارد: مقدار فعلی state و تابعی که به کمک آن می‌توانید مقدار state را تغییر دهید.به عنوان مثال:کاربر بر روی دکمه کلیک میکند و ایونت دکمه اجرا میشودsetCount (count +1) <= () تابع setCount همانطور که در کد بالا تعریف کردیم باعث اپدیت شدن مقدار count میشود و یکی به مقدار اولیه ی استیت که صفر است اضافه میکند و پاراگراف که صفحه نشان میدهد به you clicked 1 times تغییر میکند.useReducer:هدف از استفاده از useReducer، مدیریت استیت های بزرگ و پیچیده در کامپوننت‌های ری اکت است. معمولاً هنگامی که استیت بیش از یک مقدار شامل یک سری منطق پیچیده است، استفاده از useReducer توصیه می‌شود. همچنین، این هوک به شما امکان می‌دهد که منطق استیت را از UI جدا کنید و از روش معمول استفاده از setState برای تغییر وضعیت که ممکن است باعث پیچیدگی در کد شود، استفاده نکنید.یه نگاه به سینتکس useReducer هم بندازید=>به طور کلی، useReducer مشابه useState است، اما به جای متد setState برای تغییر وضعیت از یک تابع reducer استفاده می‌کند که اسمشو dispatch میزاریم معمولا. reducer یک تابع معمولی است که دو پارامتر دارد: استیت قبلی و یک اکشن. reducer سپس یک استیت جدید با توجه به اکشن و استیت قبلی باز می‌گرداند.یه مثال برای جا افتادن مطلب:در این کد، ابتدا مقدار اولیه شمارنده را با شماره ۰ در state قرار دادیم. سپس، یک تابع reducer را تعریف کردیم که براساس اکشن، استیت جدید را تولید می‌کند. در این حالت، reducer می‌تواند به سادگی شماره را در استیت با اضافه یا کاهش ۱ به روز رسانی کند. سپس این reducer را با استفاده از useReducer فراخوانی کردیم و state اولیه را وارد کردیم.در انتها، دو دکمه افزایش و کاهش را به همراه یک حالت نمایش شمارنده به UI اضافه کردیم. هر بار که کاربر یکی از دکمه‌ها را فشار می‌دهد، یک اکشن با نام مشخص (increment یا decrement) به reducer ارسال می‌شود. reducer سپس با توجه به نوع اکشن وضعیت جدید را محاسبه و برگشت می‌دهد و سپس UI با وضعیت جدید بروزرسانی می‌شود همچنین منطق استیت از UI کاملا جدا است.تفاوت بین useState و useReducer : اصلی ترین تفاوت بین useState و useReducer این است که useState برای مدیریت وضعیت های ساده و useReducer برای مدیریت وضعیت های پیچیده تر با منطق و قابلیت گسترش بیشتر استفاده می‌شود. در واقع یه جورایی خود useState با useReducer درست شده است.تفاوت دیگری که باید برای استفاده از useReducer در نظر گرفته شود این است که برای تغییر وضعیت با useReducer، باید از یک تابع reducer استفاده کنید، که وظیفه آن تعیین نحوه به روزرسانی وضعیت جدید است، در حالی که با useState، می‌توانید به طور مستقیم مقدار جدید را تعیین کنید. در نتیجه، استفاده از useReducer برای پیچیدگی‌های بیشتر و حالت‌هایی که نیاز به منطق محاسباتی دارند، مفیدتر است."آیا این پست برای شما مفید بود؟ با لایک کردن و نظر دادن، به من کمک کنید تا بیشترین استفاده را از این پست داشته باشید."

معرفی هوک های ری اکت

امیر قادریان — Tue, 28 Mar 2023 17:41:10 +0330

مقدمه: بی مقدمه! ?سوال: هوک ها اصلا چی هستن و به چه کارمون میان?؟این سوال، سوال نسبتا مهمی هست تقریبا توی همه ی موقعیت های شغلی که دنبال دولوپر ری اکت می گردن سوالاتی رو درباره ی هوک ها از شما میپرسنهوک ها چی هستن؟ جواب این سوال نسبتا ساده هست هوک ها توی ورژن ری اکت 16.8 اومدن تا یکسری از فیوچرز هایی رو که کلاس کامپوننت ها داشتن رو به فانکشنال کامپوننت ها هم اضافه کنیم چون نوشتن کد با فانکشنال کامپوننت ها خیلی نسبط به کلاس کامپوننت ها بهتر بود. (الان که دارم این مقاله رو مینوسم ورژن ری اکت 18.2 هستش)انواع هوک ها :State Hooks : دوتا استیت هوک داریم useState و useReducerقطعا هر جایی توی فانکشنال کامپوننت ها بخوایم از استیت ها استفاده کنیم باید از استیت هوک ها هم استفاده کنیم پس کاربردشون نسبتا زیاده . مثلا وقتی می خوایم اطلاعات کاربرامون رو توی استیت ذخیره کنیم ، پروداکت ها و آیتم های موجود که اطلاعاتشون تغییر میکنه و... همه اینا باید از یک نوع استیت هوک استفاده کنیمContext Hook: یک کانتکس هوک داریم : useContextبرای ایجاد یک یا چند استیت که به راحتی به تمامی کامپوننت‌های برنامه دسترسی داشته باشن ، استفاده می‌شه. که برای انتقال داده به کامپوننت‌های فرعی بدون نیاز به انتقال آن‌ها از طریق پارامترها، مناسب است. با استفاده از Context Hooks، می‌تونیم به سادگی داده‌هایی را توی کل برنامه به اشتراک بزاریم و تغییراتی که در یکی از کامپوننت‌ها ایجاد می کنیم رو توی تمامی کامپوننت‌های مرتبط با آن بصورت خودکار اپدیت کنیم.Ref Hooks : دوتا رف هوکس داریم : useRef و useImperativeHandleبرای دسترسی و کنترل مستقیم بر روی المان هایDOM استفاده می کنیم . با استفاده از آنها، می‌تونیم به صورت مستقیم به المان هایDOM دسترسی پیداکنیم و تغییر دهید. این کار را می‌توان برای مدیریت فوکوس المان های DOM و اجرای عملیات های بیرون از React نیز به کار برد.EffectHooks : 3نوع افکت هوک داریم useEffect و useLayoutEffect و useInsertionEffect برای مدیریت life cycle کامپوننت و اجرای کد اجرایی در طول زمان، مثل بارگذاری داده‌ها، ایجاد و حذف المان‌ها، اپدیت کامپوننت استفاده می‌شوند.Performance Hooks :عبارتند ازuseMemo و useCallback و memo و و useTransition و useDeferredValueکاربرد اصلی شون بهبود عملکرد و کارایی (Performance) برنامه‌های ری اکت هست با استفاده از این هوک ها، می‌تونید عملکرد برنامه‌ی خود را بهبود بخشید،و از اجرای غیر بهینه و کاهش کارایی جلوگیری کنید، حجم و زمان لود برنامه را کاهش دهید و در نتیجه تجربه کاربری(ux) بهتری را به کاربرانتان ارائه دهید.دیگر هوک ها : useDebugValue و useId و useSyncExternalStoreو هوک های شخصی شده :هوک هایی هستن که خودمون درست میکنیمیه سری قطعه کدکه برای تغییر رفتار یک کتابخانه یا فریمورک ازش استفاده میشه . این هوک ها می تونن به ما اجازه بدن تا رفتار یک کتابخانه را بر اساس نیازهای خاص خودمون تغییر بدییمامیدوارم که ازین پست خوشتون اومده باشهتمام تلاشم رو کردم که این پست رو به صورت کلی و ساده توضیح بدم. توی پست های بعدی روی هر کدوم از هوک ها ریز میشیم پس اگر خوب این پست رو نفهمیدی لازم نیست دوباره بخونیش میتونی به پست های بعدی بری و توی وقتتون صرفه جویی کنید?"آیا این پست برای شما مفید بود؟ با لایک کردن و نظر دادن، به من کمک کنید تا بیشترین استفاده را از این پست داشته باشید."