اگر شما یک توسعه دهنده React هستید که هنوز در مورد قلاب های React یاد نگرفته اید، اکنون زمان آن است. این پست به طور مفصل به استفاده از React Hook می پردازد. این قلاب معادل چاقوی ارتش سوئیس است. مشکلات مختلفی را حل میکند، مانند نحوه دریافت دادهها هنگام نصب یک مؤلفه، نحوه اجرای کد هنگام تغییر وضعیت یا پایه، نحوه تنظیم تایمر یا بازهها و غیره.
یک useEffect تقریباً برای هر کاری که بخواهید در یک مؤلفه React انجام دهید استفاده می شود که JSX را بر نمی گرداند (هر نوع عارضه جانبی). همچنین ممکن است در هر کامپوننت چندین useEffects داشته باشید.
همه این قدرت هزینه دارد: مگر اینکه بفهمید چگونه کار می کند، ممکن است گیج کننده باشد. در این پست، نمونههای مختلفی را بررسی میکنیم تا بتوانید مدل مفهومی را درک کرده و آن را در کد خود اعمال کنید.
واکنش به قلاب ها - سعی در حل چه چیزی دارد؟
هوک ها برای اولین بار در نسخه 16.8 React معرفی شدند و اکنون توسط بسیاری از پروژه های React مورد استفاده قرار می گیرند. Hooks بر مشکل تکرار کد بین اجزا غلبه می کند. آنها بدون استفاده از کلاس نوشته می شوند. این بدان معنا نیست که React کلاسها را رها میکند. قلاب ها به سادگی یک روش جایگزین هستند.
React به شما اجازه می دهد تا به سرعت کامپوننت های پیچیده با منطق حالت ایجاد کنید. جدا کردن این مؤلفهها دشوار است، زیرا کلاس به روشهای چرخه حیات React متکی است. اینجاست که React Hooks وارد می شود.
آنها به شما اجازه می دهند یک جزء را به توابع کوچکتر تقسیم کنید. به جای تقسیم کد به قطعات کوچکتر بر اساس روشهای چرخه زندگی، اکنون میتوانید بسته به عملکرد، کد را مرتب کرده و به واحدهای کوچکتر جدا کنید.
useEffect Hook چیست؟
هوک ها توابعی هستند که به شما امکان می دهند بدون نیاز به نوشتن کلاس های ES6 به حالت و سایر قابلیت های واکنش دسترسی داشته باشید. React Hooks API یک قلاب به نام useEffect دارد. اگر با چرخه های زندگی react آشنا هستید، قلاب useEffect همان است که componentDidMount, componentDidUpdateو جزء WillUnmount ترکیب روش های چرخه زندگی
با توجه به مستندات React Hooks، برای حل برخی از مشکلات مربوط به روشهای چرخه عمر جزء کلاس ES6 ایجاد شده است.
نحو
اولین آرگومان یک تابع callback است که به طور پیش فرض پس از هر رندر اجرا می شود. پارامتر دوم یک آرایه وابستگی اختیاری است که به Hook دستور می دهد تنها در صورت تغییر وضعیت هدف، به تماس پاسخ دهد.
هوک وضعیت تاریخی و فعلی هر وابستگی را با هم مقایسه می کند. اگر این دو مقدار با هم مطابقت نداشته باشند، Hook بازخوانی مشخص شده در پارامتر اول را فراخوانی می کند. آرایههای وابستگی رفتار برگشت تماس معمولی را تغییر میدهند و تضمین میکنند که Hook همه مؤلفههای دیگر در محدوده مؤلفه را نادیده میگیرد.
استفاده اولیه
برای ذخیره یک پیام، من از React useState در نمونه کد بالا استفاده می کنم. پس از آن، متغیر وضعیت پیامم را میگیرم و روی صفحه چاپ میکنم. با این حال، من اکنون می خواهم از Effect برای تغییر پیام یک ثانیه پس از نصب کامپوننت استفاده کنم.
من افکت خود را پس از وارد کردن useEffect از چارچوب React در پشت خط useState قرار دادهام. اولین پارامتر برای استفاده از Effect یک تابع است. هنگامی که این کنترل کننده عملکرد اجرا می شود، از عوارض جانبی شما مراقبت می کند. تابع یک تابع فراخوانی است که زمانی فراخوانی می شود که یکی از رویدادهای چرخه حیات جزء React رخ دهد.
چه موقع از آن استفاده کنیم؟
قلاب useEffect ممکن است در شرایط مختلف مفید باشد. موارد زیر بسیار مهم هستند:
- زمانی که میخواهیم دادهها را بسته به آرگومان ارائهشده واکشی کنیم، میتوانیم این پارامتر را از سمت کلاینت تغییر دهیم. پس از بهروزرسانی پارامتر با دادههای تازه، فراخوانی میشود.
- اگر بخواهیم داده ها را از یک نقطه پایانی API بازیابی کنیم و در سمت مشتری نمایش دهیم. وقتی کامپوننت ما رندر میشود، تابع یا کنترلکننده دادهشده به قلاب useEffect اجرا میشود و دادههای موجود در حالتهای جزء بازیابی میشوند. این وضعیت ها سپس در اجزای رابط کاربری به کار می روند.
- هنگامی که مؤلفه شما به داده های دنیای بیرون متکی است و ما نمی توانیم اطمینان حاصل کنیم که داده ها وارد می شوند، باید از Effect استفاده کنیم (شاید سرور در پایین است). به جای ایجاد مشکلات و جلوگیری از نمایش سایر اجزا، آنها را در قلاب useEffect قرار دهید.
موارد استفاده
اگر کامپوننت پس از اولین اجرا دوباره رندر شود، اجرا نخواهد شد.
هر زمان که یک جزء رندر یا دوباره رندر می شود، همیشه باید اجرا شود.
به طور پیش فرض، برنامه فقط یک بار اجرا می شود. پس از آن، اگر مقادیر prop تغییر کرد، اجرا کنید:
برای فعالیت های ناهمزمان، همیشه از useEffect استفاده کنید.
بلوک های کد useEffect نشانگرهای آشکار مشاغل ناهمزمان برای توسعه دهندگان شما هستند. ایجاد کد ناهمزمان بدون استفاده از useEffect امکان پذیر است، اما این "روش React" نیست و هم پیچیدگی و هم خطر اشتباه را افزایش می دهد.
استفاده از useEffect به جای نوشتن کد ناهمزمان که ممکن است رابط کاربری را متوقف کند، یک تکنیک شناخته شده در جامعه React است، به خصوص روشی که تیم React آن را برای اجرای یک اثر جانبی ساخته است.
مزیت دیگر استفاده از آن این است که توسعهدهندگان میتوانند به سادگی کد را بررسی کنند و بلافاصله کدی را که «خارج از جریان کنترل» اجرا میشود، شناسایی کنند، که تنها پس از اولین چرخه رندر مهم میشود. علاوه بر این، بلوک ها برای استخراج به قلاب های سفارشی قابل استفاده مجدد و حتی معنایی تر مناسب هستند.
یک مثال
با استفاده از کد useEffect، یک عدد را در هر ثانیه افزایش دهید.
نتیجه
از نظر من، درک اصول طراحی اساسی و بهترین شیوههای useEffect Hook، مهارتی حیاتی است که میخواهید اگر میخواهید یک توسعهدهنده سطح بعدی React شوید، یاد بگیرید.
به طور خلاصه، useEffect Hook تابعی را دریافت می کند که شامل منطق کامل امری و بالقوه اثر است. آرایه وابستگی، که دومین پارامتر است، می تواند برای تأثیرگذاری بر اجرا استفاده شود. هنگام برخورد با آن، نوشتن کد تمیز کردن با استفاده از تابع بازگشت نیز ضروری است.
اگر مقاله مفید بود، در نظرات به ما اطلاع دهید.
پاسخ دهید