Ако сте развивач на React кој сè уште не научил за куките на React, сега е моментот. Оваа објава детално ќе помине низ useEffect React Hook. Тоа е еквивалент на кука на швајцарски армиски нож. Решава различни прашања, како што се како да се добијат податоци кога се монтира компонентата, како да се изврши кодот кога се менува состојбата или потпирачот, како да се постават тајмери или интервали итн.
UseEffect се користи за речиси сè што сакате да „направите“ во компонентата React што не враќа JSX (било кој тип на несакан ефект). Може да имате и неколку употребни ефекти по компонента.
Сета оваа моќ има цена: освен ако не разберете како функционира, може да биде збунувачки. Во овој пост, ќе разгледаме различни примери за да можете да го сфатите концептуалниот модел и да го примените на вашиот сопствен код.
Реагирајте ги куките – Што се обидува да реши?
Куките првпат беа претставени во верзијата React 16.8 и сега се користат од многу проекти на React. Hooks го надминува проблемот со повторување на кодот помеѓу компонентите. Тие се напишани без употреба на класи. Ова не значи дека React ги напушта класите; куките се едноставно алтернативен метод.
React ви овозможува брзо да креирате софистицирани компоненти со државна логика. Тешко е да се одделат овие компоненти бидејќи класата се потпира на методите на животниот циклус на React. Тука влегуваат React Hooks.
Тие ви дозволуваат да поделите компонента на помали функции. Наместо да го делите кодот на помали делови врз основа на методите на животниот циклус, сега можете да го распоредите и одделите кодот на помали единици во зависност од функционалноста.
Што е useEffect Hook?
Куките се функции кои ви дозволуваат пристап до состојба и други способности за реагирање без да треба да пишувате класи ES6. React hooks API има кука наречена useEffect. Ако сте запознаени со животниот циклус на react, куката useEffect е иста како и компонентаDidMount, компонентаDidUpdate, и компонентаWillUnmount комбинирани методи на животниот циклус.
Според документацијата на React Hooks, тој е создаден за да реши некои од проблемите со методите на животниот циклус на компонентите од класата ES6.
синтакса
Првиот аргумент е функцијата за повратен повик, која стандардно се извршува по секое прикажување. Вториот параметар е опционална низа за зависност која му дава инструкции на Hook да поврати повик само ако се промени целната состојба.
Кука ги споредува историските и сегашните состојби на секоја зависност. Ако двете вредности не се совпаѓаат, Hook го повикува повратниот повик наведен во првиот параметар. Низите за зависност го менуваат вообичаеното однесување за повратен повик и гарантираат дека Hook ги игнорира сите други компоненти во опсегот на компонентата.
Основна употреба
За да зачувам порака, користам React useState во примерокот за код погоре. После тоа, ја земам променливата состојба на мојата порака и ја печатам на екранот. Сепак, сега сакам да го користам Ефектот за да ја изменам пораката секунда откако ќе се монтира компонентата.
Го вметнав мојот ефект зад линијата useState откако го увезав useEffect од рамката React. Првиот параметар што треба да се користи Ефект е функција. Кога ќе се изврши овој управувач со функции, тој ќе се грижи за сите несакани ефекти што ќе ги дадете. Функцијата е функција за повратен повик што се повикува кога се случува еден од настаните од животниот циклус на компонентата React.
Кога да го користите?
Куката useEffect може да биде корисна во различни ситуации. Следниве се најважни:
- Можеме да го промениме овој параметар од страната на клиентот кога сакаме да преземеме податоци во зависност од доставениот аргумент. Ќе биде отповикан откако параметарот ќе се ажурира со свежи податоци.
- Ако сакаме да добиеме податоци од крајна точка на API и да ги прикажеме на страната на клиентот. Кога нашата компонента се рендерира, функцијата или управувачот дадени на куката useEffect се извршува и податоците во состојбите на компонентата се враќаат. Овие статуси потоа се користат во компонентите на корисничкиот интерфејс.
- Кога вашата компонента се потпира на податоци од надворешниот свет и не можеме да се осигураме дека податоците ќе пристигнат, треба да користиме Ефект (можеби серверот е таму долу). Наместо да фрлате проблеми и да спречите прикажување на други компоненти, ставете ги во куката useEffect.
Употреба случаи
Ако компонентата повторно се рендерира по првото извршување, таа нема да се изврши.
Секогаш кога компонентата се рендерира или повторно се прикажува, таа секогаш треба да се изврши.
Стандардно, програмата работи само еднаш. Потоа, ако се променат вредностите на потпората, извршете:
За асинхрони активности, секогаш користете useEffect.
Код блоковите useEffect се очигледни маркери за асинхрони работни места за вашите колеги програмери. Можно е да се создаде асинхрон код без користење на useEffect, но ова не е „методот React“ и ја зголемува сложеноста и ризикот од грешки.
Користењето на useEffect наместо пишувањето асинхрон код што може да го запре корисничкиот интерфејс е добро позната техника во заедницата на React, особено начинот на кој тимот на React го изградил за да изврши несакан ефект.
Друга предност на неговото користење е тоа што програмерите можат едноставно да го прегледаат кодот и веднаш да го откријат кодот што се извршува „надвор од контролниот тек“, кој станува важен дури по првиот циклус на рендерирање. Понатаму, блоковите се погодни за екстракција во повеќекратни и уште посемантички прилагодени куки.
Пример
Користејќи го кодот useEffect, зголемувајте број во секунда.
Заклучок
Разбирањето на основните принципи за дизајн и најдобрите практики на useEffect Hook, според мене, е критична вештина што треба да ја научите ако сакате да станете развивач на React од следното ниво.
Да резимираме, useEffect Hook добива функција која вклучува императив, целосна логика на потенцијално ефект. Низата за зависност, која е вториот параметар, може да се користи за да се влијае на извршувањето. Додека се справувате со него, исто така е неопходно да се напише код за чистење користејќи ја функцијата за враќање.
Кажете ни во коментарите дали статијата е корисна.
Оставете Одговор