Странични ефекти — обяснени с примери.
Ако започвате да изучавате React или вече имате известно време да използвате тази библиотека, със сигурност сте попаднали на някои грешки или предупреждения, свързани с асинхронни функции, особено с помощта на куката useEffect.
Когато изучавах функционалността на тази кука, не можех да разбера причината да използвам return в тази функция, тъй като в повечето случаи не е необходимо да я използвам и React работи перфектно без нея.
Когато се запознах по-добре с начина, по който работи React и жизнения цикъл на компонентите, започнах да забелязвам, че в много случаи е твърде важно да се използва връщането в куката useEffect, особено при страничните ефекти.
Какви са страничните ефекти?
Страничен ефект може да бъде извличане на данни от отдалечен сървър, четене или запис в локално хранилище, настройка на слушатели на събития или настройка на абонамент. Тези странични ефекти могат да възникнат, когато се щракне върху бутон, когато се изпрати формуляр или когато компонент се монтира и демонтира.
useEffecthook на React позволява на функционалните компоненти да правят неща, когато даден компонент е монтиран или когато някои свойства или състояния се променят. Тази кука също позволява почистване, когато компонентът е демонтиран.
Защо да почиствате страничните ефекти?
Борбата със страничните ефекти в React е задача със средна сложност. От време на време обаче може да имате затруднения в пресечната точка на жизнения цикъл на компонента (първоначално изобразяване, сглобяване, използване, разглобяване) и жизнения цикъл на страничните ефекти (започнат, в ход, завършен).
Една такава трудност е, когато страничен ефект завърши и се опита да актуализира състоянието на вече разглобен компонент.
Това предизвиква предупреждение на React като това:
Изтичането на памет в приложенията на React е главно резултат от неанулиране на абонаменти, направени при монтиране на компонент, преди компонентът да бъде демонтиран.
Те причиняват много проблеми, включително:
- Влияе на производителността на проекта, като намалява количеството налична памет.
- Забавяне на приложението.
- Системни сривове.
Следователно е необходимо да се елиминират проблемите с изтичане на памет.
Какво представлява функцията за почистване useEffect?
Това е функция на куката useEffect, която ни позволява да спрем странични ефекти, които вече не трябва да се изпълняват, преди компонентът ни да бъде демонтиран.
useEffectе изградена по такъв начин, че можем да върнем функция вътре в нея и тази функция за връщане е мястото, където се случва почистването.
Например Компонент А изисква от API да получи списък с продукти, но докато прави тази асинхронна заявка, Компонент А се премахва от DOM (той е демонтиран). Няма нужда да изпълнявате тази асинхронна заявка.
Така че като метод за почистване за подобряване на вашето приложение можете да изчистите (анулирате) асинхронната заявка, така че да не бъде завършена.
Функция за почистване на useEffect:
useEffect(() => {
// Your effect
return () => {
// Cleanup
}
}, [input])
Почистване на ефект
Анулиране на заявка за извличане
Има различни начини за отмяна на повикванията за извличане на заявки, можем да използваме извличане AbortController или Axios AbortController.
За да използваме AbortController, трябва да създадем контролер с помощта на конструктора AbortController(). След това, когато нашата заявка за извличане започне, ние предаваме AbortSignal като опция в обекта options на заявката.
Това свързва контролера и сигнала със заявката за извличане и ни позволява да я анулираме по всяко време с помощта на AbortController.abort():
Почистване на изчакванията
Когато използваме функциите на таймера setTimeout(callback, time), можем да ги изчистим при демонтиране, като използваме специалната функция clearTimeout(timerId).
Интервали за почистване
Подобно на изчакванията, setIntervals(callback, time)има специална функция за изчистването им с функция clearInterval(intervalId).
Почистване на слушатели на събития
Почистването на слушателите става чрез window.removeEventListener. Извикването removeEventListener трябва да препраща към същата функция в извикването removeEventListener, за да премахне правилно слушателя.
Почистване на уеб сокети
Когато създадете връзка WebSocket, можете да я затворите във функцията за почистване socket.close().
Заключение
Научихме, че някои странични ефекти изискват почистване, за да се избегнат изтичания на памет и ненужни и нежелани поведения. Трябва да научим кога и как да използваме функцията за почистване на useEffecthook, за да избегнем тези проблеми и да оптимизираме приложенията.
Препоръчвам почистване на асинхронни ефекти, когато компонентът е демонтиран. Освен това, ако асинхронният страничен ефект зависи от стойностите на проп или състояние, тогава помислете за тяхното почистване, когато компонентът се актуализира.
Надявам се, че сте намерили тази статия за полезна и че вече можете да използвате функцията за почистване правилно.
Прочетете повече
Want to Connect? Love connecting with friends all around the world on Twitter.
Повече съдържание в PlainEnglish.io. Регистрирайте се за нашия безплатен седмичен бюлетин. Следвайте ни в Twitterи LinkedIn. Вижте нашияCommunity Discord и се присъединете към нашия Talent Collective.
