آموزش React مقدماتی قسمت نهم: استفاده از Effect Hook

قسمت ها

تاکنون ما از useState Hook استفاده کرده ایم که به ما امکان می دهد در کامپوننت های functional خود state ایجاد کنیم. ما از مفهوم state برای مدیریت ورودی کاربر در قسمت جستجو و تولید لیست فیلتر شده دوره ها بر اساس مقدار state استفاده کرده ایم.

در این قسمت قصد داریم React Hook دیگری را پوشش دهیم: useEffect. با استفاده از این hook می توانید side-effects را در برنامه خود به راحتی کنترل کنید. شاید سوال بپرسید که side-effects چیست؟ قبل از پاسخ دادن به این سوال، برای نشان دادن بهتر مسئله، ابتدا به یک مثال می پردازیم.

استفاده از Local Storage (حافظه درونی) برای نگهداری متن جستجو

اگر می خواهید متن جستجوی وارد شده توسط کاربر در مرورگر را نگه دارید (یعنی، پس از بارگیری مجدد صفحه، مقدار فیلد ورودی جستجو باقی بماند) می توانید به راحتی از حافظه local مرورگر استفاده کنید:

در این حالت، ما یک آیتم جدید به نام searchText در local storage در داخل تابع handleSearch تنظیم می کنیم. مقدار این آیتم روی مقدار عنصر input تنظیم شده است.

در هنگام مقدار دهی اولیه state مان یعنی searchText، در تلاش هستیم تا به آیتم local storage پیدا کرده و از مقدار ست شده state استفاده کنیم. اگر این آیتم در ocal storage وجود نداشته باشد، ما به طور خودکار مقدار اولیه state را روی یک رشته خالی تنظیم می کنیم.

همانطور که اکنون مقدار اولیه searchText را از local storage می خوانیم، باید اطمینان حاصل کنیم که این مقدار در فیلد های input نمایش داده می شود. بنابراین ما باید مقدار state را از طریق یک prop دیگر به کامپوننت Search منتقل کنیم:

مقدار prop ازکامپوننت Search اکنون حاوی مقدار state فعلی searchText است، بنابراین ما قادر به استفاده از این prop برای مقداردهی اولیه مقدار فیلد input هستیم:

در صورت باز کردن برنامه در مرورگر، می توانید نگاهی اجمالی به آنچه در local storage رخ می دهد، بکنید:

10.png

وقتی در فیلد ورودی متن جستجو تایپ می کنید، می بینید که مقدار keyText در local storage به روز شده و منعکس کننده مقدار فیلد ورودی است. با بارگیری مجدد وب سایت، می توانید قسمت ورودی متن جستجو را با مقدار ذخیره شده در local storage پر کنید.

خب، مشکل این رویکرد چیست؟ ما برای به روزرسانی مقدار در local storage، از تابع event handler استفاده کرده ایم. از این رو می خواهیم اطمینان حاصل کنیم که مقدار موجود در حافظه محلی همیشه با مقدار state searchText هماهنگ است. اما به روزرسانی local storage در تابع handleSearch در حال انجام است. اگر می خواهیم state SearchText را در جای دیگری به روز کنیم، باید مطمئن شویم که local storage نیز به روز شده است. به روزرسانی local storage را می توان از side-effect به روزرسانی state دانست. اگر ما بتوانیم راهی برای ثبت این اقدام به عنوان یک side-effect بیابیم که همیشه هنگام به روزرسانی state اتفاق می افتد، روش بسیار بهتری خواهد بود. با این کار همچنین می توانیم از خطر فراموش کردن به روزرسانی local storage هنگام تغییر مقدار state جلوگیری کنیم.

با استفاده از React Effect Hook (useEffect) دقیقاً می توانیم این کار را انجام دهیم. ما در مراحل زیر نحوه انجام این کار را بررسی خواهیم کرد.

ذخیره متن جستجو با استفاده از Effect Hook

برای اینکه بتوانیم از useEffect استفاده کنیم، باید اولین عبارت import را در App.js به شکل زیر گسترش دهیم:

import React, {useState, useEffect} from 'react';

سپس می توانیم تابع useEffect را فراخوانی کنیم:

تابع useEffect انتظار دو پارامتر را دارد. اولین پارامتر تابعی است که حاوی کد side-effect است. پارامتر دوم آرایه ای از متغیرهای وابسته است که باید side-effect برای آنها ثبت شود. در مثال ما آرایه شامل متغیر state searchText است. این بدان معناست که هر بار که مقدار متغیر state searchText تغییر می کند ، این تابع اجرا می شود. side-effect را می توان برای چندین متغیر همزمان ثبت کرد. در این حالت می توانید آرایه را گسترش دهید تا شامل موارد بیشتری باشد. اگر آرایه خالی باشد، عملکرد side-effect فقط یک بار در ابتدای lifecycle کامپوننت اجرا می شود.

تابع side-effect حاوی خطی از کد است که برای به روزرسانی local storage نیازمند مقدار فعلی searchText است. سپس می توان این خط کد را از تابع handleSearch حذف کرد. اکنون اطمینان حاصل کرده ایم که هر بار searchText با یک مقدار جدید به روز می شود، مقدار متن جستجو که در local storage ذخیره می شود نیز به روز می شود.

سعید نصیری
سعید نصیری

من برنامه نویس لاراول، PHP و طراح سایت هستم. برنامه نویسی موبایل و تولید اپلیکیشن های موبایل نیز بخش دیگری از توانایی های فردی من هست. تقریبا ده دوازده سالی تجربه مستمر در زمینه طراحی سایت دارم و نزدیک به یک سال هم میشه که در برنامه نویسی موبایل وارد شده ام.

× در حال پاسخ به: